diff --git a/.claude/commands/setup_repo.md b/.claude/commands/setup_repo.md
index d82e22ec6..71dee96a5 100644
--- a/.claude/commands/setup_repo.md
+++ b/.claude/commands/setup_repo.md
@@ -122,7 +122,7 @@ echo "  pnpm build        - Build for production"
 echo "  pnpm test:unit    - Run unit tests"
 echo "  pnpm typecheck    - Run TypeScript checks"
 echo "  pnpm lint         - Run ESLint"
-echo "  pnpm format       - Format code with Prettier"
+echo "  pnpm format       - Format code with oxfmt"
 echo ""
 echo "Next steps:"
 echo "1. Run 'pnpm dev' to start developing"
diff --git a/.github/workflows/ci-lint-format.yaml b/.github/workflows/ci-lint-format.yaml
index 3ce6d6aa9..c97f6255c 100644
--- a/.github/workflows/ci-lint-format.yaml
+++ b/.github/workflows/ci-lint-format.yaml
@@ -42,7 +42,7 @@ jobs:
       - name: Run Stylelint with auto-fix
         run: pnpm stylelint:fix
 
-      - name: Run Prettier with auto-format
+      - name: Run oxfmt with auto-format
         run: pnpm format
 
       - name: Check for changes
@@ -60,7 +60,7 @@ jobs:
           git config --local user.email "action@github.com"
           git config --local user.name "GitHub Action"
           git add .
-          git commit -m "[automated] Apply ESLint and Prettier fixes"
+          git commit -m "[automated] Apply ESLint and Oxfmt fixes"
           git push
 
       - name: Final validation
@@ -80,7 +80,7 @@ jobs:
               issue_number: context.issue.number,
               owner: context.repo.owner,
               repo: context.repo.repo,
-              body: '## 🔧 Auto-fixes Applied\n\nThis PR has been automatically updated to fix linting and formatting issues.\n\n**⚠️ Important**: Your local branch is now behind. Run `git pull` before making additional changes to avoid conflicts.\n\n### Changes made:\n- ESLint auto-fixes\n- Prettier formatting'
+              body: '## 🔧 Auto-fixes Applied\n\nThis PR has been automatically updated to fix linting and formatting issues.\n\n**⚠️ Important**: Your local branch is now behind. Run `git pull` before making additional changes to avoid conflicts.\n\n### Changes made:\n- ESLint auto-fixes\n- Oxfmt formatting'
             })
 
       - name: Comment on PR about manual fix needed
diff --git a/.i18nrc.cjs b/.i18nrc.cjs
index 86ce06eaa..4369f0a70 100644
--- a/.i18nrc.cjs
+++ b/.i18nrc.cjs
@@ -1,7 +1,7 @@
 // This file is intentionally kept in CommonJS format (.cjs)
 // to resolve compatibility issues with dependencies that require CommonJS.
 // Do not convert this file to ESModule format unless all dependencies support it.
-const { defineConfig } = require('@lobehub/i18n-cli');
+const { defineConfig } = require('@lobehub/i18n-cli')
 
 module.exports = defineConfig({
   modelName: 'gpt-4.1',
@@ -10,7 +10,19 @@ module.exports = defineConfig({
   entry: 'src/locales/en',
   entryLocale: 'en',
   output: 'src/locales',
-  outputLocales: ['zh', 'zh-TW', 'ru', 'ja', 'ko', 'fr', 'es', 'ar', 'tr', 'pt-BR', 'fa'],
+  outputLocales: [
+    'zh',
+    'zh-TW',
+    'ru',
+    'ja',
+    'ko',
+    'fr',
+    'es',
+    'ar',
+    'tr',
+    'pt-BR',
+    'fa'
+  ],
   reference: `Special names to keep untranslated: flux, photomaker, clip, vae, cfg, stable audio, stable cascade, stable zero, controlnet, lora, HiDream, Civitai, Hugging Face.
   'latent' is the short form of 'latent space'.
   'mask' is in the context of image processing.
@@ -26,4 +38,4 @@ module.exports = defineConfig({
   - Use Arabic-Indic numerals (۰-۹) for numbers where appropriate.
   - Maintain consistency with terminology used in Persian software and design applications.
   `
-});
+})
diff --git a/.oxfmtrc.json b/.oxfmtrc.json
new file mode 100644
index 000000000..5da4febe2
--- /dev/null
+++ b/.oxfmtrc.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "singleQuote": true,
+  "tabWidth": 2,
+  "semi": false,
+  "trailingComma": "none",
+  "printWidth": 80,
+  "ignorePatterns": [
+    "packages/registry-types/src/comfyRegistryTypes.ts",
+    "src/types/generatedManagerTypes.ts",
+    "**/*.md",
+    "**/*.json",
+    "**/*.css",
+    "**/*.yaml",
+    "**/*.yml",
+    "**/*.html",
+    "**/*.svg",
+    "**/*.xml"
+  ]
+}
diff --git a/.prettierignore b/.prettierignore
deleted file mode 100644
index 4403edd8e..000000000
--- a/.prettierignore
+++ /dev/null
@@ -1,2 +0,0 @@
-packages/registry-types/src/comfyRegistryTypes.ts
-src/types/generatedManagerTypes.ts
diff --git a/.prettierrc b/.prettierrc
deleted file mode 100644
index aa43a43ac..000000000
--- a/.prettierrc
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "singleQuote": true,
-  "tabWidth": 2,
-  "semi": false,
-  "trailingComma": "none",
-  "printWidth": 80,
-  "importOrder": ["^@core/(.*)$", "<THIRD_PARTY_MODULES>", "^@/(.*)$", "^[./]"],
-  "importOrderSeparation": true,
-  "importOrderSortSpecifiers": true,
-  "plugins": ["@prettier/plugin-oxc", "@trivago/prettier-plugin-sort-imports"]
-}
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 54f28d400..9cbac42d7 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,25 +1,22 @@
 {
   "recommendations": [
+    "antfu.vite",
     "austenc.tailwind-docs",
     "bradlc.vscode-tailwindcss",
     "davidanson.vscode-markdownlint",
     "dbaeumer.vscode-eslint",
+    "donjayamanne.githistory",
     "eamodio.gitlens",
-    "esbenp.prettier-vscode",
-    "figma.figma-vscode-extension",
     "github.vscode-github-actions",
     "github.vscode-pull-request-github",
     "hbenl.vscode-test-explorer",
+    "kisstkondoros.vscode-codemetrics",
     "lokalise.i18n-ally",
     "ms-playwright.playwright",
+    "oxc.oxc-vscode",
+    "sonarsource.sonarlint-vscode",
     "vitest.explorer",
     "vue.volar",
-    "sonarsource.sonarlint-vscode",
-    "deque-systems.vscode-axe-linter",
-    "kisstkondoros.vscode-codemetrics",
-    "donjayamanne.githistory",
-    "wix.vscode-import-cost",
-    "prograhammer.tslint-vue",
-    "antfu.vite"
+    "wix.vscode-import-cost"
   ]
 }
diff --git a/AGENTS.md b/AGENTS.md
index da2953783..9938865a9 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -27,10 +27,10 @@ See @docs/guidance/*.md for file-type-specific conventions (auto-loaded by glob)
 - Build output: `dist/`
 - Configs
   - `vite.config.mts`
-  - `vitest.config.ts`
   - `playwright.config.ts`
   - `eslint.config.ts`
-  - `.prettierrc`
+  - `.oxfmtrc.json`
+  - `.oxlintrc.json`
   - etc.
 
 ## Monorepo Architecture
@@ -46,7 +46,7 @@ The project uses **Nx** for build orchestration and task management
 - `pnpm test:unit`: Run Vitest unit tests
 - `pnpm test:browser`: Run Playwright E2E tests (`browser_tests/`)
 - `pnpm lint` / `pnpm lint:fix`: Lint (ESLint)
-- `pnpm format` / `pnpm format:check`: Prettier
+- `pnpm format` / `pnpm format:check`: oxfmt
 - `pnpm typecheck`: Vue TSC type checking
 - `pnpm storybook`: Start Storybook development server
 
@@ -72,7 +72,7 @@ The project uses **Nx** for build orchestration and task management
     - Composition API only
   - Tailwind 4 styling
     - Avoid `<style>` blocks
-- Style: (see `.prettierrc`)
+- Style: (see `.oxfmtrc.json`)
   - Indent 2 spaces
   - single quotes
   - no trailing semicolons
diff --git a/browser_tests/fixtures/utils/litegraphUtils.ts b/browser_tests/fixtures/utils/litegraphUtils.ts
index 832db6324..ea5a0b78f 100644
--- a/browser_tests/fixtures/utils/litegraphUtils.ts
+++ b/browser_tests/fixtures/utils/litegraphUtils.ts
@@ -79,48 +79,15 @@ export class SubgraphSlotReference {
 
         const node =
           type === 'input' ? currentGraph.inputNode : currentGraph.outputNode
-        const slots =
-          type === 'input' ? currentGraph.inputs : currentGraph.outputs
 
         if (!node) {
           throw new Error(`No ${type} node found in subgraph`)
         }
 
-        // Calculate position for next available slot
-        // const nextSlotIndex = slots?.length || 0
-        // const slotHeight = 20
-        // const slotY = node.pos[1] + 30 + nextSlotIndex * slotHeight
-
-        // Find last slot position
-        const lastSlot = slots.at(-1)
-        let slotX: number
-        let slotY: number
-
-        if (lastSlot) {
-          // If there are existing slots, position the new one below the last one
-          const gapHeight = 20
-          slotX = lastSlot.pos[0]
-          slotY = lastSlot.pos[1] + gapHeight
-        } else {
-          // No existing slots - use slotAnchorX if available, otherwise calculate from node position
-          if (currentGraph.slotAnchorX !== undefined) {
-            // The actual slot X position seems to be slotAnchorX - 10
-            slotX = currentGraph.slotAnchorX - 10
-          } else {
-            // Fallback: calculate from node edge
-            slotX =
-              type === 'input'
-                ? node.pos[0] + node.size[0] - 10 // Right edge for input node
-                : node.pos[0] + 10 // Left edge for output node
-          }
-          // For Y position when no slots exist, use middle of node
-          slotY = node.pos[1] + node.size[1] / 2
-        }
-
         // Convert from offset to canvas coordinates
         const canvasPos = window['app'].canvas.ds.convertOffsetToCanvas([
-          slotX,
-          slotY
+          node.emptySlot.pos[0],
+          node.emptySlot.pos[1]
         ])
         return canvasPos
       },
@@ -152,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/colorPalette.spec.ts b/browser_tests/tests/colorPalette.spec.ts
index ce372ddfa..3bc1b9167 100644
--- a/browser_tests/tests/colorPalette.spec.ts
+++ b/browser_tests/tests/colorPalette.spec.ts
@@ -232,11 +232,25 @@ test.describe('Node Color Adjustments', () => {
   }) => {
     await comfyPage.setSetting('Comfy.Node.Opacity', 0.5)
     await comfyPage.setSetting('Comfy.ColorPalette', 'light')
-    const saveWorkflowInterval = 1000
-    const workflow = await comfyPage.page.evaluate(() => {
-      return localStorage.getItem('workflow')
-    })
-    for (const node of JSON.parse(workflow ?? '{}').nodes) {
+    await comfyPage.nextFrame()
+    const parsed = await (
+      await comfyPage.page.waitForFunction(
+        () => {
+          const workflow = localStorage.getItem('workflow')
+          if (!workflow) return null
+          try {
+            const data = JSON.parse(workflow)
+            return Array.isArray(data?.nodes) ? data : null
+          } catch {
+            return null
+          }
+        },
+        { timeout: 3000 }
+      )
+    ).jsonValue()
+    expect(parsed.nodes).toBeDefined()
+    expect(Array.isArray(parsed.nodes)).toBe(true)
+    for (const node of parsed.nodes) {
       if (node.bgcolor) expect(node.bgcolor).not.toMatch(/hsla/)
       if (node.color) expect(node.color).not.toMatch(/hsla/)
     }
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/mobileBaseline.spec.ts-snapshots/mobile-default-workflow-mobile-chrome-linux.png b/browser_tests/tests/mobileBaseline.spec.ts-snapshots/mobile-default-workflow-mobile-chrome-linux.png
index c21094f81..eaa359731 100644
Binary files a/browser_tests/tests/mobileBaseline.spec.ts-snapshots/mobile-default-workflow-mobile-chrome-linux.png and b/browser_tests/tests/mobileBaseline.spec.ts-snapshots/mobile-default-workflow-mobile-chrome-linux.png differ
diff --git a/browser_tests/tests/mobileBaseline.spec.ts-snapshots/mobile-empty-canvas-mobile-chrome-linux.png b/browser_tests/tests/mobileBaseline.spec.ts-snapshots/mobile-empty-canvas-mobile-chrome-linux.png
index 1c9232428..ff608be64 100644
Binary files a/browser_tests/tests/mobileBaseline.spec.ts-snapshots/mobile-empty-canvas-mobile-chrome-linux.png and b/browser_tests/tests/mobileBaseline.spec.ts-snapshots/mobile-empty-canvas-mobile-chrome-linux.png differ
diff --git a/browser_tests/tests/mobileBaseline.spec.ts-snapshots/mobile-settings-dialog-mobile-chrome-linux.png b/browser_tests/tests/mobileBaseline.spec.ts-snapshots/mobile-settings-dialog-mobile-chrome-linux.png
index d6c21bb98..d9f0e5a7b 100644
Binary files a/browser_tests/tests/mobileBaseline.spec.ts-snapshots/mobile-settings-dialog-mobile-chrome-linux.png and b/browser_tests/tests/mobileBaseline.spec.ts-snapshots/mobile-settings-dialog-mobile-chrome-linux.png differ
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/templates.spec.ts b/browser_tests/tests/templates.spec.ts
index 977f3f6df..4921165f7 100644
--- a/browser_tests/tests/templates.spec.ts
+++ b/browser_tests/tests/templates.spec.ts
@@ -82,9 +82,7 @@ test.describe('Templates', () => {
     await expect(comfyPage.templates.content).toBeVisible()
 
     await comfyPage.page
-      .locator(
-        'nav > div:nth-child(3) > div > span:has-text("Getting Started")'
-      )
+      .getByRole('button', { name: 'Getting Started' })
       .click()
     await comfyPage.templates.loadTemplate('default')
     await expect(comfyPage.templates.content).toBeHidden()
@@ -189,9 +187,7 @@ test.describe('Templates', () => {
     const templateGrid = comfyPage.page.locator(
       '[data-testid="template-workflows-content"]'
     )
-    const nav = comfyPage.page
-      .locator('header')
-      .filter({ hasText: 'Templates' })
+    const nav = comfyPage.page.locator('header', { hasText: 'Templates' })
 
     await comfyPage.templates.waitForMinimumCardCount(1)
     await expect(templateGrid).toBeVisible()
@@ -201,7 +197,8 @@ test.describe('Templates', () => {
     await comfyPage.page.setViewportSize(mobileSize)
     await comfyPage.templates.waitForMinimumCardCount(1)
     await expect(templateGrid).toBeVisible()
-    await expect(nav).not.toBeVisible() // Nav should collapse at mobile size
+    // Nav header is clipped by overflow-hidden parent at mobile size
+    await expect(nav).not.toBeInViewport()
 
     const tabletSize = { width: 1024, height: 800 }
     await comfyPage.page.setViewportSize(tabletSize)
diff --git a/browser_tests/tests/viewport.spec.ts-snapshots/viewport-fits-when-saved-offscreen-chromium-linux.png b/browser_tests/tests/viewport.spec.ts-snapshots/viewport-fits-when-saved-offscreen-chromium-linux.png
index 694f33c40..1afdb11a2 100644
Binary files a/browser_tests/tests/viewport.spec.ts-snapshots/viewport-fits-when-saved-offscreen-chromium-linux.png and b/browser_tests/tests/viewport.spec.ts-snapshots/viewport-fits-when-saved-offscreen-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.png b/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.png
index 67bc93009..298a09d66 100644
Binary files a/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.png and b/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png b/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png
index b216647c9..7b20ddbeb 100644
Binary files a/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png and b/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts-snapshots/vue-nodes-paned-with-touch-mobile-chrome-linux.png b/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts-snapshots/vue-nodes-paned-with-touch-mobile-chrome-linux.png
index b509651cf..f1d41cf13 100644
Binary files a/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts-snapshots/vue-nodes-paned-with-touch-mobile-chrome-linux.png and b/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts-snapshots/vue-nodes-paned-with-touch-mobile-chrome-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png
index 04ad81b3d..6f40af9c0 100644
Binary files a/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png differ
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/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png
index 75be80225..0485e0302 100644
Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-ctrl-alt-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-ctrl-alt-chromium-linux.png
index 73b8a3f99..e5b95630f 100644
Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-ctrl-alt-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-ctrl-alt-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-reuses-origin-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-reuses-origin-chromium-linux.png
index 85b288e29..d47e5ece3 100644
Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-reuses-origin-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-reuses-origin-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.png
index 9aafc1306..e89433357 100644
Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.png
index 0e7abaa24..d108f0803 100644
Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-shift-output-multi-link-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-shift-output-multi-link-chromium-linux.png
index 83f258a3d..0f003c13e 100644
Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-shift-output-multi-link-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-shift-output-multi-link-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-node-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-node-chromium-linux.png
index 9cf3b642f..67eaac039 100644
Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-node-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-node-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-slot-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-slot-chromium-linux.png
index fc77c7fe1..0f55f3a83 100644
Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-slot-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-slot-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-chromium-linux.png
index eb52b6764..4b5733a29 100644
Binary files a/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-touch-mobile-chrome-linux.png b/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-touch-mobile-chrome-linux.png
index fc9e06620..390def0a2 100644
Binary files a/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-touch-mobile-chrome-linux.png and b/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-touch-mobile-chrome-linux.png differ
diff --git a/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.png b/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.png
index d6ff66592..6d4f41790 100644
Binary files a/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.png and b/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png
index cab9d380d..226ebb711 100644
Binary files a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png and b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png
index b128c4d7d..ad7a79ae0 100644
Binary files a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png and b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png
index 5fa318662..5b94967b8 100644
Binary files a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png and b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png b/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png
index 74a4e62b0..b551a56ba 100644
Binary files a/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png and b/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.png b/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.png
index 0af0e7447..3d0ae2ed0 100644
Binary files a/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.png and b/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.png differ
diff --git a/build/plugins/comfyAPIPlugin.ts b/build/plugins/comfyAPIPlugin.ts
index 6441dd781..394914dbe 100644
--- a/build/plugins/comfyAPIPlugin.ts
+++ b/build/plugins/comfyAPIPlugin.ts
@@ -76,6 +76,7 @@ function getModuleName(id: string): string {
 export function comfyAPIPlugin(isDev: boolean): Plugin {
   return {
     name: 'comfy-api-plugin',
+    apply: 'build',
     transform(code: string, id: string) {
       if (isDev) return null
 
diff --git a/build/tsconfig.json b/build/tsconfig.json
index 1c24810a8..3232dcbd6 100644
--- a/build/tsconfig.json
+++ b/build/tsconfig.json
@@ -5,7 +5,7 @@
     "noEmit": true,
     "strict": true,
     "esModuleInterop": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
diff --git a/docs/testing/vitest-patterns.md b/docs/testing/vitest-patterns.md
index 2eb7c8e09..9c7fef7c2 100644
--- a/docs/testing/vitest-patterns.md
+++ b/docs/testing/vitest-patterns.md
@@ -30,6 +30,10 @@ describe('MyStore', () => {
 
 **Why `stubActions: false`?** By default, testing pinia stubs all actions. Set to `false` when testing actual store behavior.
 
+## i18n in Component Tests
+
+Use real `createI18n` with empty messages instead of mocking `vue-i18n`. See `SearchBox.test.ts` for example.
+
 ## Mock Patterns
 
 ### Reset all mocks at once
diff --git a/eslint.config.ts b/eslint.config.ts
index 1e3dbf644..4974637fa 100644
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -4,9 +4,7 @@ import pluginI18n from '@intlify/eslint-plugin-vue-i18n'
 import { createTypeScriptImportResolver } from 'eslint-import-resolver-typescript'
 import { importX } from 'eslint-plugin-import-x'
 import oxlint from 'eslint-plugin-oxlint'
-// WORKAROUND: eslint-plugin-prettier causes segfault on Node.js 24 + Windows
-// See: https://github.com/nodejs/node/issues/58690
-// Prettier is still run separately in lint-staged, so this is safe to disable
+// eslint-config-prettier disables ESLint rules that conflict with formatters (oxfmt)
 import eslintConfigPrettier from 'eslint-config-prettier'
 import { configs as storybookConfigs } from 'eslint-plugin-storybook'
 import unusedImports from 'eslint-plugin-unused-imports'
@@ -111,7 +109,7 @@ export default defineConfig([
   tseslintConfigs.recommended,
   // Difference in typecheck on CI vs Local
   pluginVue.configs['flat/recommended'],
-  // Use eslint-config-prettier instead of eslint-plugin-prettier to avoid Node 24 segfault
+  // Disables ESLint rules that conflict with formatters
   eslintConfigPrettier,
   // @ts-expect-error Type incompatibility between storybook plugin and ESLint config types
   storybookConfigs['flat/recommended'],
@@ -242,6 +240,20 @@ export default defineConfig([
       ]
     }
   },
+  {
+    files: ['**/*.test.ts'],
+    rules: {
+      'no-restricted-properties': [
+        'error',
+        {
+          object: 'vi',
+          property: 'doMock',
+          message:
+            'Use vi.mock() with vi.hoisted() instead of vi.doMock(). See docs/testing/vitest-patterns.md'
+        }
+      ]
+    }
+  },
   {
     files: ['scripts/**/*.js'],
     languageOptions: {
diff --git a/index.html b/index.html
index 0ce0b7e99..9ff6edb07 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,21 @@
     <meta name="mobile-web-app-capable" content="yes">
     <!-- Status bar style (eg. black or transparent) -->
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
-    
+    <style>
+      @media (prefers-color-scheme: dark) {
+        body {
+          /* Setting it early for background during load */
+          --bg-color: #202020;
+        }
+      }
+      body {
+        background-color: var(--bg-color);
+        background-image: var(--bg-img);
+        background-position: center;
+        background-size: cover;
+        background-repeat: no-repeat;
+      }
+    </style>    
     <link rel="manifest" href="manifest.json">
   </head>
   
diff --git a/lint-staged.config.mjs b/lint-staged.config.mjs
deleted file mode 100644
index d158a355d..000000000
--- a/lint-staged.config.mjs
+++ /dev/null
@@ -1,25 +0,0 @@
-import path from 'node:path'
-
-export default {
-  'tests-ui/**': () => 'echo "Files in tests-ui/ are deprecated. Colocate tests with source files." && exit 1',
-
-  './**/*.js': (stagedFiles) => formatAndEslint(stagedFiles),
-
-  './**/*.{ts,tsx,vue,mts}': (stagedFiles) => [
-    ...formatAndEslint(stagedFiles),
-    'pnpm typecheck'
-  ]
-}
-
-function formatAndEslint(fileNames) {
-  // Convert absolute paths to relative paths for better ESLint resolution
-  const relativePaths = fileNames.map((f) => path.relative(process.cwd(), f))
-  const joinedPaths = relativePaths.map((p) => `"${p}"`).join(' ')
-  return [
-    `pnpm exec prettier --cache --write ${joinedPaths}`,
-    `pnpm exec oxlint --fix ${joinedPaths}`,
-    `pnpm exec eslint --cache --fix --no-warn-ignored ${joinedPaths}`
-  ]
-}
-
-
diff --git a/lint-staged.config.ts b/lint-staged.config.ts
index 89deaa4b0..c239881f8 100644
--- a/lint-staged.config.ts
+++ b/lint-staged.config.ts
@@ -1,6 +1,9 @@
 import path from 'node:path'
 
 export default {
+  'tests-ui/**': () =>
+    'echo "Files in tests-ui/ are deprecated. Colocate tests with source files." && exit 1',
+
   './**/*.js': (stagedFiles: string[]) => formatAndEslint(stagedFiles),
 
   './**/*.{ts,tsx,vue,mts}': (stagedFiles: string[]) => [
@@ -14,7 +17,7 @@ function formatAndEslint(fileNames: string[]) {
   const relativePaths = fileNames.map((f) => path.relative(process.cwd(), f))
   const joinedPaths = relativePaths.map((p) => `"${p}"`).join(' ')
   return [
-    `pnpm exec prettier --cache --write ${joinedPaths}`,
+    `pnpm exec oxfmt --write ${joinedPaths}`,
     `pnpm exec oxlint --fix ${joinedPaths}`,
     `pnpm exec eslint --cache --fix --no-warn-ignored ${joinedPaths}`
   ]
diff --git a/manifest.json b/manifest.json
index ad419b437..8d22f6423 100644
--- a/manifest.json
+++ b/manifest.json
@@ -11,6 +11,6 @@
     }
   ],
   "display": "standalone",
-  "background_color": "#ffffff",
-  "theme_color": "#000000"
+  "background_color": "#172dd7",
+  "theme_color": "#f0ff41"
 }
diff --git a/package.json b/package.json
index 72eb659c3..b01b6dbe5 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.38.7",
+  "version": "1.38.12",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -22,10 +22,8 @@
     "dev:no-vue": "cross-env DISABLE_VUE_PLUGINS=true nx serve",
     "dev": "nx serve",
     "devtools:pycheck": "python3 -m compileall -q tools/devtools",
-    "format:check:no-cache": "prettier --check './**/*.{js,ts,tsx,vue,mts}'",
-    "format:check": "prettier --check './**/*.{js,ts,tsx,vue,mts}' --cache",
-    "format:no-cache": "prettier --write './**/*.{js,ts,tsx,vue,mts}' --list-different",
-    "format": "prettier --write './**/*.{js,ts,tsx,vue,mts}' --cache --list-different",
+    "format:check": "oxfmt --check",
+    "format": "oxfmt --write",
     "json-schema": "tsx scripts/generate-json-schema.ts",
     "knip:no-cache": "knip",
     "knip": "knip --cache",
@@ -63,14 +61,12 @@
     "@nx/vite": "catalog:",
     "@pinia/testing": "catalog:",
     "@playwright/test": "catalog:",
-    "@prettier/plugin-oxc": "catalog:",
     "@sentry/vite-plugin": "catalog:",
     "@storybook/addon-docs": "catalog:",
     "@storybook/addon-mcp": "catalog:",
     "@storybook/vue3": "catalog:",
     "@storybook/vue3-vite": "catalog:",
     "@tailwindcss/vite": "catalog:",
-    "@trivago/prettier-plugin-sort-imports": "catalog:",
     "@types/fs-extra": "catalog:",
     "@types/jsdom": "catalog:",
     "@types/node": "catalog:",
@@ -101,11 +97,11 @@
     "markdown-table": "catalog:",
     "mixpanel-browser": "catalog:",
     "nx": "catalog:",
+    "oxfmt": "catalog:",
     "oxlint": "catalog:",
     "oxlint-tsgolint": "catalog:",
     "picocolors": "catalog:",
     "postcss-html": "catalog:",
-    "prettier": "catalog:",
     "pretty-bytes": "catalog:",
     "rollup-plugin-visualizer": "catalog:",
     "storybook": "catalog:",
@@ -173,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/design-system/src/css/style.css b/packages/design-system/src/css/style.css
index 1fdf23af1..647b3756c 100644
--- a/packages/design-system/src/css/style.css
+++ b/packages/design-system/src/css/style.css
@@ -584,8 +584,6 @@ body {
   height: 100vh;
   margin: 0;
   overflow: hidden;
-  background: var(--bg-color) var(--bg-img);
-  color: var(--fg-color);
   min-height: -webkit-fill-available;
   max-height: -webkit-fill-available;
   min-width: -webkit-fill-available;
diff --git a/packages/design-system/src/icons/nodeSlot2.svg b/packages/design-system/src/icons/nodeSlot2.svg
deleted file mode 100644
index cc1280570..000000000
--- a/packages/design-system/src/icons/nodeSlot2.svg
+++ /dev/null
@@ -1,19 +0,0 @@
-<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <clipPath id="hollow">
-      <path
-    d="M -50 50
-       A 100 100, 0, 0, 1, 150 50
-       A 100 100, 0, 0, 1, -50 50
-       M 30 50
-       A 20 20, 0, 0, 0, 70 50
-       A 20 20, 0, 0, 0, 30 50"/>
-    </clipPath>
-  </defs>
-  <g clip-path="var(--shape)" stroke-width="4">
-    <path d="M 50 0 A 50 50, 0, 0, 1, 50 100" fill="var(--type1, red)"/>
-    <path d="M 50 100 A 50 50, 0, 0, 1, 50 0" fill="var(--type2, blue)"/>
-    <path d="M50 0L50 100" stroke="var(--inner-stroke, black)"/>
-    <path d="M50 2A48 48 0 0 1 50 98A48 48 0 0 1 50 2" fill="transparent" stroke="var(--outer-stroke, transparent)"/>
-  </g>
-</svg>
diff --git a/packages/design-system/src/icons/nodeSlot3.svg b/packages/design-system/src/icons/nodeSlot3.svg
deleted file mode 100644
index fc94a178b..000000000
--- a/packages/design-system/src/icons/nodeSlot3.svg
+++ /dev/null
@@ -1,20 +0,0 @@
-<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <clipPath id="hollow">
-        <path
-    d="M-50 50
-       A100 100 0 0 1 150 50
-       A100 100 0 0 1 -50 50
-       M30 50
-       A20 20 0 0 0 70 50
-       A20 20 0 0 0 30 50"/>
-    </clipPath>
-  </defs>
-  <g clip-path="var(--shape)" stroke-width="4">
-    <path d="M50 0A50 50 0 0 1 93 75L50 50" fill="var(--type1, red)"/>
-    <path d="M93 75A50 50 0 0 1 7 75L50 50" fill="var(--type2, blue)"/>
-    <path d="M7 75A50 50 0 0 1 50 0L50 50" fill="var(--type3, green)"/>
-    <path d="M50 50L50 0M50 50L93 75M50 50L7 75" stroke="var(--inner-stroke, black)"/>
-    <path d="M50 2A48 48 0 0 1 50 98A48 48 0 0 1 50 2" fill="transparent" stroke="var(--outer-stroke, transparent)"/>
-  </g>
-</svg>
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 8011e1c10..eced908c6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -48,9 +48,6 @@ catalogs:
     '@playwright/test':
       specifier: ^1.57.0
       version: 1.57.0
-    '@prettier/plugin-oxc':
-      specifier: ^0.1.3
-      version: 0.1.3
     '@primeuix/forms':
       specifier: 0.0.2
       version: 0.0.2
@@ -96,9 +93,6 @@ catalogs:
     '@tailwindcss/vite':
       specifier: ^4.1.12
       version: 4.1.12
-    '@trivago/prettier-plugin-sort-imports':
-      specifier: ^5.2.0
-      version: 5.2.2
     '@types/fs-extra':
       specifier: ^11.0.4
       version: 11.0.4
@@ -192,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
@@ -207,6 +204,9 @@ catalogs:
     nx:
       specifier: 22.2.6
       version: 22.2.6
+    oxfmt:
+      specifier: ^0.26.0
+      version: 0.26.0
     oxlint:
       specifier: ^1.33.0
       version: 1.33.0
@@ -222,9 +222,6 @@ catalogs:
     postcss-html:
       specifier: ^1.8.0
       version: 1.8.0
-    prettier:
-      specifier: ^3.7.4
-      version: 3.7.4
     pretty-bytes:
       specifier: ^7.1.0
       version: 7.1.0
@@ -455,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
@@ -540,9 +540,6 @@ importers:
       '@playwright/test':
         specifier: 'catalog:'
         version: 1.57.0
-      '@prettier/plugin-oxc':
-        specifier: 'catalog:'
-        version: 0.1.3
       '@sentry/vite-plugin':
         specifier: 'catalog:'
         version: 4.6.0
@@ -561,9 +558,6 @@ importers:
       '@tailwindcss/vite':
         specifier: 'catalog:'
         version: 4.1.12(vite@8.0.0-beta.8(@types/node@24.10.4)(esbuild@0.27.1)(jiti@2.6.1)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.2))
-      '@trivago/prettier-plugin-sort-imports':
-        specifier: 'catalog:'
-        version: 5.2.2(@vue/compiler-sfc@3.5.25)(prettier@3.7.4)
       '@types/fs-extra':
         specifier: 'catalog:'
         version: 11.0.4
@@ -654,6 +648,9 @@ importers:
       nx:
         specifier: 'catalog:'
         version: 22.2.6
+      oxfmt:
+        specifier: 'catalog:'
+        version: 0.26.0
       oxlint:
         specifier: 'catalog:'
         version: 1.33.0(oxlint-tsgolint@0.9.1)
@@ -666,9 +663,6 @@ importers:
       postcss-html:
         specifier: 'catalog:'
         version: 1.8.0
-      prettier:
-        specifier: 'catalog:'
-        version: 3.7.4
       pretty-bytes:
         specifier: 'catalog:'
         version: 7.1.0
@@ -2517,95 +2511,6 @@ packages:
   '@one-ini/wasm@0.1.1':
     resolution: {integrity: sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==}
 
-  '@oxc-parser/binding-android-arm64@0.99.0':
-    resolution: {integrity: sha512-V4jhmKXgQQdRnm73F+r3ZY4pUEsijQeSraFeaCGng7abSNJGs76X6l82wHnmjLGFAeY00LWtjcELs7ZmbJ9+lA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [android]
-
-  '@oxc-parser/binding-darwin-arm64@0.99.0':
-    resolution: {integrity: sha512-Rp41nf9zD5FyLZciS9l1GfK8PhYqrD5kEGxyTOA2esTLeAy37rZxetG2E3xteEolAkeb2WDkVrlxPtibeAncMg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@oxc-parser/binding-darwin-x64@0.99.0':
-    resolution: {integrity: sha512-WVonp40fPPxo5Gs0POTI57iEFv485TvNKOHMwZRhigwZRhZY2accEAkYIhei9eswF4HN5B44Wybkz7Gd1Qr/5Q==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [darwin]
-
-  '@oxc-parser/binding-freebsd-x64@0.99.0':
-    resolution: {integrity: sha512-H30bjOOttPmG54gAqu6+HzbLEzuNOYO2jZYrIq4At+NtLJwvNhXz28Hf5iEAFZIH/4hMpLkM4VN7uc+5UlNW3Q==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@oxc-parser/binding-linux-arm-gnueabihf@0.99.0':
-    resolution: {integrity: sha512-0Z/Th0SYqzSRDPs6tk5lQdW0i73UCupnim3dgq2oW0//UdLonV/5wIZCArfKGC7w9y4h8TxgXpgtIyD1kKzzlQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm]
-    os: [linux]
-
-  '@oxc-parser/binding-linux-arm-musleabihf@0.99.0':
-    resolution: {integrity: sha512-xo0wqNd5bpbzQVNpAIFbHk1xa+SaS/FGBABCd942SRTnrpxl6GeDj/s1BFaGcTl8MlwlKVMwOcyKrw/2Kdfquw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm]
-    os: [linux]
-
-  '@oxc-parser/binding-linux-arm64-gnu@0.99.0':
-    resolution: {integrity: sha512-u26I6LKoLTPTd4Fcpr0aoAtjnGf5/ulMllo+QUiBhupgbVCAlaj4RyXH/mvcjcsl2bVBv9E/gYJZz2JjxQWXBA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [linux]
-
-  '@oxc-parser/binding-linux-arm64-musl@0.99.0':
-    resolution: {integrity: sha512-qhftDo2D37SqCEl3ZTa367NqWSZNb1Ddp34CTmShLKFrnKdNiUn55RdokLnHtf1AL5ssaQlYDwBECX7XiBWOhw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [linux]
-
-  '@oxc-parser/binding-linux-riscv64-gnu@0.99.0':
-    resolution: {integrity: sha512-zxn/xkf519f12FKkpL5XwJipsylfSSnm36h6c1zBDTz4fbIDMGyIhHfWfwM7uUmHo9Aqw1pLxFpY39Etv398+Q==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [riscv64]
-    os: [linux]
-
-  '@oxc-parser/binding-linux-s390x-gnu@0.99.0':
-    resolution: {integrity: sha512-Y1eSDKDS5E4IVC7Oxw+NbYAKRmJPMJTIjW+9xOWwteDHkFqpocKe0USxog+Q1uhzalD9M0p9eXWEWdGQCMDBMQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [s390x]
-    os: [linux]
-
-  '@oxc-parser/binding-linux-x64-gnu@0.99.0':
-    resolution: {integrity: sha512-YVJMfk5cFWB8i2/nIrbk6n15bFkMHqWnMIWkVx7r2KwpTxHyFMfu2IpeVKo1ITDSmt5nBrGdLHD36QRlu2nDLg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [linux]
-
-  '@oxc-parser/binding-linux-x64-musl@0.99.0':
-    resolution: {integrity: sha512-2+SDPrie5f90A1b9EirtVggOgsqtsYU5raZwkDYKyS1uvJzjqHCDhG/f4TwQxHmIc5YkczdQfwvN91lwmjsKYQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [linux]
-
-  '@oxc-parser/binding-wasm32-wasi@0.99.0':
-    resolution: {integrity: sha512-DKA4j0QerUWSMADziLM5sAyM7V53Fj95CV9SjP77bPfEfT7MnvFKnneaRMqPK1cpzjAGiQF52OBUIKyk0dwOQA==}
-    engines: {node: '>=14.0.0'}
-    cpu: [wasm32]
-
-  '@oxc-parser/binding-win32-arm64-msvc@0.99.0':
-    resolution: {integrity: sha512-EaB3AvsxqdNUhh9FOoAxRZ2L4PCRwDlDb//QXItwyOJrX7XS+uGK9B1KEUV4FZ/7rDhHsWieLt5e07wl2Ti5AQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [win32]
-
-  '@oxc-parser/binding-win32-x64-msvc@0.99.0':
-    resolution: {integrity: sha512-sJN1Q8h7ggFOyDn0zsHaXbP/MklAVUvhrbq0LA46Qum686P3SZQHjbATqJn9yaVEvaSKXCshgl0vQ1gWkGgpcQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [win32]
-
   '@oxc-project/runtime@0.108.0':
     resolution: {integrity: sha512-J1cESY4anMO4i9KtCPmCfQAzAR00Uw4SWsDPFP10CIwDMugkh34UrTKByuYKuPaHy0XAk8LlJiZJq2OLMfbuIQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -2613,9 +2518,6 @@ packages:
   '@oxc-project/types@0.108.0':
     resolution: {integrity: sha512-7lf13b2IA/kZO6xgnIZA88sq3vwrxWk+2vxf6cc+omwYCRTiA5e63Beqf3fz/v8jEviChWWmFYBwzfSeyrsj7Q==}
 
-  '@oxc-project/types@0.99.0':
-    resolution: {integrity: sha512-LLDEhXB7g1m5J+woRSgfKsFPS3LhR9xRhTeIoEBm5WrkwMxn6eZ0Ld0c0K5eHB57ChZX6I3uSmmLjZ8pcjlRcw==}
-
   '@oxc-resolver/binding-android-arm-eabi@11.15.0':
     resolution: {integrity: sha512-Q+lWuFfq7whNelNJIP1dhXaVz4zO9Tu77GcQHyxDWh3MaCoO2Bisphgzmsh4ZoUe2zIchQh6OvQL99GlWHg9Tw==}
     cpu: [arm]
@@ -2716,6 +2618,46 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@oxfmt/darwin-arm64@0.26.0':
+    resolution: {integrity: sha512-AAGc+8CffkiWeVgtWf4dPfQwHEE5c/j/8NWH7VGVxxJRCZFdmWcqCXprvL2H6qZFewvDLrFbuSPRCqYCpYGaTQ==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@oxfmt/darwin-x64@0.26.0':
+    resolution: {integrity: sha512-xFx5ijCTjw577wJvFlZEMmKDnp3HSCcbYdCsLRmC5i3TZZiDe9DEYh3P46uqhzj8BkEw1Vm1ZCWdl48aEYAzvQ==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@oxfmt/linux-arm64-gnu@0.26.0':
+    resolution: {integrity: sha512-GubkQeQT5d3B/Jx/IiR7NMkSmXrCZcVI0BPh1i7mpFi8HgD1hQ/LbhiBKAMsMqs5bbugdQOgBEl8bOhe8JhW1g==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@oxfmt/linux-arm64-musl@0.26.0':
+    resolution: {integrity: sha512-OEypUwK69bFPj+aa3/LYCnlIUPgoOLu//WNcriwpnWNmt47808Ht7RJSg+MNK8a7pSZHpXJ5/E6CRK/OTwFdaQ==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@oxfmt/linux-x64-gnu@0.26.0':
+    resolution: {integrity: sha512-xO6iEW2bC6ZHyOTPmPWrg/nM6xgzyRPaS84rATy6F8d79wz69LdRdJ3l/PXlkqhi7XoxhvX4ExysA0Nf10ZZEQ==}
+    cpu: [x64]
+    os: [linux]
+
+  '@oxfmt/linux-x64-musl@0.26.0':
+    resolution: {integrity: sha512-Z3KuZFC+MIuAyFCXBHY71kCsdRq1ulbsbzTe71v+hrEv7zVBn6yzql+/AZcgfIaKzWO9OXNuz5WWLWDmVALwow==}
+    cpu: [x64]
+    os: [linux]
+
+  '@oxfmt/win32-arm64@0.26.0':
+    resolution: {integrity: sha512-3zRbqwVWK1mDhRhTknlQFpRFL9GhEB5GfU6U7wawnuEwpvi39q91kJ+SRJvJnhyPCARkjZBd1V8XnweN5IFd1g==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oxfmt/win32-x64@0.26.0':
+    resolution: {integrity: sha512-m8TfIljU22i9UEIkD+slGPifTFeaCwIUfxszN3E6ABWP1KQbtwSw9Ak0TdoikibvukF/dtbeyG3WW63jv9DnEg==}
+    cpu: [x64]
+    os: [win32]
+
   '@oxlint-tsgolint/darwin-arm64@0.9.1':
     resolution: {integrity: sha512-vk+8kChWqN+F+QUOvp4/6jDTlDCzXPgYGkxdi6EOUSOmCP1ix0uYOlIi/ytH2imXmC8YfPgLR/1BhqbsuDKuew==}
     cpu: [arm64]
@@ -2824,10 +2766,6 @@ packages:
   '@polka/url@1.0.0-next.29':
     resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
 
-  '@prettier/plugin-oxc@0.1.3':
-    resolution: {integrity: sha512-aABz3zIRilpWMekbt1FL1JVBQrQLR8L4Td2SRctECrWSsXGTNn/G1BqNSKCdbvQS1LWstAXfqcXzDki7GAAJyg==}
-    engines: {node: '>=14'}
-
   '@primeuix/forms@0.0.2':
     resolution: {integrity: sha512-DpecPQd/Qf/kav4LKCaIeGuT3AkwhJzuHCkLANTVlN/zBvo8KIj3OZHsCkm0zlIMVVnaJdtx1ULNlRQdudef+A==}
     engines: {node: '>=12.11.0'}
@@ -3571,22 +3509,6 @@ packages:
       '@tmcp/auth':
         optional: true
 
-  '@trivago/prettier-plugin-sort-imports@5.2.2':
-    resolution: {integrity: sha512-fYDQA9e6yTNmA13TLVSA+WMQRc5Bn/c0EUBditUHNfMMxN7M82c38b1kEggVE3pLpZ0FwkwJkUEKMiOi52JXFA==}
-    engines: {node: '>18.12'}
-    peerDependencies:
-      '@vue/compiler-sfc': 3.x
-      prettier: 2.x - 3.x
-      prettier-plugin-svelte: 3.x
-      svelte: 4.x || 5.x
-    peerDependenciesMeta:
-      '@vue/compiler-sfc':
-        optional: true
-      prettier-plugin-svelte:
-        optional: true
-      svelte:
-        optional: true
-
   '@tweenjs/tween.js@23.1.3':
     resolution: {integrity: sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==}
 
@@ -6039,9 +5961,6 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
-  javascript-natural-sort@0.7.1:
-    resolution: {integrity: sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==}
-
   jest-diff@30.2.0:
     resolution: {integrity: sha512-dQHFo3Pt4/NLlG5z4PxZ/3yZTZ1C7s9hveiOj+GCN+uT109NC2QgsoVZsVOAvbJ3RgKkvyLGXZV9+piDpWbm6A==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
@@ -6132,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}
@@ -6889,13 +6812,14 @@ packages:
     resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
     engines: {node: '>= 0.4'}
 
-  oxc-parser@0.99.0:
-    resolution: {integrity: sha512-MpS1lbd2vR0NZn1v0drpgu7RUFu3x9Rd0kxExObZc2+F+DIrV0BOMval/RO3BYGwssIOerII6iS8EbbpCCZQpQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-
   oxc-resolver@11.15.0:
     resolution: {integrity: sha512-Hk2J8QMYwmIO9XTCUiOH00+Xk2/+aBxRUnhrSlANDyCnLYc32R1WSIq1sU2yEdlqd53FfMpPEpnBYIKQMzliJw==}
 
+  oxfmt@0.26.0:
+    resolution: {integrity: sha512-UDD1wFNwfeorMm2ZY0xy1KRAAvJ5NjKBfbDmiMwGP7baEHTq65cYpC0aPP+BGHc8weXUbSZaK8MdGyvuRUvS4Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+
   oxlint-tsgolint@0.9.1:
     resolution: {integrity: sha512-w1lIvUDkkiAPFyo268SFGrdh1LQ3Lcs1XShES7I4X75TliQA0os5XJ5hNZ4lYsSevqcofgEtq4xq7rBumv69iQ==}
     hasBin: true
@@ -7796,6 +7720,10 @@ packages:
     resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
     engines: {node: '>=12.0.0'}
 
+  tinypool@2.0.0:
+    resolution: {integrity: sha512-/RX9RzeH2xU5ADE7n2Ykvmi9ED3FBGPAjw9u3zucrNNaEBIO0HPSYgL0NT7+3p147ojeSdaVu08F6hjpv31HJg==}
+    engines: {node: ^20.0.0 || >=22.0.0}
+
   tinyrainbow@2.0.0:
     resolution: {integrity: sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==}
     engines: {node: '>=14.0.0'}
@@ -10677,59 +10605,10 @@ snapshots:
 
   '@one-ini/wasm@0.1.1': {}
 
-  '@oxc-parser/binding-android-arm64@0.99.0':
-    optional: true
-
-  '@oxc-parser/binding-darwin-arm64@0.99.0':
-    optional: true
-
-  '@oxc-parser/binding-darwin-x64@0.99.0':
-    optional: true
-
-  '@oxc-parser/binding-freebsd-x64@0.99.0':
-    optional: true
-
-  '@oxc-parser/binding-linux-arm-gnueabihf@0.99.0':
-    optional: true
-
-  '@oxc-parser/binding-linux-arm-musleabihf@0.99.0':
-    optional: true
-
-  '@oxc-parser/binding-linux-arm64-gnu@0.99.0':
-    optional: true
-
-  '@oxc-parser/binding-linux-arm64-musl@0.99.0':
-    optional: true
-
-  '@oxc-parser/binding-linux-riscv64-gnu@0.99.0':
-    optional: true
-
-  '@oxc-parser/binding-linux-s390x-gnu@0.99.0':
-    optional: true
-
-  '@oxc-parser/binding-linux-x64-gnu@0.99.0':
-    optional: true
-
-  '@oxc-parser/binding-linux-x64-musl@0.99.0':
-    optional: true
-
-  '@oxc-parser/binding-wasm32-wasi@0.99.0':
-    dependencies:
-      '@napi-rs/wasm-runtime': 1.1.1
-    optional: true
-
-  '@oxc-parser/binding-win32-arm64-msvc@0.99.0':
-    optional: true
-
-  '@oxc-parser/binding-win32-x64-msvc@0.99.0':
-    optional: true
-
   '@oxc-project/runtime@0.108.0': {}
 
   '@oxc-project/types@0.108.0': {}
 
-  '@oxc-project/types@0.99.0': {}
-
   '@oxc-resolver/binding-android-arm-eabi@11.15.0':
     optional: true
 
@@ -10792,6 +10671,30 @@ snapshots:
   '@oxc-resolver/binding-win32-x64-msvc@11.15.0':
     optional: true
 
+  '@oxfmt/darwin-arm64@0.26.0':
+    optional: true
+
+  '@oxfmt/darwin-x64@0.26.0':
+    optional: true
+
+  '@oxfmt/linux-arm64-gnu@0.26.0':
+    optional: true
+
+  '@oxfmt/linux-arm64-musl@0.26.0':
+    optional: true
+
+  '@oxfmt/linux-x64-gnu@0.26.0':
+    optional: true
+
+  '@oxfmt/linux-x64-musl@0.26.0':
+    optional: true
+
+  '@oxfmt/win32-arm64@0.26.0':
+    optional: true
+
+  '@oxfmt/win32-x64@0.26.0':
+    optional: true
+
   '@oxlint-tsgolint/darwin-arm64@0.9.1':
     optional: true
 
@@ -10866,10 +10769,6 @@ snapshots:
 
   '@polka/url@1.0.0-next.29': {}
 
-  '@prettier/plugin-oxc@0.1.3':
-    dependencies:
-      oxc-parser: 0.99.0
-
   '@primeuix/forms@0.0.2':
     dependencies:
       '@primeuix/utils': 0.3.2
@@ -11585,20 +11484,6 @@ snapshots:
       esm-env: 1.2.2
       tmcp: 1.19.0(typescript@5.9.3)
 
-  '@trivago/prettier-plugin-sort-imports@5.2.2(@vue/compiler-sfc@3.5.25)(prettier@3.7.4)':
-    dependencies:
-      '@babel/generator': 7.28.5
-      '@babel/parser': 7.28.5
-      '@babel/traverse': 7.28.5
-      '@babel/types': 7.28.5
-      javascript-natural-sort: 0.7.1
-      lodash: 4.17.21
-      prettier: 3.7.4
-    optionalDependencies:
-      '@vue/compiler-sfc': 3.5.25
-    transitivePeerDependencies:
-      - supports-color
-
   '@tweenjs/tween.js@23.1.3': {}
 
   '@tybys/wasm-util@0.10.1':
@@ -14431,8 +14316,6 @@ snapshots:
       filelist: 1.0.4
       minimatch: 3.1.2
 
-  javascript-natural-sort@0.7.1: {}
-
   jest-diff@30.2.0:
     dependencies:
       '@jest/diff-sequences': 30.0.1
@@ -14530,6 +14413,8 @@ snapshots:
 
   json5@2.2.3: {}
 
+  jsonata@2.1.0: {}
+
   jsonc-eslint-parser@2.4.0:
     dependencies:
       acorn: 8.15.0
@@ -15531,26 +15416,6 @@ snapshots:
       safe-push-apply: 1.0.0
     optional: true
 
-  oxc-parser@0.99.0:
-    dependencies:
-      '@oxc-project/types': 0.99.0
-    optionalDependencies:
-      '@oxc-parser/binding-android-arm64': 0.99.0
-      '@oxc-parser/binding-darwin-arm64': 0.99.0
-      '@oxc-parser/binding-darwin-x64': 0.99.0
-      '@oxc-parser/binding-freebsd-x64': 0.99.0
-      '@oxc-parser/binding-linux-arm-gnueabihf': 0.99.0
-      '@oxc-parser/binding-linux-arm-musleabihf': 0.99.0
-      '@oxc-parser/binding-linux-arm64-gnu': 0.99.0
-      '@oxc-parser/binding-linux-arm64-musl': 0.99.0
-      '@oxc-parser/binding-linux-riscv64-gnu': 0.99.0
-      '@oxc-parser/binding-linux-s390x-gnu': 0.99.0
-      '@oxc-parser/binding-linux-x64-gnu': 0.99.0
-      '@oxc-parser/binding-linux-x64-musl': 0.99.0
-      '@oxc-parser/binding-wasm32-wasi': 0.99.0
-      '@oxc-parser/binding-win32-arm64-msvc': 0.99.0
-      '@oxc-parser/binding-win32-x64-msvc': 0.99.0
-
   oxc-resolver@11.15.0:
     optionalDependencies:
       '@oxc-resolver/binding-android-arm-eabi': 11.15.0
@@ -15574,6 +15439,19 @@ snapshots:
       '@oxc-resolver/binding-win32-ia32-msvc': 11.15.0
       '@oxc-resolver/binding-win32-x64-msvc': 11.15.0
 
+  oxfmt@0.26.0:
+    dependencies:
+      tinypool: 2.0.0
+    optionalDependencies:
+      '@oxfmt/darwin-arm64': 0.26.0
+      '@oxfmt/darwin-x64': 0.26.0
+      '@oxfmt/linux-arm64-gnu': 0.26.0
+      '@oxfmt/linux-arm64-musl': 0.26.0
+      '@oxfmt/linux-x64-gnu': 0.26.0
+      '@oxfmt/linux-x64-musl': 0.26.0
+      '@oxfmt/win32-arm64': 0.26.0
+      '@oxfmt/win32-x64': 0.26.0
+
   oxlint-tsgolint@0.9.1:
     optionalDependencies:
       '@oxlint-tsgolint/darwin-arm64': 0.9.1
@@ -15754,7 +15632,8 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
-  prettier@3.7.4: {}
+  prettier@3.7.4:
+    optional: true
 
   pretty-bytes@7.1.0: {}
 
@@ -16717,6 +16596,8 @@ snapshots:
       fdir: 6.5.0(picomatch@4.0.3)
       picomatch: 4.0.3
 
+  tinypool@2.0.0: {}
+
   tinyrainbow@2.0.0: {}
 
   tinyrainbow@3.0.3: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 76c515b7d..0c91ec424 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -17,7 +17,6 @@ catalog:
   '@nx/vite': 22.2.6
   '@pinia/testing': ^1.0.3
   '@playwright/test': ^1.57.0
-  '@prettier/plugin-oxc': ^0.1.3
   '@primeuix/forms': 0.0.2
   '@primeuix/styled': 0.3.2
   '@primeuix/utils': ^0.3.2
@@ -33,7 +32,6 @@ catalog:
   '@storybook/vue3': ^10.1.9
   '@storybook/vue3-vite': ^10.1.9
   '@tailwindcss/vite': ^4.1.12
-  '@trivago/prettier-plugin-sort-imports': ^5.2.0
   '@types/fs-extra': ^11.0.4
   '@types/jsdom': ^21.1.7
   '@types/node': ^24.1.0
@@ -64,18 +62,19 @@ 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
   markdown-table: ^3.0.4
   mixpanel-browser: ^2.71.0
   nx: 22.2.6
+  oxfmt: ^0.26.0
   oxlint: ^1.33.0
   oxlint-tsgolint: ^0.9.1
   picocolors: ^1.1.1
   pinia: ^3.0.4
   postcss-html: ^1.8.0
-  prettier: ^3.7.4
   pretty-bytes: ^7.1.0
   primeicons: ^7.0.0
   primevue: ^4.2.5
diff --git a/src/App.vue b/src/App.vue
index 6b7c56be0..c3a879b17 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,6 +9,7 @@
 </template>
 
 <script setup lang="ts">
+import { captureException } from '@sentry/vue'
 import { useEventListener } from '@vueuse/core'
 import BlockUI from 'primevue/blockui'
 import ProgressSpinner from 'primevue/progressspinner'
@@ -16,10 +17,6 @@ import { computed, onMounted } from 'vue'
 
 import GlobalDialog from '@/components/dialog/GlobalDialog.vue'
 import config from '@/config'
-import { t } from '@/i18n'
-import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
-import { app } from '@/scripts/app'
-import { useDialogService } from '@/services/dialogService'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
 
@@ -27,8 +24,6 @@ import { electronAPI, isElectron } from './utils/envUtil'
 
 const workspaceStore = useWorkspaceStore()
 const conflictDetection = useConflictDetection()
-const workflowStore = useWorkflowStore()
-const dialogService = useDialogService()
 const isLoading = computed<boolean>(() => workspaceStore.spinner)
 const handleKey = (e: KeyboardEvent) => {
   workspaceStore.shiftDown = e.shiftKey
@@ -54,23 +49,15 @@ onMounted(() => {
     document.addEventListener('contextmenu', showContextMenu)
   }
 
-  // Handle Vite preload errors (e.g., when assets are deleted after deployment)
-  window.addEventListener('vite:preloadError', async (_event) => {
-    // Auto-reload if app is not ready or there are no unsaved changes
-    if (!app.vueAppReady || !workflowStore.activeWorkflow?.isModified) {
-      window.location.reload()
+  window.addEventListener('vite:preloadError', (event) => {
+    event.preventDefault()
+    // eslint-disable-next-line no-undef
+    if (__DISTRIBUTION__ === 'cloud') {
+      captureException(event.payload, {
+        tags: { error_type: 'vite_preload_error' }
+      })
     } else {
-      // Show confirmation dialog if there are unsaved changes
-      await dialogService
-        .confirm({
-          title: t('g.vitePreloadErrorTitle'),
-          message: t('g.vitePreloadErrorMessage')
-        })
-        .then((confirmed) => {
-          if (confirmed) {
-            window.location.reload()
-          }
-        })
+      console.error('[vite:preloadError]', event.payload)
     }
   })
 
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 b4d11efea..8d4f3673d 100644
--- a/src/components/TopMenuSection.test.ts
+++ b/src/components/TopMenuSection.test.ts
@@ -1,12 +1,21 @@
 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 } from 'vue'
+import { computed, nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import TopMenuSection from '@/components/TopMenuSection.vue'
 import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
 import LoginButton from '@/components/topbar/LoginButton.vue'
+import type {
+  JobListItem,
+  JobStatus
+} from '@/platform/remote/comfyui/jobs/jobTypes'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useCommandStore } from '@/stores/commandStore'
+import { TaskItemImpl, useQueueStore } from '@/stores/queueStore'
+import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 import { isElectron } from '@/utils/envUtil'
 
 const mockData = vi.hoisted(() => ({ isLoggedIn: false }))
@@ -27,7 +36,7 @@ vi.mock('@/stores/firebaseAuthStore', () => ({
   }))
 }))
 
-function createWrapper() {
+function createWrapper(pinia = createTestingPinia({ createSpy: vi.fn })) {
   const i18n = createI18n({
     legacy: false,
     locale: 'en',
@@ -36,7 +45,9 @@ function createWrapper() {
         sideToolbar: {
           queueProgressOverlay: {
             viewJobHistory: 'View job history',
-            expandCollapsedQueue: 'Expand collapsed queue'
+            expandCollapsedQueue: 'Expand collapsed queue',
+            activeJobsShort: '{count} active | {count} active',
+            clearQueueTooltip: 'Clear queue'
           }
         }
       }
@@ -45,12 +56,17 @@ function createWrapper() {
 
   return mount(TopMenuSection, {
     global: {
-      plugins: [createTestingPinia({ createSpy: vi.fn }), i18n],
+      plugins: [pinia, i18n],
       stubs: {
         SubgraphBreadcrumb: true,
         QueueProgressOverlay: true,
         CurrentUserButton: true,
-        LoginButton: true
+        LoginButton: true,
+        ContextMenu: {
+          name: 'ContextMenu',
+          props: ['model'],
+          template: '<div />'
+        }
       },
       directives: {
         tooltip: () => {}
@@ -59,6 +75,19 @@ function createWrapper() {
   })
 }
 
+function createJob(id: string, status: JobStatus): JobListItem {
+  return {
+    id,
+    status,
+    create_time: 0,
+    priority: 0
+  }
+}
+
+function createTask(id: string, status: JobStatus): TaskItemImpl {
+  return new TaskItemImpl(createJob(id, status))
+}
+
 describe('TopMenuSection', () => {
   beforeEach(() => {
     vi.resetAllMocks()
@@ -100,4 +129,104 @@ describe('TopMenuSection', () => {
       })
     })
   })
+
+  it('shows the active jobs label with the current count', async () => {
+    const wrapper = createWrapper()
+    const queueStore = useQueueStore()
+    queueStore.pendingTasks = [createTask('pending-1', 'pending')]
+    queueStore.runningTasks = [
+      createTask('running-1', 'in_progress'),
+      createTask('running-2', 'in_progress')
+    ]
+
+    await nextTick()
+
+    const queueButton = wrapper.find('[data-testid="queue-overlay-toggle"]')
+    expect(queueButton.text()).toContain('3 active')
+  })
+
+  it('hides queue progress overlay when QPO V2 is enabled', async () => {
+    const pinia = createTestingPinia({ createSpy: vi.fn })
+    const settingStore = useSettingStore(pinia)
+    vi.mocked(settingStore.get).mockImplementation((key) =>
+      key === 'Comfy.Queue.QPOV2' ? true : undefined
+    )
+    const wrapper = createWrapper(pinia)
+
+    await nextTick()
+
+    expect(wrapper.find('[data-testid="queue-overlay-toggle"]').exists()).toBe(
+      true
+    )
+    expect(
+      wrapper.findComponent({ name: 'QueueProgressOverlay' }).exists()
+    ).toBe(false)
+  })
+
+  it('toggles the queue progress overlay when QPO V2 is disabled', async () => {
+    const pinia = createTestingPinia({ createSpy: vi.fn, stubActions: false })
+    const settingStore = useSettingStore(pinia)
+    vi.mocked(settingStore.get).mockImplementation((key) =>
+      key === 'Comfy.Queue.QPOV2' ? false : undefined
+    )
+    const wrapper = createWrapper(pinia)
+    const commandStore = useCommandStore(pinia)
+
+    await wrapper.find('[data-testid="queue-overlay-toggle"]').trigger('click')
+
+    expect(commandStore.execute).toHaveBeenCalledWith(
+      'Comfy.Queue.ToggleOverlay'
+    )
+  })
+
+  it('opens the assets sidebar tab when QPO V2 is enabled', async () => {
+    const pinia = createTestingPinia({ createSpy: vi.fn, stubActions: false })
+    const settingStore = useSettingStore(pinia)
+    vi.mocked(settingStore.get).mockImplementation((key) =>
+      key === 'Comfy.Queue.QPOV2' ? true : undefined
+    )
+    const wrapper = createWrapper(pinia)
+    const sidebarTabStore = useSidebarTabStore(pinia)
+
+    await wrapper.find('[data-testid="queue-overlay-toggle"]').trigger('click')
+
+    expect(sidebarTabStore.activeSidebarTabId).toBe('assets')
+  })
+
+  it('toggles the assets sidebar tab when QPO V2 is enabled', async () => {
+    const pinia = createTestingPinia({ createSpy: vi.fn, stubActions: false })
+    const settingStore = useSettingStore(pinia)
+    vi.mocked(settingStore.get).mockImplementation((key) =>
+      key === 'Comfy.Queue.QPOV2' ? true : undefined
+    )
+    const wrapper = createWrapper(pinia)
+    const sidebarTabStore = useSidebarTabStore(pinia)
+    const toggleButton = wrapper.find('[data-testid="queue-overlay-toggle"]')
+
+    await toggleButton.trigger('click')
+    expect(sidebarTabStore.activeSidebarTabId).toBe('assets')
+
+    await toggleButton.trigger('click')
+    expect(sidebarTabStore.activeSidebarTabId).toBe(null)
+  })
+
+  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 28f2411ea..05149589c 100644
--- a/src/components/TopMenuSection.vue
+++ b/src/components/TopMenuSection.vue
@@ -44,21 +44,31 @@
           <Button
             v-tooltip.bottom="queueHistoryTooltipConfig"
             type="destructive"
-            size="icon"
-            :aria-pressed="isQueueOverlayExpanded"
-            :aria-label="
-              t('sideToolbar.queueProgressOverlay.expandCollapsedQueue')
+            size="md"
+            :aria-pressed="
+              isQueuePanelV2Enabled
+                ? activeSidebarTabId === 'assets'
+                : isQueueProgressOverlayEnabled
+                  ? isQueueOverlayExpanded
+                  : undefined
             "
+            class="px-3"
+            data-testid="queue-overlay-toggle"
             @click="toggleQueueOverlay"
+            @contextmenu.stop.prevent="showQueueContextMenu"
           >
-            <i class="icon-[lucide--history] size-4" />
-            <span
-              v-if="queuedCount > 0"
-              class="absolute -top-1 -right-1 min-w-[16px] rounded-full bg-primary-background py-0.25 text-[10px] font-medium leading-[14px] text-base-foreground"
-            >
-              {{ queuedCount }}
+            <span class="text-sm font-normal tabular-nums">
+              {{ activeJobsLabel }}
+            </span>
+            <span class="sr-only">
+              {{
+                isQueuePanelV2Enabled
+                  ? t('sideToolbar.queueProgressOverlay.viewJobHistory')
+                  : t('sideToolbar.queueProgressOverlay.expandCollapsedQueue')
+              }}
             </span>
           </Button>
+          <ContextMenu ref="queueContextMenu" :model="queueContextMenuItems" />
           <CurrentUserButton
             v-if="isLoggedIn && !isIntegratedTabBar"
             class="shrink-0"
@@ -77,6 +87,7 @@
         </div>
       </div>
       <QueueProgressOverlay
+        v-if="isQueueProgressOverlayEnabled"
         v-model:expanded="isQueueOverlayExpanded"
         :menu-hovered="isTopMenuHovered"
       />
@@ -86,6 +97,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'
 
@@ -103,8 +116,10 @@ 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 { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { isElectron } from '@/utils/envUtil'
 import { useConflictAcknowledgment } from '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
@@ -117,27 +132,56 @@ const rightSidePanelStore = useRightSidePanelStore()
 const managerState = useManagerState()
 const { isLoggedIn } = useCurrentUser()
 const isDesktop = isElectron()
-const { t } = useI18n()
+const { t, n } = useI18n()
 const { toastErrorHandler } = useErrorHandling()
 const commandStore = useCommandStore()
 const queueStore = useQueueStore()
+const executionStore = useExecutionStore()
 const queueUIStore = useQueueUIStore()
+const sidebarTabStore = useSidebarTabStore()
+const { activeJobsCount } = storeToRefs(queueStore)
 const { isOverlayExpanded: isQueueOverlayExpanded } = storeToRefs(queueUIStore)
+const { activeSidebarTabId } = storeToRefs(sidebarTabStore)
 const releaseStore = useReleaseStore()
 const { shouldShowRedDot: showReleaseRedDot } = storeToRefs(releaseStore)
 const { shouldShowRedDot: shouldShowConflictRedDot } =
   useConflictAcknowledgment()
 const isTopMenuHovered = ref(false)
-const queuedCount = computed(() => queueStore.pendingTasks.length)
+const activeJobsLabel = computed(() => {
+  const count = activeJobsCount.value
+  return t(
+    'sideToolbar.queueProgressOverlay.activeJobsShort',
+    { count: n(count) },
+    count
+  )
+})
 const isIntegratedTabBar = computed(
   () => settingStore.get('Comfy.UI.TabBarLayout') === 'Integrated'
 )
+const isQueuePanelV2Enabled = computed(() =>
+  settingStore.get('Comfy.Queue.QPOV2')
+)
+const isQueueProgressOverlayEnabled = computed(
+  () => !isQueuePanelV2Enabled.value
+)
 const queueHistoryTooltipConfig = computed(() =>
   buildTooltipConfig(t('sideToolbar.queueProgressOverlay.viewJobHistory'))
 )
 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 => {
@@ -161,9 +205,26 @@ onMounted(() => {
 })
 
 const toggleQueueOverlay = () => {
+  if (isQueuePanelV2Enabled.value) {
+    sidebarTabStore.toggleSidebarTab('assets')
+    return
+  }
   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/EditableText.test.ts b/src/components/common/EditableText.test.ts
index 2d31123b9..df1ea5152 100644
--- a/src/components/common/EditableText.test.ts
+++ b/src/components/common/EditableText.test.ts
@@ -51,7 +51,7 @@ describe('EditableText', () => {
       isEditing: true
     })
     await wrapper.findComponent(InputText).setValue('New Text')
-    await wrapper.findComponent(InputText).trigger('keyup.enter')
+    await wrapper.findComponent(InputText).trigger('keydown.enter')
     // Blur event should have been triggered
     expect(wrapper.findComponent(InputText).element).not.toBe(
       document.activeElement
@@ -79,7 +79,7 @@ describe('EditableText', () => {
     await wrapper.findComponent(InputText).setValue('Modified Text')
 
     // Press escape
-    await wrapper.findComponent(InputText).trigger('keyup.escape')
+    await wrapper.findComponent(InputText).trigger('keydown.escape')
 
     // Should emit cancel event
     expect(wrapper.emitted('cancel')).toBeTruthy()
@@ -103,7 +103,7 @@ describe('EditableText', () => {
     await wrapper.findComponent(InputText).setValue('Modified Text')
 
     // Press escape (which triggers blur internally)
-    await wrapper.findComponent(InputText).trigger('keyup.escape')
+    await wrapper.findComponent(InputText).trigger('keydown.escape')
 
     // Manually trigger blur to simulate the blur that happens after escape
     await wrapper.findComponent(InputText).trigger('blur')
@@ -120,7 +120,7 @@ describe('EditableText', () => {
       isEditing: true
     })
     await enterWrapper.findComponent(InputText).setValue('Saved Text')
-    await enterWrapper.findComponent(InputText).trigger('keyup.enter')
+    await enterWrapper.findComponent(InputText).trigger('keydown.enter')
     // Trigger blur that happens after enter
     await enterWrapper.findComponent(InputText).trigger('blur')
     expect(enterWrapper.emitted('edit')).toBeTruthy()
@@ -133,7 +133,7 @@ describe('EditableText', () => {
       isEditing: true
     })
     await escapeWrapper.findComponent(InputText).setValue('Cancelled Text')
-    await escapeWrapper.findComponent(InputText).trigger('keyup.escape')
+    await escapeWrapper.findComponent(InputText).trigger('keydown.escape')
     expect(escapeWrapper.emitted('cancel')).toBeTruthy()
     expect(escapeWrapper.emitted('edit')).toBeFalsy()
   })
diff --git a/src/components/common/EditableText.vue b/src/components/common/EditableText.vue
index 322d332a4..440935fb9 100644
--- a/src/components/common/EditableText.vue
+++ b/src/components/common/EditableText.vue
@@ -3,7 +3,7 @@
     <span v-if="!isEditing">
       {{ modelValue }}
     </span>
-    <!-- Avoid double triggering finishEditing event when keyup.enter is triggered -->
+    <!-- Avoid double triggering finishEditing event when keydown.enter is triggered -->
     <InputText
       v-else
       ref="inputRef"
@@ -18,8 +18,8 @@
           ...inputAttrs
         }
       }"
-      @keyup.enter.capture.stop="blurInputElement"
-      @keyup.escape.stop="cancelEditing"
+      @keydown.enter.capture.stop="blurInputElement"
+      @keydown.escape.capture.stop="cancelEditing"
       @click.stop
       @contextmenu.stop
       @pointerdown.stop.capture
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/StatusBadge.stories.ts b/src/components/common/StatusBadge.stories.ts
new file mode 100644
index 000000000..39ef6253c
--- /dev/null
+++ b/src/components/common/StatusBadge.stories.ts
@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import StatusBadge from './StatusBadge.vue'
+
+const meta = {
+  title: 'Common/StatusBadge',
+  component: StatusBadge,
+  tags: ['autodocs'],
+  argTypes: {
+    label: { control: 'text' },
+    severity: {
+      control: 'select',
+      options: ['default', 'secondary', 'warn', 'danger', 'contrast']
+    },
+    variant: {
+      control: 'select',
+      options: ['label', 'dot', 'circle']
+    }
+  },
+  args: {
+    label: 'Status',
+    severity: 'default'
+  }
+} satisfies Meta<typeof StatusBadge>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const Failed: Story = {
+  args: {
+    label: 'Failed',
+    severity: 'danger'
+  }
+}
+
+export const Finished: Story = {
+  args: {
+    label: 'Finished',
+    severity: 'contrast'
+  }
+}
+
+export const Dot: Story = {
+  args: {
+    label: undefined,
+    variant: 'dot',
+    severity: 'danger'
+  }
+}
+
+export const Circle: Story = {
+  args: {
+    label: '3',
+    variant: 'circle'
+  }
+}
+
+export const AllSeverities: Story = {
+  render: () => ({
+    components: { StatusBadge },
+    template: `
+      <div class="flex items-center gap-2">
+        <StatusBadge label="Default" severity="default" />
+        <StatusBadge label="Secondary" severity="secondary" />
+        <StatusBadge label="Warn" severity="warn" />
+        <StatusBadge label="Danger" severity="danger" />
+        <StatusBadge label="Contrast" severity="contrast" />
+      </div>
+    `
+  })
+}
+
+export const AllVariants: Story = {
+  render: () => ({
+    components: { StatusBadge },
+    template: `
+      <div class="flex items-center gap-4">
+        <div class="flex flex-col items-center gap-1">
+          <StatusBadge label="Label" variant="label" />
+          <span class="text-xs text-muted">label</span>
+        </div>
+        <div class="flex flex-col items-center gap-1">
+          <StatusBadge variant="dot" severity="danger" />
+          <span class="text-xs text-muted">dot</span>
+        </div>
+        <div class="flex flex-col items-center gap-1">
+          <StatusBadge label="5" variant="circle" />
+          <span class="text-xs text-muted">circle</span>
+        </div>
+      </div>
+    `
+  })
+}
diff --git a/src/components/common/StatusBadge.vue b/src/components/common/StatusBadge.vue
index 46ef7ac79..a29cd966d 100644
--- a/src/components/common/StatusBadge.vue
+++ b/src/components/common/StatusBadge.vue
@@ -1,30 +1,27 @@
 <script setup lang="ts">
-type Severity = 'default' | 'secondary' | 'warn' | 'danger' | 'contrast'
+import { statusBadgeVariants } from './statusBadge.variants'
+import type { StatusBadgeVariants } from './statusBadge.variants'
 
-const { label, severity = 'default' } = defineProps<{
-  label: string
-  severity?: Severity
+const {
+  label,
+  severity = 'default',
+  variant
+} = defineProps<{
+  label?: string | number
+  severity?: StatusBadgeVariants['severity']
+  variant?: StatusBadgeVariants['variant']
 }>()
-
-function badgeClasses(sev: Severity): string {
-  const baseClasses =
-    'inline-flex h-3.5 items-center justify-center rounded-full px-1 text-xxxs font-semibold uppercase'
-
-  switch (sev) {
-    case 'danger':
-      return `${baseClasses} bg-destructive-background text-white`
-    case 'contrast':
-      return `${baseClasses} bg-base-foreground text-base-background`
-    case 'warn':
-      return `${baseClasses} bg-warning-background text-base-background`
-    case 'secondary':
-      return `${baseClasses} bg-secondary-background text-base-foreground`
-    default:
-      return `${baseClasses} bg-primary-background text-base-foreground`
-  }
-}
 </script>
 
 <template>
-  <span :class="badgeClasses(severity)">{{ label }}</span>
+  <span
+    :class="
+      statusBadgeVariants({
+        severity,
+        variant: variant ?? (label == null ? 'dot' : 'label')
+      })
+    "
+  >
+    {{ label }}
+  </span>
 </template>
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/VirtualGrid.vue b/src/components/common/VirtualGrid.vue
index 134778778..fb6b4374c 100644
--- a/src/components/common/VirtualGrid.vue
+++ b/src/components/common/VirtualGrid.vue
@@ -1,16 +1,20 @@
 <template>
-  <div ref="container" class="scroll-container">
-    <div :style="{ height: `${(state.start / cols) * itemHeight}px` }" />
-    <div :style="gridStyle">
-      <div v-for="item in renderedItems" :key="item.key" data-virtual-grid-item>
+  <div
+    ref="container"
+    class="h-full overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-(--dialog-surface)"
+  >
+    <div :style="topSpacerStyle" />
+    <div :style="mergedGridStyle">
+      <div
+        v-for="item in renderedItems"
+        :key="item.key"
+        class="transition-[width] duration-150 ease-out"
+        data-virtual-grid-item
+      >
         <slot name="item" :item="item" />
       </div>
     </div>
-    <div
-      :style="{
-        height: `${((items.length - state.end) / cols) * itemHeight}px`
-      }"
-    />
+    <div :style="bottomSpacerStyle" />
   </div>
 </template>
 
@@ -28,19 +32,22 @@ type GridState = {
 
 const {
   items,
+  gridStyle,
   bufferRows = 1,
   scrollThrottle = 64,
   resizeDebounce = 64,
   defaultItemHeight = 200,
-  defaultItemWidth = 200
+  defaultItemWidth = 200,
+  maxColumns = Infinity
 } = defineProps<{
   items: (T & { key: string })[]
-  gridStyle: Partial<CSSProperties>
+  gridStyle: CSSProperties
   bufferRows?: number
   scrollThrottle?: number
   resizeDebounce?: number
   defaultItemHeight?: number
   defaultItemWidth?: number
+  maxColumns?: number
 }>()
 
 const emit = defineEmits<{
@@ -59,7 +66,18 @@ const { y: scrollY } = useScroll(container, {
   eventListenerOptions: { passive: true }
 })
 
-const cols = computed(() => Math.floor(width.value / itemWidth.value) || 1)
+const cols = computed(() =>
+  Math.min(Math.floor(width.value / itemWidth.value) || 1, maxColumns)
+)
+
+const mergedGridStyle = computed<CSSProperties>(() => {
+  if (maxColumns === Infinity) return gridStyle
+  return {
+    ...gridStyle,
+    gridTemplateColumns: `repeat(${maxColumns}, minmax(0, 1fr))`
+  }
+})
+
 const viewRows = computed(() => Math.ceil(height.value / itemHeight.value))
 const offsetRows = computed(() => Math.floor(scrollY.value / itemHeight.value))
 const isValidGrid = computed(() => height.value && width.value && items?.length)
@@ -83,6 +101,16 @@ const renderedItems = computed(() =>
   isValidGrid.value ? items.slice(state.value.start, state.value.end) : []
 )
 
+function rowsToHeight(rows: number): string {
+  return `${(rows / cols.value) * itemHeight.value}px`
+}
+const topSpacerStyle = computed<CSSProperties>(() => ({
+  height: rowsToHeight(state.value.start)
+}))
+const bottomSpacerStyle = computed<CSSProperties>(() => ({
+  height: rowsToHeight(items.length - state.value.end)
+}))
+
 whenever(
   () => state.value.isNearEnd,
   () => {
@@ -109,15 +137,6 @@ const onResize = debounce(updateItemSize, resizeDebounce)
 watch([width, height], onResize, { flush: 'post' })
 whenever(() => items, updateItemSize, { flush: 'post' })
 onBeforeUnmount(() => {
-  onResize.cancel() // Clear pending debounced calls
+  onResize.cancel()
 })
 </script>
-
-<style scoped>
-.scroll-container {
-  height: 100%;
-  overflow-y: auto;
-  scrollbar-width: thin;
-  scrollbar-color: var(--dialog-surface) transparent;
-}
-</style>
diff --git a/src/components/common/WorkspaceProfilePic.vue b/src/components/common/WorkspaceProfilePic.vue
new file mode 100644
index 000000000..bc147a61c
--- /dev/null
+++ b/src/components/common/WorkspaceProfilePic.vue
@@ -0,0 +1,43 @@
+<template>
+  <div
+    class="flex size-8 items-center justify-center rounded-md text-base font-semibold text-white"
+    :style="{
+      background: gradient,
+      textShadow: '0 1px 2px rgba(0, 0, 0, 0.2)'
+    }"
+  >
+    {{ letter }}
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const { workspaceName } = defineProps<{
+  workspaceName: string
+}>()
+
+const letter = computed(() => workspaceName?.charAt(0)?.toUpperCase() ?? '?')
+
+const gradient = computed(() => {
+  const seed = letter.value.charCodeAt(0)
+
+  function mulberry32(a: number) {
+    return function () {
+      let t = (a += 0x6d2b79f5)
+      t = Math.imul(t ^ (t >>> 15), t | 1)
+      t ^= t + Math.imul(t ^ (t >>> 7), t | 61)
+      return ((t ^ (t >>> 14)) >>> 0) / 4294967296
+    }
+  }
+
+  const rand = mulberry32(seed)
+
+  const hue1 = Math.floor(rand() * 360)
+  const hue2 = (hue1 + 40 + Math.floor(rand() * 80)) % 360
+  const sat = 65 + Math.floor(rand() * 20)
+  const light = 55 + Math.floor(rand() * 15)
+
+  return `linear-gradient(135deg, hsl(${hue1}, ${sat}%, ${light}%), hsl(${hue2}, ${sat}%, ${light}%))`
+})
+</script>
diff --git a/src/components/common/statusBadge.variants.ts b/src/components/common/statusBadge.variants.ts
new file mode 100644
index 000000000..479a0dda8
--- /dev/null
+++ b/src/components/common/statusBadge.variants.ts
@@ -0,0 +1,26 @@
+import type { VariantProps } from 'cva'
+import { cva } from 'cva'
+
+export const statusBadgeVariants = cva({
+  base: 'inline-flex items-center justify-center rounded-full',
+  variants: {
+    severity: {
+      default: 'bg-primary-background text-base-foreground',
+      secondary: 'bg-secondary-background text-base-foreground',
+      warn: 'bg-warning-background text-base-background',
+      danger: 'bg-destructive-background text-white',
+      contrast: 'bg-base-foreground text-base-background'
+    },
+    variant: {
+      label: 'h-3.5 px-1 text-xxxs font-semibold uppercase',
+      dot: 'size-2',
+      circle: 'size-3.5 text-xxxs font-semibold'
+    }
+  },
+  defaultVariants: {
+    severity: 'default',
+    variant: 'label'
+  }
+})
+
+export type StatusBadgeVariants = VariantProps<typeof statusBadgeVariants>
diff --git a/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue b/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
index aeb98971b..0276435f1 100644
--- a/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
+++ b/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
@@ -3,17 +3,14 @@
     :content-title="$t('templateWorkflows.title', 'Workflow Templates')"
     class="workflow-template-selector-dialog"
   >
+    <template #leftPanelHeaderTitle>
+      <i class="icon-[comfy--template]" />
+      <h2 class="text-neutral text-base">
+        {{ $t('sideToolbar.templates', 'Templates') }}
+      </h2>
+    </template>
     <template #leftPanel>
-      <LeftSidePanel v-model="selectedNavItem" :nav-items="navItems">
-        <template #header-icon>
-          <i class="icon-[comfy--template]" />
-        </template>
-        <template #header-title>
-          <span class="text-neutral text-base">{{
-            $t('sideToolbar.templates', 'Templates')
-          }}</span>
-        </template>
-      </LeftSidePanel>
+      <LeftSidePanel v-model="selectedNavItem" :nav-items="navItems" />
     </template>
 
     <template #header>
diff --git a/src/components/dialog/GlobalDialog.vue b/src/components/dialog/GlobalDialog.vue
index afc056d61..aede76907 100644
--- a/src/components/dialog/GlobalDialog.vue
+++ b/src/components/dialog/GlobalDialog.vue
@@ -4,9 +4,14 @@
     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"
+    :pt="getDialogPt(item)"
     :aria-labelledby="item.key"
   >
     <template #header>
@@ -36,11 +41,38 @@
 </template>
 
 <script setup lang="ts">
+import { merge } from 'es-toolkit/compat'
 import Dialog from 'primevue/dialog'
+import type { DialogPassThroughOptions } from 'primevue/dialog'
+import { computed } from 'vue'
 
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
+import { isCloud } from '@/platform/distribution/types'
+import type { DialogComponentProps } from '@/stores/dialogStore'
 import { useDialogStore } from '@/stores/dialogStore'
 
+const { flags } = useFeatureFlags()
+const teamWorkspacesEnabled = computed(
+  () => isCloud && flags.teamWorkspacesEnabled
+)
+
 const dialogStore = useDialogStore()
+
+function getDialogPt(item: {
+  key: string
+  dialogComponentProps: DialogComponentProps
+}): DialogPassThroughOptions {
+  const isWorkspaceSettingsDialog =
+    item.key === 'global-settings' && teamWorkspacesEnabled.value
+  const basePt = item.dialogComponentProps.pt || {}
+
+  if (isWorkspaceSettingsDialog) {
+    return merge(basePt, {
+      mask: { class: 'p-8' }
+    })
+  }
+  return basePt
+}
 </script>
 
 <style>
@@ -55,4 +87,30 @@ 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;
+  height: 100%;
+}
+
+.settings-dialog-workspace .p-dialog-content {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.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/ConfirmationDialogContent.vue b/src/components/dialog/content/ConfirmationDialogContent.vue
index 5dbb6cd9e..556379b3f 100644
--- a/src/components/dialog/content/ConfirmationDialogContent.vue
+++ b/src/components/dialog/content/ConfirmationDialogContent.vue
@@ -31,7 +31,12 @@
         }}</label>
       </div>
 
-      <Button variant="secondary" autofocus @click="onCancel">
+      <Button
+        v-if="type !== 'info'"
+        variant="secondary"
+        autofocus
+        @click="onCancel"
+      >
         <i class="pi pi-undo" />
         {{ $t('g.cancel') }}
       </Button>
@@ -73,6 +78,10 @@
         <i class="pi pi-eraser" />
         {{ $t('desktopMenu.reinstall') }}
       </Button>
+      <!-- Info - just show an OK button -->
+      <Button v-else-if="type === 'info'" variant="primary" @click="onCancel">
+        {{ $t('g.ok') }}
+      </Button>
       <!-- Invalid - just show a close button. -->
       <Button v-else variant="primary" @click="onCancel">
         <i class="pi pi-times" />
diff --git a/src/components/dialog/content/setting/CurrentUserMessage.vue b/src/components/dialog/content/setting/CurrentUserMessage.vue
index 141b72db6..8ad447562 100644
--- a/src/components/dialog/content/setting/CurrentUserMessage.vue
+++ b/src/components/dialog/content/setting/CurrentUserMessage.vue
@@ -5,9 +5,10 @@
     severity="info"
     icon="pi pi-user"
     pt:text="w-full"
+    data-testid="current-user-indicator"
   >
     <div class="flex items-center justify-between">
-      <div data-testid="current-user-indicator">
+      <div class="tabular-nums">
         {{ $t('g.currentUser') }}: {{ userStore.currentUser?.username }}
       </div>
       <Button
diff --git a/src/components/dialog/content/setting/MembersPanelContent.vue b/src/components/dialog/content/setting/MembersPanelContent.vue
new file mode 100644
index 000000000..46a455e35
--- /dev/null
+++ b/src/components/dialog/content/setting/MembersPanelContent.vue
@@ -0,0 +1,511 @@
+<template>
+  <div class="grow overflow-auto pt-6">
+    <div
+      class="flex size-full flex-col gap-2 rounded-2xl border border-interface-stroke border-inter p-6"
+    >
+      <!-- Section Header -->
+      <div class="flex w-full items-center gap-9">
+        <div class="flex min-w-0 flex-1 items-baseline gap-2">
+          <span
+            v-if="uiConfig.showMembersList"
+            class="text-base font-semibold text-base-foreground"
+          >
+            <template v-if="activeView === 'active'">
+              {{
+                $t('workspacePanel.members.membersCount', {
+                  count: members.length
+                })
+              }}
+            </template>
+            <template v-else-if="permissions.canViewPendingInvites">
+              {{
+                $t(
+                  'workspacePanel.members.pendingInvitesCount',
+                  pendingInvites.length
+                )
+              }}
+            </template>
+          </span>
+        </div>
+        <div v-if="uiConfig.showSearch" class="flex items-start gap-2">
+          <SearchBox
+            v-model="searchQuery"
+            :placeholder="$t('g.search')"
+            size="lg"
+            class="w-64"
+          />
+        </div>
+      </div>
+
+      <!-- Members Content -->
+      <div class="flex min-h-0 flex-1 flex-col">
+        <!-- Table Header with Tab Buttons and Column Headers -->
+        <div
+          v-if="uiConfig.showMembersList"
+          :class="
+            cn(
+              'grid w-full items-center py-2',
+              activeView === 'pending'
+                ? uiConfig.pendingGridCols
+                : uiConfig.headerGridCols
+            )
+          "
+        >
+          <!-- Tab buttons in first column -->
+          <div class="flex items-center gap-2">
+            <Button
+              :variant="
+                activeView === 'active' ? 'secondary' : 'muted-textonly'
+              "
+              size="md"
+              @click="activeView = 'active'"
+            >
+              {{ $t('workspacePanel.members.tabs.active') }}
+            </Button>
+            <Button
+              v-if="uiConfig.showPendingTab"
+              :variant="
+                activeView === 'pending' ? 'secondary' : 'muted-textonly'
+              "
+              size="md"
+              @click="activeView = 'pending'"
+            >
+              {{
+                $t(
+                  'workspacePanel.members.tabs.pendingCount',
+                  pendingInvites.length
+                )
+              }}
+            </Button>
+          </div>
+          <!-- Date column headers -->
+          <template v-if="activeView === 'pending'">
+            <Button
+              variant="muted-textonly"
+              size="sm"
+              class="justify-start"
+              @click="toggleSort('inviteDate')"
+            >
+              {{ $t('workspacePanel.members.columns.inviteDate') }}
+              <i class="icon-[lucide--chevrons-up-down] size-4" />
+            </Button>
+            <Button
+              variant="muted-textonly"
+              size="sm"
+              class="justify-start"
+              @click="toggleSort('expiryDate')"
+            >
+              {{ $t('workspacePanel.members.columns.expiryDate') }}
+              <i class="icon-[lucide--chevrons-up-down] size-4" />
+            </Button>
+            <div />
+          </template>
+          <template v-else>
+            <Button
+              variant="muted-textonly"
+              size="sm"
+              class="justify-end"
+              @click="toggleSort('joinDate')"
+            >
+              {{ $t('workspacePanel.members.columns.joinDate') }}
+              <i class="icon-[lucide--chevrons-up-down] size-4" />
+            </Button>
+            <!-- Empty cell for action column header (OWNER only) -->
+            <div v-if="permissions.canRemoveMembers" />
+          </template>
+        </div>
+
+        <!-- Members List -->
+        <div class="min-h-0 flex-1 overflow-y-auto">
+          <!-- Active Members -->
+          <template v-if="activeView === 'active'">
+            <!-- Personal Workspace: show only current user -->
+            <template v-if="isPersonalWorkspace">
+              <div
+                :class="
+                  cn(
+                    'grid w-full items-center rounded-lg p-2',
+                    uiConfig.membersGridCols
+                  )
+                "
+              >
+                <div class="flex items-center gap-3">
+                  <UserAvatar
+                    class="size-8"
+                    :photo-url="userPhotoUrl"
+                    :pt:icon:class="{ 'text-xl!': !userPhotoUrl }"
+                  />
+                  <div class="flex min-w-0 flex-1 flex-col gap-1">
+                    <div class="flex items-center gap-2">
+                      <span class="text-sm text-base-foreground">
+                        {{ userDisplayName }}
+                        <span class="text-muted-foreground">
+                          ({{ $t('g.you') }})
+                        </span>
+                      </span>
+                      <span
+                        v-if="uiConfig.showRoleBadge"
+                        class="text-[10px] font-bold uppercase text-base-background bg-base-foreground px-1 py-0.5 rounded-full"
+                      >
+                        {{ $t('workspaceSwitcher.roleOwner') }}
+                      </span>
+                    </div>
+                    <span class="text-sm text-muted-foreground">
+                      {{ userEmail }}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </template>
+
+            <!-- Team Workspace: sorted list (owner first, current user second, then rest) -->
+            <template v-else>
+              <div
+                v-for="(member, index) in filteredMembers"
+                :key="member.id"
+                :class="
+                  cn(
+                    'grid w-full items-center rounded-lg p-2',
+                    uiConfig.membersGridCols,
+                    index % 2 === 1 && 'bg-secondary-background/50'
+                  )
+                "
+              >
+                <div class="flex items-center gap-3">
+                  <UserAvatar
+                    class="size-8"
+                    :photo-url="
+                      isCurrentUser(member) ? userPhotoUrl : undefined
+                    "
+                    :pt:icon:class="{
+                      'text-xl!': !isCurrentUser(member) || !userPhotoUrl
+                    }"
+                  />
+                  <div class="flex min-w-0 flex-1 flex-col gap-1">
+                    <div class="flex items-center gap-2">
+                      <span class="text-sm text-base-foreground">
+                        {{ member.name }}
+                        <span
+                          v-if="isCurrentUser(member)"
+                          class="text-muted-foreground"
+                        >
+                          ({{ $t('g.you') }})
+                        </span>
+                      </span>
+                      <span
+                        v-if="uiConfig.showRoleBadge"
+                        class="text-[10px] font-bold uppercase text-base-background bg-base-foreground px-1 py-0.5 rounded-full"
+                      >
+                        {{ getRoleBadgeLabel(member.role) }}
+                      </span>
+                    </div>
+                    <span class="text-sm text-muted-foreground">
+                      {{ member.email }}
+                    </span>
+                  </div>
+                </div>
+                <!-- Join date -->
+                <span
+                  v-if="uiConfig.showDateColumn"
+                  class="text-sm text-muted-foreground text-right"
+                >
+                  {{ formatDate(member.joinDate) }}
+                </span>
+                <!-- Remove member action (OWNER only, can't remove yourself) -->
+                <div
+                  v-if="permissions.canRemoveMembers"
+                  class="flex items-center justify-end"
+                >
+                  <Button
+                    v-if="!isCurrentUser(member)"
+                    v-tooltip="{
+                      value: $t('g.moreOptions'),
+                      showDelay: 300
+                    }"
+                    variant="muted-textonly"
+                    size="icon"
+                    :aria-label="$t('g.moreOptions')"
+                    @click="showMemberMenu($event, member)"
+                  >
+                    <i class="pi pi-ellipsis-h" />
+                  </Button>
+                </div>
+              </div>
+
+              <!-- Member actions menu (shared for all members) -->
+              <Menu ref="memberMenu" :model="memberMenuItems" :popup="true" />
+            </template>
+          </template>
+
+          <!-- Pending Invites -->
+          <template v-else>
+            <div
+              v-for="(invite, index) in filteredPendingInvites"
+              :key="invite.id"
+              :class="
+                cn(
+                  'grid w-full items-center rounded-lg p-2',
+                  uiConfig.pendingGridCols,
+                  index % 2 === 1 && 'bg-secondary-background/50'
+                )
+              "
+            >
+              <!-- Invite info -->
+              <div class="flex items-center gap-3">
+                <div
+                  class="flex size-8 shrink-0 items-center justify-center rounded-full bg-secondary-background"
+                >
+                  <span class="text-sm font-bold text-base-foreground">
+                    {{ getInviteInitial(invite.email) }}
+                  </span>
+                </div>
+                <div class="flex min-w-0 flex-1 flex-col gap-1">
+                  <span class="text-sm text-base-foreground">
+                    {{ getInviteDisplayName(invite.email) }}
+                  </span>
+                  <span class="text-sm text-muted-foreground">
+                    {{ invite.email }}
+                  </span>
+                </div>
+              </div>
+              <!-- Invite date -->
+              <span class="text-sm text-muted-foreground">
+                {{ formatDate(invite.inviteDate) }}
+              </span>
+              <!-- Expiry date -->
+              <span class="text-sm text-muted-foreground">
+                {{ formatDate(invite.expiryDate) }}
+              </span>
+              <!-- Actions -->
+              <div class="flex items-center justify-end gap-2">
+                <Button
+                  v-tooltip="{
+                    value: $t('workspacePanel.members.actions.copyLink'),
+                    showDelay: 300
+                  }"
+                  variant="secondary"
+                  size="md"
+                  :aria-label="$t('workspacePanel.members.actions.copyLink')"
+                  @click="handleCopyInviteLink(invite)"
+                >
+                  <i class="icon-[lucide--link] size-4" />
+                </Button>
+                <Button
+                  v-tooltip="{
+                    value: $t('workspacePanel.members.actions.revokeInvite'),
+                    showDelay: 300
+                  }"
+                  variant="secondary"
+                  size="md"
+                  :aria-label="
+                    $t('workspacePanel.members.actions.revokeInvite')
+                  "
+                  @click="handleRevokeInvite(invite)"
+                >
+                  <i class="icon-[lucide--mail-x] size-4" />
+                </Button>
+              </div>
+            </div>
+            <div
+              v-if="filteredPendingInvites.length === 0"
+              class="flex w-full items-center justify-center py-8 text-sm text-muted-foreground"
+            >
+              {{ $t('workspacePanel.members.noInvites') }}
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+    <!-- Personal Workspace Message -->
+    <div v-if="isPersonalWorkspace" class="flex items-center">
+      <p class="text-sm text-muted-foreground">
+        {{ $t('workspacePanel.members.personalWorkspaceMessage') }}
+      </p>
+      <button
+        class="underline bg-transparent border-none cursor-pointer"
+        @click="handleCreateWorkspace"
+      >
+        {{ $t('workspacePanel.members.createNewWorkspace') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import Menu from 'primevue/menu'
+import { useToast } from 'primevue/usetoast'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import SearchBox from '@/components/common/SearchBox.vue'
+import UserAvatar from '@/components/common/UserAvatar.vue'
+import Button from '@/components/ui/button/Button.vue'
+import { useCurrentUser } from '@/composables/auth/useCurrentUser'
+import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
+import type {
+  PendingInvite,
+  WorkspaceMember
+} from '@/platform/workspace/stores/teamWorkspaceStore'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { useDialogService } from '@/services/dialogService'
+import { cn } from '@/utils/tailwindUtil'
+
+const { d, t } = useI18n()
+const toast = useToast()
+const { userPhotoUrl, userEmail, userDisplayName } = useCurrentUser()
+const {
+  showRemoveMemberDialog,
+  showRevokeInviteDialog,
+  showCreateWorkspaceDialog
+} = useDialogService()
+const workspaceStore = useTeamWorkspaceStore()
+const {
+  members,
+  pendingInvites,
+  isInPersonalWorkspace: isPersonalWorkspace
+} = storeToRefs(workspaceStore)
+const { copyInviteLink } = workspaceStore
+const { permissions, uiConfig } = useWorkspaceUI()
+
+const searchQuery = ref('')
+const activeView = ref<'active' | 'pending'>('active')
+const sortField = ref<'inviteDate' | 'expiryDate' | 'joinDate'>('inviteDate')
+const sortDirection = ref<'asc' | 'desc'>('desc')
+
+const memberMenu = ref<InstanceType<typeof Menu> | null>(null)
+const selectedMember = ref<WorkspaceMember | null>(null)
+
+function getInviteDisplayName(email: string): string {
+  return email.split('@')[0]
+}
+
+function getInviteInitial(email: string): string {
+  return email.charAt(0).toUpperCase()
+}
+
+const memberMenuItems = computed(() => [
+  {
+    label: t('workspacePanel.members.actions.removeMember'),
+    icon: 'pi pi-user-minus',
+    command: () => {
+      if (selectedMember.value) {
+        handleRemoveMember(selectedMember.value)
+      }
+    }
+  }
+])
+
+function showMemberMenu(event: Event, member: WorkspaceMember) {
+  selectedMember.value = member
+  memberMenu.value?.toggle(event)
+}
+
+function isCurrentUser(member: WorkspaceMember): boolean {
+  return member.email.toLowerCase() === userEmail.value?.toLowerCase()
+}
+
+// All members sorted: owners first, current user second, then rest by join date
+const filteredMembers = computed(() => {
+  let result = [...members.value]
+
+  if (searchQuery.value) {
+    const query = searchQuery.value.toLowerCase()
+    result = result.filter(
+      (member) =>
+        member.name.toLowerCase().includes(query) ||
+        member.email.toLowerCase().includes(query)
+    )
+  }
+
+  result.sort((a, b) => {
+    // Owners always come first
+    if (a.role === 'owner' && b.role !== 'owner') return -1
+    if (a.role !== 'owner' && b.role === 'owner') return 1
+
+    // Current user comes second (after owner)
+    const aIsCurrentUser = isCurrentUser(a)
+    const bIsCurrentUser = isCurrentUser(b)
+    if (aIsCurrentUser && !bIsCurrentUser) return -1
+    if (!aIsCurrentUser && bIsCurrentUser) return 1
+
+    // Then sort by join date
+    const aValue = a.joinDate.getTime()
+    const bValue = b.joinDate.getTime()
+    return sortDirection.value === 'asc' ? aValue - bValue : bValue - aValue
+  })
+
+  return result
+})
+
+function getRoleBadgeLabel(role: 'owner' | 'member'): string {
+  return role === 'owner'
+    ? t('workspaceSwitcher.roleOwner')
+    : t('workspaceSwitcher.roleMember')
+}
+
+const filteredPendingInvites = computed(() => {
+  let result = [...pendingInvites.value]
+
+  if (searchQuery.value) {
+    const query = searchQuery.value.toLowerCase()
+    result = result.filter((invite) =>
+      invite.email.toLowerCase().includes(query)
+    )
+  }
+
+  const field = sortField.value === 'joinDate' ? 'inviteDate' : sortField.value
+  result.sort((a, b) => {
+    const aDate = a[field]
+    const bDate = b[field]
+    if (!aDate || !bDate) return 0
+    const aValue = aDate.getTime()
+    const bValue = bDate.getTime()
+    return sortDirection.value === 'asc' ? aValue - bValue : bValue - aValue
+  })
+
+  return result
+})
+
+function toggleSort(field: 'inviteDate' | 'expiryDate' | 'joinDate') {
+  if (sortField.value === field) {
+    sortDirection.value = sortDirection.value === 'asc' ? 'desc' : 'asc'
+  } else {
+    sortField.value = field
+    sortDirection.value = 'desc'
+  }
+}
+
+function formatDate(date: Date): string {
+  return d(date, { dateStyle: 'medium' })
+}
+
+async function handleCopyInviteLink(invite: PendingInvite) {
+  try {
+    await copyInviteLink(invite.id)
+    toast.add({
+      severity: 'success',
+      summary: t('g.copied'),
+      life: 2000
+    })
+  } catch {
+    toast.add({
+      severity: 'error',
+      summary: t('g.error'),
+      life: 3000
+    })
+  }
+}
+
+function handleRevokeInvite(invite: PendingInvite) {
+  showRevokeInviteDialog(invite.id)
+}
+
+function handleCreateWorkspace() {
+  showCreateWorkspaceDialog()
+}
+
+function handleRemoveMember(member: WorkspaceMember) {
+  showRemoveMemberDialog(member.id)
+}
+</script>
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..c4ac049e9
--- /dev/null
+++ b/src/components/dialog/content/setting/WorkspacePanelContent.vue
@@ -0,0 +1,238 @@
+<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 unstyled :value="activeTab" @update:value="setActiveTab">
+      <div class="flex w-full items-center">
+        <TabList unstyled class="flex w-full gap-2">
+          <Tab
+            value="plan"
+            :class="
+              cn(
+                buttonVariants({
+                  variant: activeTab === 'plan' ? 'secondary' : 'textonly',
+                  size: 'md'
+                }),
+                activeTab === 'plan' && 'text-base-foreground no-underline'
+              )
+            "
+          >
+            {{ $t('workspacePanel.tabs.planCredits') }}
+          </Tab>
+          <Tab
+            value="members"
+            :class="
+              cn(
+                buttonVariants({
+                  variant: activeTab === 'members' ? 'secondary' : 'textonly',
+                  size: 'md'
+                }),
+                activeTab === 'members' && 'text-base-foreground no-underline',
+                'ml-2'
+              )
+            "
+          >
+            {{
+              $t('workspacePanel.tabs.membersCount', {
+                count: isInPersonalWorkspace ? 1 : members.length
+              })
+            }}
+          </Tab>
+        </TabList>
+        <Button
+          v-if="permissions.canInviteMembers"
+          v-tooltip="
+            inviteTooltip
+              ? { value: inviteTooltip, showDelay: 0 }
+              : { value: $t('workspacePanel.inviteMember'), showDelay: 300 }
+          "
+          variant="secondary"
+          size="lg"
+          :disabled="isInviteLimitReached"
+          :class="isInviteLimitReached && 'opacity-50 cursor-not-allowed'"
+          :aria-label="$t('workspacePanel.inviteMember')"
+          @click="handleInviteMember"
+        >
+          {{ $t('workspacePanel.invite') }}
+          <i class="pi pi-plus ml-1 text-sm" />
+        </Button>
+        <template v-if="permissions.canAccessWorkspaceMenu">
+          <Button
+            v-tooltip="{ value: $t('g.moreOptions'), showDelay: 300 }"
+            class="ml-2"
+            variant="secondary"
+            size="lg"
+            :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' : 'cursor-pointer'
+                ]"
+                @click="
+                  item.command?.({
+                    originalEvent: $event,
+                    item
+                  })
+                "
+              >
+                <i :class="item.icon" />
+                <span>{{ item.label }}</span>
+              </div>
+            </template>
+          </Menu>
+        </template>
+      </div>
+
+      <TabPanels unstyled>
+        <TabPanel value="plan">
+          <SubscriptionPanelContentWorkspace />
+        </TabPanel>
+        <TabPanel value="members">
+          <MembersPanelContent :key="workspaceRole" />
+        </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 MembersPanelContent from '@/components/dialog/content/setting/MembersPanelContent.vue'
+import Button from '@/components/ui/button/Button.vue'
+import { buttonVariants } from '@/components/ui/button/button.variants'
+import SubscriptionPanelContentWorkspace from '@/platform/cloud/subscription/components/SubscriptionPanelContentWorkspace.vue'
+import { cn } from '@/utils/tailwindUtil'
+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,
+  showInviteMemberDialog,
+  showEditWorkspaceDialog
+} = useDialogService()
+const workspaceStore = useTeamWorkspaceStore()
+const {
+  workspaceName,
+  members,
+  isInviteLimitReached,
+  isWorkspaceSubscribed,
+  isInPersonalWorkspace
+} = storeToRefs(workspaceStore)
+const { fetchMembers, fetchPendingInvites } = workspaceStore
+const { activeTab, setActiveTab, workspaceRole, 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 inviteTooltip = computed(() => {
+  if (!isInviteLimitReached.value) return null
+  return t('workspacePanel.inviteLimitReached')
+})
+
+function handleInviteMember() {
+  if (isInviteLimitReached.value) return
+  showInviteMemberDialog()
+}
+
+const menuItems = computed(() => {
+  const items = []
+
+  // Add edit option for owners
+  if (uiConfig.value.showEditWorkspaceMenuItem) {
+    items.push({
+      label: t('workspacePanel.menu.editWorkspace'),
+      icon: 'pi pi-pencil',
+      command: handleEditWorkspace
+    })
+  }
+
+  const action = uiConfig.value.workspaceMenuAction
+  if (action === 'delete') {
+    items.push({
+      label: t('workspacePanel.menu.deleteWorkspace'),
+      icon: 'pi pi-trash',
+      class: isDeleteDisabled.value
+        ? 'text-danger/50 cursor-not-allowed'
+        : 'text-danger',
+      disabled: isDeleteDisabled.value,
+      command: isDeleteDisabled.value ? undefined : handleDeleteWorkspace
+    })
+  } else if (action === 'leave') {
+    items.push({
+      label: t('workspacePanel.menu.leaveWorkspace'),
+      icon: 'pi pi-sign-out',
+      command: handleLeaveWorkspace
+    })
+  }
+
+  return items
+})
+
+onMounted(() => {
+  setActiveTab(defaultTab)
+  fetchMembers()
+  fetchPendingInvites()
+})
+</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..6dca4c414
--- /dev/null
+++ b/src/components/dialog/content/workspace/CreateWorkspaceDialogContent.vue
@@ -0,0 +1,112 @@
+<template>
+  <div
+    class="flex w-full max-w-[400px] flex-col rounded-2xl border border-border-default bg-base-background"
+  >
+    <!-- Header -->
+    <div
+      class="flex h-12 items-center justify-between border-b border-border-default px-4"
+    >
+      <h2 class="m-0 text-sm font-normal text-base-foreground">
+        {{ $t('workspacePanel.createWorkspaceDialog.title') }}
+      </h2>
+      <button
+        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        :aria-label="$t('g.close')"
+        @click="onCancel"
+      >
+        <i class="pi pi-times size-4" />
+      </button>
+    </div>
+
+    <!-- Body -->
+    <div class="flex flex-col gap-4 px-4 py-4">
+      <p class="m-0 text-sm text-muted-foreground">
+        {{ $t('workspacePanel.createWorkspaceDialog.message') }}
+      </p>
+      <div class="flex flex-col gap-2">
+        <label class="text-sm text-base-foreground">
+          {{ $t('workspacePanel.createWorkspaceDialog.nameLabel') }}
+        </label>
+        <input
+          v-model="workspaceName"
+          type="text"
+          class="w-full rounded-lg border border-border-default bg-transparent px-3 py-2 text-sm text-base-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-secondary-foreground"
+          :placeholder="
+            $t('workspacePanel.createWorkspaceDialog.namePlaceholder')
+          "
+          @keydown.enter="isValidName && onCreate()"
+        />
+      </div>
+    </div>
+
+    <!-- Footer -->
+    <div class="flex items-center justify-end gap-4 px-4 py-4">
+      <Button variant="muted-textonly" @click="onCancel">
+        {{ $t('g.cancel') }}
+      </Button>
+      <Button
+        variant="primary"
+        size="lg"
+        :loading
+        :disabled="!isValidName"
+        @click="onCreate"
+      >
+        {{ $t('workspacePanel.createWorkspaceDialog.create') }}
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useToast } from 'primevue/usetoast'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const { onConfirm } = defineProps<{
+  onConfirm?: (name: string) => void | Promise<void>
+}>()
+
+const { t } = useI18n()
+const dialogStore = useDialogStore()
+const toast = useToast()
+const workspaceStore = useTeamWorkspaceStore()
+const loading = ref(false)
+const workspaceName = ref('')
+
+const isValidName = computed(() => {
+  const name = workspaceName.value.trim()
+  const safeNameRegex = /^[a-zA-Z0-9][a-zA-Z0-9\s\-_'.,()&+]*$/
+  return name.length >= 1 && name.length <= 50 && safeNameRegex.test(name)
+})
+
+function onCancel() {
+  dialogStore.closeDialog({ key: 'create-workspace' })
+}
+
+async function onCreate() {
+  if (!isValidName.value) return
+  loading.value = true
+  try {
+    const name = workspaceName.value.trim()
+    // Call optional callback if provided
+    await onConfirm?.(name)
+    dialogStore.closeDialog({ key: 'create-workspace' })
+    // Create workspace and switch to it (triggers reload internally)
+    await workspaceStore.createWorkspace(name)
+  } catch (error) {
+    console.error('[CreateWorkspaceDialog] Failed to create workspace:', error)
+    toast.add({
+      severity: 'error',
+      summary: t('workspacePanel.toast.failedToCreateWorkspace'),
+      detail: error instanceof Error ? error.message : t('g.unknownError'),
+      life: 5000
+    })
+  } finally {
+    loading.value = false
+  }
+}
+</script>
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..8fa6213ef
--- /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/InviteMemberDialogContent.vue b/src/components/dialog/content/workspace/InviteMemberDialogContent.vue
new file mode 100644
index 000000000..479a6b6d1
--- /dev/null
+++ b/src/components/dialog/content/workspace/InviteMemberDialogContent.vue
@@ -0,0 +1,182 @@
+<template>
+  <div
+    class="flex w-full max-w-[512px] flex-col rounded-2xl border border-border-default bg-base-background"
+  >
+    <!-- Header -->
+    <div
+      class="flex h-12 items-center justify-between border-b border-border-default px-4"
+    >
+      <h2 class="m-0 text-sm font-normal text-base-foreground">
+        {{
+          step === 'email'
+            ? $t('workspacePanel.inviteMemberDialog.title')
+            : $t('workspacePanel.inviteMemberDialog.linkStep.title')
+        }}
+      </h2>
+      <button
+        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        :aria-label="$t('g.close')"
+        @click="onCancel"
+      >
+        <i class="pi pi-times size-4" />
+      </button>
+    </div>
+
+    <!-- Body: Email Step -->
+    <template v-if="step === 'email'">
+      <div class="flex flex-col gap-4 px-4 py-4">
+        <p class="m-0 text-sm text-muted-foreground">
+          {{ $t('workspacePanel.inviteMemberDialog.message') }}
+        </p>
+        <input
+          v-model="email"
+          type="email"
+          class="w-full rounded-lg border border-border-default bg-transparent px-3 py-2 text-sm text-base-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-secondary-foreground"
+          :placeholder="$t('workspacePanel.inviteMemberDialog.placeholder')"
+        />
+      </div>
+
+      <!-- Footer: Email Step -->
+      <div class="flex items-center justify-end gap-4 px-4 py-4">
+        <Button variant="muted-textonly" @click="onCancel">
+          {{ $t('g.cancel') }}
+        </Button>
+        <Button
+          variant="primary"
+          size="lg"
+          :loading
+          :disabled="!isValidEmail"
+          @click="onCreateLink"
+        >
+          {{ $t('workspacePanel.inviteMemberDialog.createLink') }}
+        </Button>
+      </div>
+    </template>
+
+    <!-- Body: Link Step -->
+    <template v-else>
+      <div class="flex flex-col gap-4 px-4 py-4">
+        <p class="m-0 text-sm text-muted-foreground">
+          {{ $t('workspacePanel.inviteMemberDialog.linkStep.message') }}
+        </p>
+        <p class="m-0 text-sm font-medium text-base-foreground">
+          {{ email }}
+        </p>
+        <div class="relative">
+          <input
+            :value="generatedLink"
+            readonly
+            class="w-full cursor-pointer rounded-lg border border-border-default bg-transparent px-3 py-2 pr-10 text-sm text-base-foreground focus:outline-none"
+            @click="onSelectLink"
+          />
+          <div
+            class="absolute right-4 top-2 cursor-pointer"
+            @click="onCopyLink"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              fill="none"
+            >
+              <g clip-path="url(#clip0_2127_14348)">
+                <path
+                  d="M2.66634 10.6666C1.93301 10.6666 1.33301 10.0666 1.33301 9.33325V2.66659C1.33301 1.93325 1.93301 1.33325 2.66634 1.33325H9.33301C10.0663 1.33325 10.6663 1.93325 10.6663 2.66659M6.66634 5.33325H13.333C14.0694 5.33325 14.6663 5.93021 14.6663 6.66658V13.3333C14.6663 14.0696 14.0694 14.6666 13.333 14.6666H6.66634C5.92996 14.6666 5.33301 14.0696 5.33301 13.3333V6.66658C5.33301 5.93021 5.92996 5.33325 6.66634 5.33325Z"
+                  stroke="white"
+                  stroke-width="1.3"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </g>
+              <defs>
+                <clipPath id="clip0_2127_14348">
+                  <rect width="16" height="16" fill="white" />
+                </clipPath>
+              </defs>
+            </svg>
+          </div>
+        </div>
+      </div>
+
+      <!-- Footer: Link Step -->
+      <div class="flex items-center justify-end gap-4 px-4 py-4">
+        <Button variant="muted-textonly" @click="onCancel">
+          {{ $t('g.cancel') }}
+        </Button>
+        <Button variant="primary" size="lg" @click="onCopyLink">
+          {{ $t('workspacePanel.inviteMemberDialog.linkStep.copyLink') }}
+        </Button>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useToast } from 'primevue/usetoast'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const dialogStore = useDialogStore()
+const toast = useToast()
+const { t } = useI18n()
+const workspaceStore = useTeamWorkspaceStore()
+
+const loading = ref(false)
+const email = ref('')
+const step = ref<'email' | 'link'>('email')
+const generatedLink = ref('')
+
+const isValidEmail = computed(() => {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+  return emailRegex.test(email.value)
+})
+
+function onCancel() {
+  dialogStore.closeDialog({ key: 'invite-member' })
+}
+
+async function onCreateLink() {
+  if (!isValidEmail.value) return
+  loading.value = true
+  try {
+    generatedLink.value = await workspaceStore.createInviteLink(email.value)
+    step.value = 'link'
+  } catch (error) {
+    toast.add({
+      severity: 'error',
+      summary: t('workspacePanel.inviteMemberDialog.linkCopyFailed'),
+      detail: error instanceof Error ? error.message : undefined,
+      life: 3000
+    })
+  } finally {
+    loading.value = false
+  }
+}
+
+async function onCopyLink() {
+  try {
+    await navigator.clipboard.writeText(generatedLink.value)
+    toast.add({
+      severity: 'success',
+      summary: t('workspacePanel.inviteMemberDialog.linkCopied'),
+      life: 2000
+    })
+  } catch {
+    toast.add({
+      severity: 'error',
+      summary: t('workspacePanel.inviteMemberDialog.linkCopyFailed'),
+      life: 3000
+    })
+  }
+}
+
+function onSelectLink(event: Event) {
+  const input = event.target as HTMLInputElement
+  input.select()
+}
+</script>
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/dialog/content/workspace/RemoveMemberDialogContent.vue b/src/components/dialog/content/workspace/RemoveMemberDialogContent.vue
new file mode 100644
index 000000000..2d085bec4
--- /dev/null
+++ b/src/components/dialog/content/workspace/RemoveMemberDialogContent.vue
@@ -0,0 +1,83 @@
+<template>
+  <div
+    class="flex w-full max-w-[360px] flex-col rounded-2xl border border-border-default bg-base-background"
+  >
+    <!-- Header -->
+    <div
+      class="flex h-12 items-center justify-between border-b border-border-default px-4"
+    >
+      <h2 class="m-0 text-sm font-normal text-base-foreground">
+        {{ $t('workspacePanel.removeMemberDialog.title') }}
+      </h2>
+      <button
+        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        :aria-label="$t('g.close')"
+        @click="onCancel"
+      >
+        <i class="pi pi-times size-4" />
+      </button>
+    </div>
+
+    <!-- Body -->
+    <div class="px-4 py-4">
+      <p class="m-0 text-sm text-muted-foreground">
+        {{ $t('workspacePanel.removeMemberDialog.message') }}
+      </p>
+    </div>
+
+    <!-- Footer -->
+    <div class="flex items-center justify-end gap-4 px-4 py-4">
+      <Button variant="muted-textonly" @click="onCancel">
+        {{ $t('g.cancel') }}
+      </Button>
+      <Button variant="destructive" size="lg" :loading @click="onRemove">
+        {{ $t('workspacePanel.removeMemberDialog.remove') }}
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useToast } from 'primevue/usetoast'
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const { memberId } = defineProps<{
+  memberId: string
+}>()
+
+const dialogStore = useDialogStore()
+const workspaceStore = useTeamWorkspaceStore()
+const toast = useToast()
+const { t } = useI18n()
+const loading = ref(false)
+
+function onCancel() {
+  dialogStore.closeDialog({ key: 'remove-member' })
+}
+
+async function onRemove() {
+  loading.value = true
+  try {
+    await workspaceStore.removeMember(memberId)
+    toast.add({
+      severity: 'success',
+      summary: t('workspacePanel.removeMemberDialog.success'),
+      life: 2000
+    })
+    dialogStore.closeDialog({ key: 'remove-member' })
+  } catch {
+    toast.add({
+      severity: 'error',
+      summary: t('workspacePanel.removeMemberDialog.error'),
+      life: 3000
+    })
+  } finally {
+    loading.value = false
+  }
+}
+</script>
diff --git a/src/components/dialog/content/workspace/RevokeInviteDialogContent.vue b/src/components/dialog/content/workspace/RevokeInviteDialogContent.vue
new file mode 100644
index 000000000..1d9dacd9a
--- /dev/null
+++ b/src/components/dialog/content/workspace/RevokeInviteDialogContent.vue
@@ -0,0 +1,79 @@
+<template>
+  <div
+    class="flex w-full max-w-[360px] flex-col rounded-2xl border border-border-default bg-base-background"
+  >
+    <!-- Header -->
+    <div
+      class="flex h-12 items-center justify-between border-b border-border-default px-4"
+    >
+      <h2 class="m-0 text-sm font-normal text-base-foreground">
+        {{ $t('workspacePanel.revokeInviteDialog.title') }}
+      </h2>
+      <button
+        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        :aria-label="$t('g.close')"
+        @click="onCancel"
+      >
+        <i class="pi pi-times size-4" />
+      </button>
+    </div>
+
+    <!-- Body -->
+    <div class="px-4 py-4">
+      <p class="m-0 text-sm text-muted-foreground">
+        {{ $t('workspacePanel.revokeInviteDialog.message') }}
+      </p>
+    </div>
+
+    <!-- Footer -->
+    <div class="flex items-center justify-end gap-4 px-4 py-4">
+      <Button variant="muted-textonly" @click="onCancel">
+        {{ $t('g.cancel') }}
+      </Button>
+      <Button variant="destructive" size="lg" :loading @click="onRevoke">
+        {{ $t('workspacePanel.revokeInviteDialog.revoke') }}
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useToast } from 'primevue/usetoast'
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const { inviteId } = defineProps<{
+  inviteId: string
+}>()
+
+const dialogStore = useDialogStore()
+const workspaceStore = useTeamWorkspaceStore()
+const toast = useToast()
+const { t } = useI18n()
+const loading = ref(false)
+
+function onCancel() {
+  dialogStore.closeDialog({ key: 'revoke-invite' })
+}
+
+async function onRevoke() {
+  loading.value = true
+  try {
+    await workspaceStore.revokeInvite(inviteId)
+    dialogStore.closeDialog({ key: 'revoke-invite' })
+  } catch (error) {
+    toast.add({
+      severity: 'error',
+      summary: t('g.error'),
+      detail: error instanceof Error ? error.message : undefined,
+      life: 3000
+    })
+  } finally {
+    loading.value = false
+  }
+}
+</script>
diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue
index 48d82e44b..370665899 100644
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -160,6 +160,9 @@ import { isNativeWindow } from '@/utils/envUtil'
 import { forEachNode } from '@/utils/graphTraversalUtil'
 
 import SelectionRectangle from './SelectionRectangle.vue'
+import { isCloud } from '@/platform/distribution/types'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
+import { useInviteUrlLoader } from '@/platform/workspace/composables/useInviteUrlLoader'
 
 const emit = defineEmits<{
   ready: []
@@ -394,6 +397,9 @@ const loadCustomNodesI18n = async () => {
 
 const comfyAppReady = ref(false)
 const workflowPersistence = useWorkflowPersistence()
+const { flags } = useFeatureFlags()
+// Set up invite loader during setup phase so useRoute/useRouter work correctly
+const inviteUrlLoader = isCloud ? useInviteUrlLoader() : null
 useCanvasDrop(canvasRef)
 useLitegraphSettings()
 useNodeBadge()
@@ -459,6 +465,22 @@ onMounted(async () => {
   // Load template from URL if present
   await workflowPersistence.loadTemplateFromUrlIfPresent()
 
+  // Accept workspace invite from URL if present (e.g., ?invite=TOKEN)
+  // Uses watch because feature flags load asynchronously - flag may be false initially
+  // then become true once remoteConfig or websocket features are loaded
+  if (inviteUrlLoader) {
+    const stopWatching = watch(
+      () => flags.teamWorkspacesEnabled,
+      async (enabled) => {
+        if (enabled) {
+          stopWatching()
+          await inviteUrlLoader.loadInviteFromUrl()
+        }
+      },
+      { immediate: true }
+    )
+  }
+
   // Initialize release store to fetch releases from comfy-api (fire-and-forget)
   const { useReleaseStore } =
     await import('@/platform/updates/common/releaseStore')
diff --git a/src/components/graph/SelectionToolbox.test.ts b/src/components/graph/SelectionToolbox.test.ts
index 0938a3fe3..441ca027f 100644
--- a/src/components/graph/SelectionToolbox.test.ts
+++ b/src/components/graph/SelectionToolbox.test.ts
@@ -5,9 +5,26 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
 import SelectionToolbox from '@/components/graph/SelectionToolbox.vue'
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { useExtensionService } from '@/services/extensionService'
+import {
+  createMockCanvas,
+  createMockPositionable
+} from '@/utils/__tests__/litegraphTestUtils'
+
+function createMockExtensionService(): ReturnType<typeof useExtensionService> {
+  return {
+    extensionCommands: { value: new Map() },
+    loadExtensions: vi.fn(),
+    registerExtension: vi.fn(),
+    invokeExtensions: vi.fn(() => []),
+    invokeExtensionsAsync: vi.fn()
+  } as Partial<ReturnType<typeof useExtensionService>> as ReturnType<
+    typeof useExtensionService
+  >
+}
 
 // Mock the composables and services
 vi.mock('@/renderer/core/canvas/useCanvasInteractions', () => ({
@@ -112,12 +129,7 @@ describe('SelectionToolbox', () => {
     canvasStore = useCanvasStore()
 
     // Mock the canvas to avoid "getCanvas: canvas is null" errors
-    canvasStore.canvas = {
-      setDirty: vi.fn(),
-      state: {
-        selectionChanged: false
-      }
-    } as any
+    canvasStore.canvas = createMockCanvas()
 
     vi.resetAllMocks()
   })
@@ -184,30 +196,27 @@ describe('SelectionToolbox', () => {
   describe('Button Visibility Logic', () => {
     beforeEach(() => {
       const mockExtensionService = vi.mocked(useExtensionService)
-      mockExtensionService.mockReturnValue({
-        extensionCommands: { value: new Map() },
-        invokeExtensions: vi.fn(() => [])
-      } as any)
+      mockExtensionService.mockReturnValue(createMockExtensionService())
     })
 
     it('should show info button only for single selections', () => {
       // Single node selection
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      canvasStore.selectedItems = [createMockPositionable()]
       const wrapper = mountComponent()
       expect(wrapper.find('.info-button').exists()).toBe(true)
 
       // Multiple node selection
       canvasStore.selectedItems = [
-        { type: 'TestNode1' },
-        { type: 'TestNode2' }
-      ] as any
+        createMockPositionable(),
+        createMockPositionable()
+      ]
       wrapper.unmount()
       const wrapper2 = mountComponent()
       expect(wrapper2.find('.info-button').exists()).toBe(false)
     })
 
     it('should not show info button when node definition is not found', () => {
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      canvasStore.selectedItems = [createMockPositionable()]
       // mock nodedef and return null
       nodeDefMock = null
       // remount component
@@ -217,7 +226,7 @@ describe('SelectionToolbox', () => {
 
     it('should show color picker for all selections', () => {
       // Single node selection
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      canvasStore.selectedItems = [createMockPositionable()]
       const wrapper = mountComponent()
       expect(wrapper.find('[data-testid="color-picker-button"]').exists()).toBe(
         true
@@ -225,9 +234,9 @@ describe('SelectionToolbox', () => {
 
       // Multiple node selection
       canvasStore.selectedItems = [
-        { type: 'TestNode1' },
-        { type: 'TestNode2' }
-      ] as any
+        createMockPositionable(),
+        createMockPositionable()
+      ]
       wrapper.unmount()
       const wrapper2 = mountComponent()
       expect(
@@ -237,15 +246,15 @@ describe('SelectionToolbox', () => {
 
     it('should show frame nodes only for multiple selections', () => {
       // Single node selection
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      canvasStore.selectedItems = [createMockPositionable()]
       const wrapper = mountComponent()
       expect(wrapper.find('.frame-nodes').exists()).toBe(false)
 
       // Multiple node selection
       canvasStore.selectedItems = [
-        { type: 'TestNode1' },
-        { type: 'TestNode2' }
-      ] as any
+        createMockPositionable(),
+        createMockPositionable()
+      ]
       wrapper.unmount()
       const wrapper2 = mountComponent()
       expect(wrapper2.find('.frame-nodes').exists()).toBe(true)
@@ -253,22 +262,22 @@ describe('SelectionToolbox', () => {
 
     it('should show bypass button for appropriate selections', () => {
       // Single node selection
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      canvasStore.selectedItems = [createMockPositionable()]
       const wrapper = mountComponent()
       expect(wrapper.find('[data-testid="bypass-button"]').exists()).toBe(true)
 
       // Multiple node selection
       canvasStore.selectedItems = [
-        { type: 'TestNode1' },
-        { type: 'TestNode2' }
-      ] as any
+        createMockPositionable(),
+        createMockPositionable()
+      ]
       wrapper.unmount()
       const wrapper2 = mountComponent()
       expect(wrapper2.find('[data-testid="bypass-button"]').exists()).toBe(true)
     })
 
     it('should show common buttons for all selections', () => {
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      canvasStore.selectedItems = [createMockPositionable()]
       const wrapper = mountComponent()
 
       expect(wrapper.find('[data-testid="delete-button"]').exists()).toBe(true)
@@ -286,13 +295,13 @@ describe('SelectionToolbox', () => {
 
       // Single image node
       isImageNodeSpy.mockReturnValue(true)
-      canvasStore.selectedItems = [{ type: 'ImageNode' }] as any
+      canvasStore.selectedItems = [createMockPositionable()]
       const wrapper = mountComponent()
       expect(wrapper.find('.mask-editor-button').exists()).toBe(true)
 
       // Single non-image node
       isImageNodeSpy.mockReturnValue(false)
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      canvasStore.selectedItems = [createMockPositionable()]
       wrapper.unmount()
       const wrapper2 = mountComponent()
       expect(wrapper2.find('.mask-editor-button').exists()).toBe(false)
@@ -304,13 +313,13 @@ describe('SelectionToolbox', () => {
 
       // Single Load3D node
       isLoad3dNodeSpy.mockReturnValue(true)
-      canvasStore.selectedItems = [{ type: 'Load3DNode' }] as any
+      canvasStore.selectedItems = [createMockPositionable()]
       const wrapper = mountComponent()
       expect(wrapper.find('.load-3d-viewer-button').exists()).toBe(true)
 
       // Single non-Load3D node
       isLoad3dNodeSpy.mockReturnValue(false)
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      canvasStore.selectedItems = [createMockPositionable()]
       wrapper.unmount()
       const wrapper2 = mountComponent()
       expect(wrapper2.find('.load-3d-viewer-button').exists()).toBe(false)
@@ -326,17 +335,17 @@ describe('SelectionToolbox', () => {
 
       // With output node selected
       isOutputNodeSpy.mockReturnValue(true)
-      filterOutputNodesSpy.mockReturnValue([{ type: 'SaveImage' }] as any)
-      canvasStore.selectedItems = [
-        { type: 'SaveImage', constructor: { nodeData: { output_node: true } } }
-      ] as any
+      filterOutputNodesSpy.mockReturnValue([
+        { type: 'SaveImage' }
+      ] as LGraphNode[])
+      canvasStore.selectedItems = [createMockPositionable()]
       const wrapper = mountComponent()
       expect(wrapper.find('.execute-button').exists()).toBe(true)
 
       // Without output node selected
       isOutputNodeSpy.mockReturnValue(false)
       filterOutputNodesSpy.mockReturnValue([])
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      canvasStore.selectedItems = [createMockPositionable()]
       wrapper.unmount()
       const wrapper2 = mountComponent()
       expect(wrapper2.find('.execute-button').exists()).toBe(false)
@@ -352,7 +361,7 @@ describe('SelectionToolbox', () => {
   describe('Divider Visibility Logic', () => {
     it('should show dividers between button groups when both groups have buttons', () => {
       // Setup single node to show info + other buttons
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      canvasStore.selectedItems = [createMockPositionable()]
       const wrapper = mountComponent()
 
       const dividers = wrapper.findAll('.vertical-divider')
@@ -378,10 +387,13 @@ describe('SelectionToolbox', () => {
             ['test-command', { id: 'test-command', title: 'Test Command' }]
           ])
         },
-        invokeExtensions: vi.fn(() => ['test-command'])
-      } as any)
+        loadExtensions: vi.fn(),
+        registerExtension: vi.fn(),
+        invokeExtensions: vi.fn(() => ['test-command']),
+        invokeExtensionsAsync: vi.fn()
+      } as ReturnType<typeof useExtensionService>)
 
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      canvasStore.selectedItems = [createMockPositionable()]
       const wrapper = mountComponent()
 
       expect(wrapper.find('.extension-command-button').exists()).toBe(true)
@@ -389,12 +401,9 @@ describe('SelectionToolbox', () => {
 
     it('should not render extension commands when none available', () => {
       const mockExtensionService = vi.mocked(useExtensionService)
-      mockExtensionService.mockReturnValue({
-        extensionCommands: { value: new Map() },
-        invokeExtensions: vi.fn(() => [])
-      } as any)
+      mockExtensionService.mockReturnValue(createMockExtensionService())
 
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      canvasStore.selectedItems = [createMockPositionable()]
       const wrapper = mountComponent()
 
       expect(wrapper.find('.extension-command-button').exists()).toBe(false)
@@ -404,12 +413,9 @@ describe('SelectionToolbox', () => {
   describe('Container Styling', () => {
     it('should apply minimap container styles', () => {
       const mockExtensionService = vi.mocked(useExtensionService)
-      mockExtensionService.mockReturnValue({
-        extensionCommands: { value: new Map() },
-        invokeExtensions: vi.fn(() => [])
-      } as any)
+      mockExtensionService.mockReturnValue(createMockExtensionService())
 
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      canvasStore.selectedItems = [createMockPositionable()]
       const wrapper = mountComponent()
 
       const panel = wrapper.find('.panel')
@@ -418,12 +424,9 @@ describe('SelectionToolbox', () => {
 
     it('should have correct CSS classes', () => {
       const mockExtensionService = vi.mocked(useExtensionService)
-      mockExtensionService.mockReturnValue({
-        extensionCommands: { value: new Map() },
-        invokeExtensions: vi.fn(() => [])
-      } as any)
+      mockExtensionService.mockReturnValue(createMockExtensionService())
 
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      canvasStore.selectedItems = [createMockPositionable()]
       const wrapper = mountComponent()
 
       const panel = wrapper.find('.panel')
@@ -435,12 +438,9 @@ describe('SelectionToolbox', () => {
 
     it('should handle animation class conditionally', () => {
       const mockExtensionService = vi.mocked(useExtensionService)
-      mockExtensionService.mockReturnValue({
-        extensionCommands: { value: new Map() },
-        invokeExtensions: vi.fn(() => [])
-      } as any)
+      mockExtensionService.mockReturnValue(createMockExtensionService())
 
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      canvasStore.selectedItems = [createMockPositionable()]
       const wrapper = mountComponent()
 
       const panel = wrapper.find('.panel')
@@ -453,16 +453,18 @@ describe('SelectionToolbox', () => {
       const mockCanvasInteractions = vi.mocked(useCanvasInteractions)
       const forwardEventToCanvasSpy = vi.fn()
       mockCanvasInteractions.mockReturnValue({
-        forwardEventToCanvas: forwardEventToCanvasSpy
-      } as any)
+        handleWheel: vi.fn(),
+        handlePointer: vi.fn(),
+        forwardEventToCanvas: forwardEventToCanvasSpy,
+        shouldHandleNodePointerEvents: { value: true } as ReturnType<
+          typeof useCanvasInteractions
+        >['shouldHandleNodePointerEvents']
+      } as ReturnType<typeof useCanvasInteractions>)
 
       const mockExtensionService = vi.mocked(useExtensionService)
-      mockExtensionService.mockReturnValue({
-        extensionCommands: { value: new Map() },
-        invokeExtensions: vi.fn(() => [])
-      } as any)
+      mockExtensionService.mockReturnValue(createMockExtensionService())
 
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      canvasStore.selectedItems = [createMockPositionable()]
       const wrapper = mountComponent()
 
       const panel = wrapper.find('.panel')
@@ -475,10 +477,7 @@ describe('SelectionToolbox', () => {
   describe('No Selection State', () => {
     beforeEach(() => {
       const mockExtensionService = vi.mocked(useExtensionService)
-      mockExtensionService.mockReturnValue({
-        extensionCommands: { value: new Map() },
-        invokeExtensions: vi.fn(() => [])
-      } as any)
+      mockExtensionService.mockReturnValue(createMockExtensionService())
     })
 
     it('should hide most buttons when no items selected', () => {
diff --git a/src/components/graph/selectionToolbox/BypassButton.test.ts b/src/components/graph/selectionToolbox/BypassButton.test.ts
index 9fdcd971f..a6fa3ff94 100644
--- a/src/components/graph/selectionToolbox/BypassButton.test.ts
+++ b/src/components/graph/selectionToolbox/BypassButton.test.ts
@@ -6,14 +6,14 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
 import BypassButton from '@/components/graph/selectionToolbox/BypassButton.vue'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { LGraphEventMode } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCommandStore } from '@/stores/commandStore'
+import { createMockLGraphNode } from '@/utils/__tests__/litegraphTestUtils'
 
-const mockLGraphNode = {
-  type: 'TestNode',
-  title: 'Test Node',
-  mode: LGraphEventMode.ALWAYS
+function getMockLGraphNode(): LGraphNode {
+  return createMockLGraphNode({ type: 'TestNode' })
 }
 
 vi.mock('@/utils/litegraphUtil', () => ({
@@ -59,21 +59,21 @@ describe('BypassButton', () => {
   }
 
   it('should render bypass button', () => {
-    canvasStore.selectedItems = [mockLGraphNode] as any
+    canvasStore.selectedItems = [getMockLGraphNode()]
     const wrapper = mountComponent()
     const button = wrapper.find('button')
     expect(button.exists()).toBe(true)
   })
 
   it('should have correct test id', () => {
-    canvasStore.selectedItems = [mockLGraphNode] as any
+    canvasStore.selectedItems = [getMockLGraphNode()]
     const wrapper = mountComponent()
     const button = wrapper.find('[data-testid="bypass-button"]')
     expect(button.exists()).toBe(true)
   })
 
   it('should execute bypass command when clicked', async () => {
-    canvasStore.selectedItems = [mockLGraphNode] as any
+    canvasStore.selectedItems = [getMockLGraphNode()]
     const executeSpy = vi.spyOn(commandStore, 'execute').mockResolvedValue()
 
     const wrapper = mountComponent()
@@ -85,8 +85,10 @@ describe('BypassButton', () => {
   })
 
   it('should show bypassed styling when node is bypassed', async () => {
-    const bypassedNode = { ...mockLGraphNode, mode: LGraphEventMode.BYPASS }
-    canvasStore.selectedItems = [bypassedNode] as any
+    const bypassedNode = Object.assign(getMockLGraphNode(), {
+      mode: LGraphEventMode.BYPASS
+    })
+    canvasStore.selectedItems = [bypassedNode]
     vi.spyOn(commandStore, 'execute').mockResolvedValue()
     const wrapper = mountComponent()
 
@@ -100,7 +102,7 @@ describe('BypassButton', () => {
 
   it('should handle multiple selected items', () => {
     vi.spyOn(commandStore, 'execute').mockResolvedValue()
-    canvasStore.selectedItems = [mockLGraphNode, mockLGraphNode] as any
+    canvasStore.selectedItems = [getMockLGraphNode(), getMockLGraphNode()]
     const wrapper = mountComponent()
     const button = wrapper.find('button')
     expect(button.exists()).toBe(true)
diff --git a/src/components/graph/selectionToolbox/ColorPickerButton.test.ts b/src/components/graph/selectionToolbox/ColorPickerButton.test.ts
index ccf07e8b9..cc4d7d690 100644
--- a/src/components/graph/selectionToolbox/ColorPickerButton.test.ts
+++ b/src/components/graph/selectionToolbox/ColorPickerButton.test.ts
@@ -1,3 +1,4 @@
+import type { Mock } from 'vitest'
 import { mount } from '@vue/test-utils'
 import { createPinia, setActivePinia } from 'pinia'
 import PrimeVue from 'primevue/config'
@@ -8,7 +9,20 @@ import { createI18n } from 'vue-i18n'
 // Import after mocks
 import ColorPickerButton from '@/components/graph/selectionToolbox/ColorPickerButton.vue'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import type { LoadedComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { createMockPositionable } from '@/utils/__tests__/litegraphTestUtils'
+
+function createMockWorkflow(
+  overrides: Partial<LoadedComfyWorkflow> = {}
+): LoadedComfyWorkflow {
+  return {
+    changeTracker: {
+      checkState: vi.fn() as Mock
+    },
+    ...overrides
+  } as Partial<LoadedComfyWorkflow> as LoadedComfyWorkflow
+}
 
 // Mock the litegraph module
 vi.mock('@/lib/litegraph/src/litegraph', async () => {
@@ -70,11 +84,7 @@ describe('ColorPickerButton', () => {
     canvasStore.selectedItems = []
 
     // Mock workflow store
-    workflowStore.activeWorkflow = {
-      changeTracker: {
-        checkState: vi.fn()
-      }
-    } as any
+    workflowStore.activeWorkflow = createMockWorkflow()
   })
 
   const createWrapper = () => {
@@ -90,13 +100,13 @@ describe('ColorPickerButton', () => {
 
   it('should render when nodes are selected', () => {
     // Add a mock node to selectedItems
-    canvasStore.selectedItems = [{ type: 'LGraphNode' } as any]
+    canvasStore.selectedItems = [createMockPositionable()]
     const wrapper = createWrapper()
     expect(wrapper.find('button').exists()).toBe(true)
   })
 
   it('should toggle color picker visibility on button click', async () => {
-    canvasStore.selectedItems = [{ type: 'LGraphNode' } as any]
+    canvasStore.selectedItems = [createMockPositionable()]
     const wrapper = createWrapper()
     const button = wrapper.find('button')
 
diff --git a/src/components/graph/selectionToolbox/ExecuteButton.test.ts b/src/components/graph/selectionToolbox/ExecuteButton.test.ts
index b75977b43..6fe236d5b 100644
--- a/src/components/graph/selectionToolbox/ExecuteButton.test.ts
+++ b/src/components/graph/selectionToolbox/ExecuteButton.test.ts
@@ -1,23 +1,16 @@
 import { mount } from '@vue/test-utils'
-import { createPinia, setActivePinia } from 'pinia'
+import { createTestingPinia } from '@pinia/testing'
+import { setActivePinia } from 'pinia'
 import PrimeVue from 'primevue/config'
 import Tooltip from 'primevue/tooltip'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
 import ExecuteButton from '@/components/graph/selectionToolbox/ExecuteButton.vue'
+import type { LGraphCanvas, LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCommandStore } from '@/stores/commandStore'
 
-// Mock the stores
-vi.mock('@/renderer/core/canvas/canvasStore', () => ({
-  useCanvasStore: vi.fn()
-}))
-
-vi.mock('@/stores/commandStore', () => ({
-  useCommandStore: vi.fn()
-}))
-
 // Mock the utils
 vi.mock('@/utils/litegraphUtil', () => ({
   isLGraphNode: vi.fn((node) => !!node?.type)
@@ -37,10 +30,8 @@ vi.mock('@/composables/graph/useSelectionState', () => ({
 }))
 
 describe('ExecuteButton', () => {
-  let mockCanvas: any
-  let mockCanvasStore: any
-  let mockCommandStore: any
-  let mockSelectedNodes: any[]
+  let mockCanvas: LGraphCanvas
+  let mockSelectedNodes: LGraphNode[]
 
   const i18n = createI18n({
     legacy: false,
@@ -57,27 +48,27 @@ describe('ExecuteButton', () => {
   })
 
   beforeEach(async () => {
-    setActivePinia(createPinia())
+    // Set up Pinia with testing utilities
+    setActivePinia(
+      createTestingPinia({
+        createSpy: vi.fn
+      })
+    )
 
     // Reset mocks
-    mockCanvas = {
+    const partialCanvas: Partial<LGraphCanvas> = {
       setDirty: vi.fn()
     }
+    mockCanvas = partialCanvas as Partial<LGraphCanvas> as LGraphCanvas
 
     mockSelectedNodes = []
 
-    mockCanvasStore = {
-      getCanvas: vi.fn(() => mockCanvas),
-      selectedItems: []
-    }
+    // Get store instances and mock methods
+    const canvasStore = useCanvasStore()
+    const commandStore = useCommandStore()
 
-    mockCommandStore = {
-      execute: vi.fn()
-    }
-
-    // Setup store mocks
-    vi.mocked(useCanvasStore).mockReturnValue(mockCanvasStore as any)
-    vi.mocked(useCommandStore).mockReturnValue(mockCommandStore as any)
+    vi.spyOn(canvasStore, 'getCanvas').mockReturnValue(mockCanvas)
+    vi.spyOn(commandStore, 'execute').mockResolvedValue()
 
     // Update the useSelectionState mock
     const { useSelectionState } = vi.mocked(
@@ -87,7 +78,7 @@ describe('ExecuteButton', () => {
       selectedNodes: {
         value: mockSelectedNodes
       }
-    } as any)
+    } as ReturnType<typeof useSelectionState>)
 
     vi.clearAllMocks()
   })
@@ -114,15 +105,16 @@ describe('ExecuteButton', () => {
 
   describe('Click Handler', () => {
     it('should execute Comfy.QueueSelectedOutputNodes command on click', async () => {
+      const commandStore = useCommandStore()
       const wrapper = mountComponent()
       const button = wrapper.find('button')
 
       await button.trigger('click')
 
-      expect(mockCommandStore.execute).toHaveBeenCalledWith(
+      expect(commandStore.execute).toHaveBeenCalledWith(
         'Comfy.QueueSelectedOutputNodes'
       )
-      expect(mockCommandStore.execute).toHaveBeenCalledTimes(1)
+      expect(commandStore.execute).toHaveBeenCalledTimes(1)
     })
   })
 })
diff --git a/src/components/queue/QueueProgressOverlay.vue b/src/components/queue/QueueProgressOverlay.vue
index d6b3edcd8..626709593 100644
--- a/src/components/queue/QueueProgressOverlay.vue
+++ b/src/components/queue/QueueProgressOverlay.vue
@@ -200,7 +200,13 @@ const onCancelItem = wrapWithErrorHandlingAsync(async (item: JobListItem) => {
 
   if (item.state === 'running' || item.state === 'initialization') {
     // Running/initializing jobs: interrupt execution
-    await api.interrupt(promptId)
+    // Cloud backend uses deleteItem, local uses interrupt
+    if (isCloud) {
+      await api.deleteItem('queue', promptId)
+    } else {
+      await api.interrupt(promptId)
+    }
+    executionStore.clearInitializationByPromptId(promptId)
     await queueStore.update()
   } else if (item.state === 'pending') {
     // Pending jobs: remove from queue
@@ -268,7 +274,15 @@ const inspectJobAsset = wrapWithErrorHandlingAsync(
 )
 
 const cancelQueuedWorkflows = wrapWithErrorHandlingAsync(async () => {
+  // Capture pending promptIds before clearing
+  const pendingPromptIds = queueStore.pendingTasks
+    .map((task) => task.promptId)
+    .filter((id): id is string => typeof id === 'string' && id.length > 0)
+
   await commandStore.execute('Comfy.ClearPendingTasks')
+
+  // Clear initialization state for removed prompts
+  executionStore.clearInitializationByPromptIds(pendingPromptIds)
 })
 
 const interruptAll = wrapWithErrorHandlingAsync(async () => {
@@ -284,10 +298,14 @@ const interruptAll = wrapWithErrorHandlingAsync(async () => {
   // on cloud to ensure we cancel the workflow the user clicked.
   if (isCloud) {
     await Promise.all(promptIds.map((id) => api.deleteItem('queue', id)))
+    executionStore.clearInitializationByPromptIds(promptIds)
+    await queueStore.update()
     return
   }
 
   await Promise.all(promptIds.map((id) => api.interrupt(id)))
+  executionStore.clearInitializationByPromptIds(promptIds)
+  await queueStore.update()
 })
 
 const showClearHistoryDialog = () => {
diff --git a/src/components/rightSidePanel/layout/PropertiesAccordionItem.vue b/src/components/rightSidePanel/layout/PropertiesAccordionItem.vue
index d3ee425dd..0b1b88820 100644
--- a/src/components/rightSidePanel/layout/PropertiesAccordionItem.vue
+++ b/src/components/rightSidePanel/layout/PropertiesAccordionItem.vue
@@ -5,25 +5,32 @@ import { cn } from '@/utils/tailwindUtil'
 
 import TransitionCollapse from './TransitionCollapse.vue'
 
-const props = defineProps<{
+const {
+  disabled,
+  label,
+  enableEmptyState,
+  tooltip,
+  class: className
+} = defineProps<{
   disabled?: boolean
   label?: string
   enableEmptyState?: boolean
   tooltip?: string
+  class?: string
 }>()
 
 const isCollapse = defineModel<boolean>('collapse', { default: false })
 
-const isExpanded = computed(() => !isCollapse.value && !props.disabled)
+const isExpanded = computed(() => !isCollapse.value && !disabled)
 
 const tooltipConfig = computed(() => {
-  if (!props.tooltip) return undefined
-  return { value: props.tooltip, showDelay: 1000 }
+  if (!tooltip) return undefined
+  return { value: tooltip, showDelay: 1000 }
 })
 </script>
 
 <template>
-  <div class="flex flex-col bg-comfy-menu-bg">
+  <div :class="cn('flex flex-col bg-comfy-menu-bg', className)">
     <div
       class="sticky top-0 z-10 flex items-center justify-between backdrop-blur-xl bg-inherit"
     >
diff --git a/src/components/rightSidePanel/parameters/TabNodes.vue b/src/components/rightSidePanel/parameters/TabNodes.vue
index ab5deb1a9..1d59f5720 100644
--- a/src/components/rightSidePanel/parameters/TabNodes.vue
+++ b/src/components/rightSidePanel/parameters/TabNodes.vue
@@ -8,7 +8,7 @@ import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import FormSearchInput from '@/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.vue'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 
-import { searchWidgetsAndNodes } from '../shared'
+import { computedSectionDataList, searchWidgetsAndNodes } from '../shared'
 import type { NodeWidgetsListList } from '../shared'
 import SectionWidgets from './SectionWidgets.vue'
 
@@ -24,18 +24,7 @@ const nodes = computed((): LGraphNode[] => {
 const rightSidePanelStore = useRightSidePanelStore()
 const { searchQuery } = storeToRefs(rightSidePanelStore)
 
-const widgetsSectionDataList = computed((): NodeWidgetsListList => {
-  return nodes.value.map((node) => {
-    const { widgets = [] } = node
-    const shownWidgets = widgets
-      .filter((w) => !(w.options?.canvasOnly || w.options?.hidden))
-      .map((widget) => ({ node, widget }))
-    return {
-      widgets: shownWidgets,
-      node
-    }
-  })
-})
+const { widgetsSectionDataList } = computedSectionDataList(nodes)
 
 const searchedWidgetsSectionDataList = shallowRef<NodeWidgetsListList>(
   widgetsSectionDataList.value
diff --git a/src/components/rightSidePanel/parameters/TabNormalInputs.vue b/src/components/rightSidePanel/parameters/TabNormalInputs.vue
index 30689f1a4..7f63a766a 100644
--- a/src/components/rightSidePanel/parameters/TabNormalInputs.vue
+++ b/src/components/rightSidePanel/parameters/TabNormalInputs.vue
@@ -7,7 +7,7 @@ import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import FormSearchInput from '@/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.vue'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 
-import { searchWidgetsAndNodes } from '../shared'
+import { computedSectionDataList, searchWidgetsAndNodes } from '../shared'
 import type { NodeWidgetsListList } from '../shared'
 import SectionWidgets from './SectionWidgets.vue'
 
@@ -21,15 +21,26 @@ const { t } = useI18n()
 const rightSidePanelStore = useRightSidePanelStore()
 const { searchQuery } = storeToRefs(rightSidePanelStore)
 
-const widgetsSectionDataList = computed((): NodeWidgetsListList => {
-  return nodes.map((node) => {
-    const { widgets = [] } = node
-    const shownWidgets = widgets
-      .filter((w) => !(w.options?.canvasOnly || w.options?.hidden))
-      .map((widget) => ({ node, widget }))
+const { widgetsSectionDataList, includesAdvanced } = computedSectionDataList(
+  () => nodes
+)
 
-    return { widgets: shownWidgets, node }
-  })
+const advancedWidgetsSectionDataList = computed((): NodeWidgetsListList => {
+  if (includesAdvanced.value) {
+    return []
+  }
+  return nodes
+    .map((node) => {
+      const { widgets = [] } = node
+      const advancedWidgets = widgets
+        .filter(
+          (w) =>
+            !(w.options?.canvasOnly || w.options?.hidden) && w.options?.advanced
+        )
+        .map((widget) => ({ node, widget }))
+      return { widgets: advancedWidgets, node }
+    })
+    .filter(({ widgets }) => widgets.length > 0)
 })
 
 const isMultipleNodesSelected = computed(
@@ -56,6 +67,12 @@ const label = computed(() => {
       : t('rightSidePanel.inputsNone')
     : undefined // SectionWidgets display node titles by default
 })
+
+const advancedLabel = computed(() => {
+  return !mustShowNodeTitle && !isMultipleNodesSelected.value
+    ? t('rightSidePanel.advancedInputs')
+    : undefined // SectionWidgets display node titles by default
+})
 </script>
 
 <template>
@@ -93,4 +110,16 @@ const label = computed(() => {
       class="border-b border-interface-stroke"
     />
   </TransitionGroup>
+  <template v-if="advancedWidgetsSectionDataList.length > 0 && !isSearching">
+    <SectionWidgets
+      v-for="{ widgets, node } in advancedWidgetsSectionDataList"
+      :key="`advanced-${node.id}`"
+      :collapse="true"
+      :node
+      :label="advancedLabel"
+      :widgets
+      :show-locate-button="isMultipleNodesSelected"
+      class="border-b border-interface-stroke"
+    />
+  </template>
 </template>
diff --git a/src/components/rightSidePanel/parameters/WidgetItem.vue b/src/components/rightSidePanel/parameters/WidgetItem.vue
index 85069f890..6a2eca748 100644
--- a/src/components/rightSidePanel/parameters/WidgetItem.vue
+++ b/src/components/rightSidePanel/parameters/WidgetItem.vue
@@ -43,7 +43,7 @@ const favoritedWidgetsStore = useFavoritedWidgetsStore()
 const isEditing = ref(false)
 
 const widgetComponent = computed(() => {
-  const component = getComponent(widget.type, widget.name)
+  const component = getComponent(widget.type)
   return component || WidgetLegacy
 })
 
diff --git a/src/components/rightSidePanel/settings/LayoutField.vue b/src/components/rightSidePanel/settings/LayoutField.vue
index 7596b00ed..e8e4e12b5 100644
--- a/src/components/rightSidePanel/settings/LayoutField.vue
+++ b/src/components/rightSidePanel/settings/LayoutField.vue
@@ -25,13 +25,18 @@ defineProps<{
       "
       :class="
         cn(
-          'text-sm text-muted-foreground truncate',
+          'text-sm text-muted-foreground truncate group',
           tooltip ? 'cursor-help' : '',
           singleline ? 'flex-1' : ''
         )
       "
     >
       {{ label }}
+
+      <i
+        v-if="tooltip"
+        class="icon-[lucide--info] ml-0.5 size-3 relative top-[1px] group-hover:text-primary"
+      />
     </span>
     <slot />
   </div>
diff --git a/src/components/rightSidePanel/settings/TabGlobalSettings.vue b/src/components/rightSidePanel/settings/TabGlobalSettings.vue
index d283c2e41..ec291cd98 100644
--- a/src/components/rightSidePanel/settings/TabGlobalSettings.vue
+++ b/src/components/rightSidePanel/settings/TabGlobalSettings.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import InputNumber from 'primevue/inputnumber'
 import Select from 'primevue/select'
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
@@ -23,7 +23,11 @@ const settingStore = useSettingStore()
 const dialogService = useDialogService()
 
 // NODES settings
-const showAdvancedParameters = ref(false) // Placeholder for future implementation
+const showAdvancedParameters = computed({
+  get: () => settingStore.get('Comfy.Node.AlwaysShowAdvancedWidgets'),
+  set: (value) =>
+    settingStore.set('Comfy.Node.AlwaysShowAdvancedWidgets', value)
+})
 
 const showToolbox = computed({
   get: () => settingStore.get('Comfy.Canvas.SelectionToolbox'),
@@ -103,15 +107,17 @@ function openFullSettings() {
         <FieldSwitch
           v-model="showAdvancedParameters"
           :label="t('rightSidePanel.globalSettings.showAdvanced')"
-          :tooltip="t('rightSidePanel.globalSettings.showAdvancedTooltip')"
+          :tooltip="t('settings.Comfy_Node_AlwaysShowAdvancedWidgets.tooltip')"
         />
         <FieldSwitch
           v-model="showToolbox"
           :label="t('rightSidePanel.globalSettings.showToolbox')"
+          :tooltip="t('settings.Comfy_Canvas_SelectionToolbox.tooltip')"
         />
         <FieldSwitch
           v-model="nodes2Enabled"
           :label="t('rightSidePanel.globalSettings.nodes2')"
+          :tooltip="t('settings.Comfy_VueNodes_Enabled.tooltip')"
         />
       </div>
     </PropertiesAccordionItem>
@@ -152,6 +158,7 @@ function openFullSettings() {
         <FieldSwitch
           v-model="snapToGrid"
           :label="t('rightSidePanel.globalSettings.snapNodesToGrid')"
+          :tooltip="t('settings.pysssss_SnapToGrid.tooltip')"
         />
       </div>
     </PropertiesAccordionItem>
@@ -183,6 +190,7 @@ function openFullSettings() {
         <FieldSwitch
           v-model="showConnectedLinks"
           :label="t('rightSidePanel.globalSettings.showConnectedLinks')"
+          :tooltip="t('settings.Comfy_LinkRenderMode.tooltip')"
         />
       </div>
     </PropertiesAccordionItem>
diff --git a/src/components/rightSidePanel/shared.test.ts b/src/components/rightSidePanel/shared.test.ts
index 02be8e293..37a8f3aeb 100644
--- a/src/components/rightSidePanel/shared.test.ts
+++ b/src/components/rightSidePanel/shared.test.ts
@@ -38,10 +38,22 @@ describe('searchWidgets', () => {
 
     expect(searchWidgets(widgets, 'width')).toHaveLength(1)
     expect(searchWidgets(widgets, 'slider')).toHaveLength(1)
-    expect(searchWidgets(widgets, 'high')).toHaveLength(1)
     expect(searchWidgets(widgets, 'image')).toHaveLength(1)
   })
 
+  it('should support fuzzy matching (e.g., "high" matches both "height" and value "high")', () => {
+    const widgets = [
+      createWidget('width', 'number', '100', 'Size Control'),
+      createWidget('height', 'slider', '200', 'Image Height'),
+      createWidget('quality', 'text', 'high', 'Quality')
+    ]
+
+    const results = searchWidgets(widgets, 'high')
+    expect(results).toHaveLength(2)
+    expect(results.some((r) => r.widget.name === 'height')).toBe(true)
+    expect(results.some((r) => r.widget.name === 'quality')).toBe(true)
+  })
+
   it('should handle multiple search words', () => {
     const widgets = [
       createWidget('width', 'number', '100', 'Image Width'),
diff --git a/src/components/rightSidePanel/shared.ts b/src/components/rightSidePanel/shared.ts
index 8c802eed9..0d70d6d34 100644
--- a/src/components/rightSidePanel/shared.ts
+++ b/src/components/rightSidePanel/shared.ts
@@ -1,11 +1,14 @@
 import type { InjectionKey, MaybeRefOrGetter } from 'vue'
 import { computed, toValue } from 'vue'
+import Fuse from 'fuse.js'
+import type { IFuseOptions } from 'fuse.js'
 
 import type { Positionable } from '@/lib/litegraph/src/interfaces'
 import type { LGraphGroup } from '@/lib/litegraph/src/LGraphGroup'
-import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import type { LGraphNode, NodeId } from '@/lib/litegraph/src/LGraphNode'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { isLGraphGroup, isLGraphNode } from '@/utils/litegraphUtil'
+import { useSettingStore } from '@/platform/settings/settingStore'
 
 export const GetNodeParentGroupKey: InjectionKey<
   (node: LGraphNode) => LGraphGroup | null
@@ -17,10 +20,18 @@ export type NodeWidgetsListList = Array<{
   widgets: NodeWidgetsList
 }>
 
+interface WidgetSearchItem {
+  index: number
+  searchableLabel: string
+  searchableName: string
+  searchableType: string
+  searchableValue: string
+}
+
 /**
- * Searches widgets in a list and returns search results.
+ * Searches widgets in a list using fuzzy search and returns search results.
+ * Uses Fuse.js for better matching with typo tolerance and relevance ranking.
  * Filters by name, localized label, type, and user-input value.
- * Performs basic tokenization of the query string.
  */
 export function searchWidgets<T extends { widget: IBaseWidget }[]>(
   list: T,
@@ -29,27 +40,48 @@ export function searchWidgets<T extends { widget: IBaseWidget }[]>(
   if (query.trim() === '') {
     return list
   }
-  const words = query.trim().toLowerCase().split(' ')
-  return list.filter(({ widget }) => {
-    const label = widget.label?.toLowerCase()
-    const name = widget.name.toLowerCase()
-    const type = widget.type.toLowerCase()
-    const value = widget.value?.toString().toLowerCase()
-    return words.every(
-      (word) =>
-        name.includes(word) ||
-        label?.includes(word) ||
-        type?.includes(word) ||
-        value?.includes(word)
-    )
-  }) as T
+
+  const searchableList: WidgetSearchItem[] = list.map((item, index) => {
+    const searchableItem = {
+      index,
+      searchableLabel: item.widget.label?.toLowerCase() || '',
+      searchableName: item.widget.name.toLowerCase(),
+      searchableType: item.widget.type.toLowerCase(),
+      searchableValue: item.widget.value?.toString().toLowerCase() || ''
+    }
+    return searchableItem
+  })
+
+  const fuseOptions: IFuseOptions<WidgetSearchItem> = {
+    keys: [
+      { name: 'searchableName', weight: 0.4 },
+      { name: 'searchableLabel', weight: 0.3 },
+      { name: 'searchableValue', weight: 0.3 },
+      { name: 'searchableType', weight: 0.2 }
+    ],
+    threshold: 0.3
+  }
+
+  const fuse = new Fuse(searchableList, fuseOptions)
+  const results = fuse.search(query.trim())
+
+  const matchedItems = new Set(
+    results.map((result) => list[result.item.index]!)
+  )
+
+  return list.filter((item) => matchedItems.has(item)) as T
+}
+
+type NodeSearchItem = {
+  nodeId: NodeId
+  searchableTitle: string
 }
 
 /**
- * Searches widgets and nodes in a list and returns search results.
+ * Searches widgets and nodes in a list using fuzzy search and returns search results.
+ * Uses Fuse.js for node title matching with typo tolerance and relevance ranking.
  * First checks if the node title matches the query (if so, keeps entire node).
  * Otherwise, filters widgets using searchWidgets.
- * Performs basic tokenization of the query string.
  */
 export function searchWidgetsAndNodes(
   list: NodeWidgetsListList,
@@ -58,12 +90,26 @@ export function searchWidgetsAndNodes(
   if (query.trim() === '') {
     return list
   }
-  const words = query.trim().toLowerCase().split(' ')
+
+  const searchableList: NodeSearchItem[] = list.map((item) => ({
+    nodeId: item.node.id,
+    searchableTitle: (item.node.getTitle() ?? '').toLowerCase()
+  }))
+
+  const fuseOptions: IFuseOptions<NodeSearchItem> = {
+    keys: [{ name: 'searchableTitle', weight: 1.0 }],
+    threshold: 0.3
+  }
+
+  const fuse = new Fuse(searchableList, fuseOptions)
+  const nodeMatches = fuse.search(query.trim())
+  const matchedNodeIds = new Set(
+    nodeMatches.map((result) => result.item.nodeId)
+  )
+
   return list
     .map((item) => {
-      const { node } = item
-      const title = node.getTitle().toLowerCase()
-      if (words.every((word) => title.includes(word))) {
+      if (matchedNodeIds.has(item.node.id)) {
         return { ...item, keep: true }
       }
       return {
@@ -203,3 +249,33 @@ function repeatItems<T>(items: T[]): T[] {
   }
   return result
 }
+
+export function computedSectionDataList(nodes: MaybeRefOrGetter<LGraphNode[]>) {
+  const settingStore = useSettingStore()
+
+  const includesAdvanced = computed(() =>
+    settingStore.get('Comfy.Node.AlwaysShowAdvancedWidgets')
+  )
+
+  const widgetsSectionDataList = computed((): NodeWidgetsListList => {
+    return toValue(nodes).map((node) => {
+      const { widgets = [] } = node
+      const shownWidgets = widgets
+        .filter(
+          (w) =>
+            !(
+              w.options?.canvasOnly ||
+              w.options?.hidden ||
+              (w.options?.advanced && !includesAdvanced.value)
+            )
+        )
+        .map((widget) => ({ node, widget }))
+      return { widgets: shownWidgets, node }
+    })
+  })
+
+  return {
+    widgetsSectionDataList,
+    includesAdvanced
+  }
+}
diff --git a/src/components/sidebar/ComfyMenuButton.vue b/src/components/sidebar/ComfyMenuButton.vue
index 6a7010a97..84b2bbfc6 100644
--- a/src/components/sidebar/ComfyMenuButton.vue
+++ b/src/components/sidebar/ComfyMenuButton.vue
@@ -219,7 +219,7 @@ const extraMenuItems = computed(() => [
   {
     key: 'settings',
     label: t('g.settings'),
-    icon: 'mdi mdi-cog-outline',
+    icon: 'icon-[lucide--settings]',
     command: () => {
       telemetry?.trackUiButtonClicked({
         button_id: 'sidebar_settings_menu_opened'
@@ -230,7 +230,7 @@ const extraMenuItems = computed(() => [
   {
     key: 'manage-extensions',
     label: t('menu.manageExtensions'),
-    icon: 'mdi mdi-puzzle-outline',
+    icon: 'icon-[lucide--puzzle]',
     command: showManageExtensions
   }
 ])
diff --git a/src/components/sidebar/ModeToggle.vue b/src/components/sidebar/ModeToggle.vue
index ca94be771..5ec675efe 100644
--- a/src/components/sidebar/ModeToggle.vue
+++ b/src/components/sidebar/ModeToggle.vue
@@ -5,22 +5,35 @@ import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCommandStore } from '@/stores/commandStore'
 
 const canvasStore = useCanvasStore()
+function toggleLinearMode() {
+  useCommandStore().execute('Comfy.ToggleLinear', {
+    metadata: { source: 'button' }
+  })
+}
 </script>
 <template>
   <div class="p-1 bg-secondary-background rounded-lg w-10">
     <Button
+      v-tooltip="{
+        value: t('linearMode.linearMode'),
+        showDelay: 300,
+        hideDelay: 300
+      }"
       size="icon"
-      :title="t('linearMode.linearMode')"
       :variant="canvasStore.linearMode ? 'inverted' : 'secondary'"
-      @click="useCommandStore().execute('Comfy.ToggleLinear')"
+      @click="toggleLinearMode"
     >
       <i class="icon-[lucide--panels-top-left]" />
     </Button>
     <Button
+      v-tooltip="{
+        value: t('linearMode.graphMode'),
+        showDelay: 300,
+        hideDelay: 300
+      }"
       size="icon"
-      :title="t('linearMode.graphMode')"
       :variant="canvasStore.linearMode ? 'secondary' : 'inverted'"
-      @click="useCommandStore().execute('Comfy.ToggleLinear')"
+      @click="toggleLinearMode"
     >
       <i class="icon-[comfy--workflow]" />
     </Button>
diff --git a/src/components/sidebar/SidebarHelpCenterIcon.vue b/src/components/sidebar/SidebarHelpCenterIcon.vue
index b140a1c53..fda233018 100644
--- a/src/components/sidebar/SidebarHelpCenterIcon.vue
+++ b/src/components/sidebar/SidebarHelpCenterIcon.vue
@@ -5,6 +5,7 @@
     :label="$t('menu.help')"
     :tooltip="$t('sideToolbar.helpCenter')"
     :icon-badge="shouldShowRedDot ? '•' : ''"
+    badge-class="-top-1 -right-1 min-w-2 w-2 h-2 p-0 rounded-full text-[0px] bg-[#ff3b30]"
     :is-small="isSmall"
     @click="toggleHelpCenter"
   />
@@ -21,24 +22,3 @@ defineProps<{
 
 const { shouldShowRedDot, toggleHelpCenter } = useHelpCenter()
 </script>
-
-<style scoped>
-:deep(.p-badge) {
-  background: #ff3b30;
-  color: #ff3b30;
-  min-width: 8px;
-  height: 8px;
-  padding: 0;
-  border-radius: 9999px;
-  font-size: 0;
-  margin-top: 4px;
-  margin-right: 4px;
-  border: none;
-  outline: none;
-  box-shadow: none;
-}
-
-:deep(.p-badge.p-badge-dot) {
-  width: 8px !important;
-}
-</style>
diff --git a/src/components/sidebar/SidebarIcon.test.ts b/src/components/sidebar/SidebarIcon.test.ts
index 7564e7bcd..284a29825 100644
--- a/src/components/sidebar/SidebarIcon.test.ts
+++ b/src/components/sidebar/SidebarIcon.test.ts
@@ -1,6 +1,5 @@
 import { mount } from '@vue/test-utils'
 import PrimeVue from 'primevue/config'
-import OverlayBadge from 'primevue/overlaybadge'
 import Tooltip from 'primevue/tooltip'
 import { describe, expect, it } from 'vitest'
 import { createI18n } from 'vue-i18n'
@@ -33,8 +32,7 @@ describe('SidebarIcon', () => {
     return mount(SidebarIcon, {
       global: {
         plugins: [PrimeVue, i18n],
-        directives: { tooltip: Tooltip },
-        components: { OverlayBadge }
+        directives: { tooltip: Tooltip }
       },
       props: { ...exampleProps, ...props },
       ...options
@@ -54,9 +52,9 @@ describe('SidebarIcon', () => {
   it('creates badge when iconBadge prop is set', () => {
     const badge = '2'
     const wrapper = mountSidebarIcon({ iconBadge: badge })
-    const badgeEl = wrapper.findComponent(OverlayBadge)
+    const badgeEl = wrapper.find('.sidebar-icon-badge')
     expect(badgeEl.exists()).toBe(true)
-    expect(badgeEl.find('.p-badge').text()).toEqual(badge)
+    expect(badgeEl.text()).toEqual(badge)
   })
 
   it('shows tooltip on hover', async () => {
diff --git a/src/components/sidebar/SidebarIcon.vue b/src/components/sidebar/SidebarIcon.vue
index 88900c1a7..10dfca8f8 100644
--- a/src/components/sidebar/SidebarIcon.vue
+++ b/src/components/sidebar/SidebarIcon.vue
@@ -17,22 +17,28 @@
   >
     <div class="side-bar-button-content">
       <slot name="icon">
-        <OverlayBadge v-if="shouldShowBadge" :value="overlayValue">
+        <div class="sidebar-icon-wrapper relative">
           <i
             v-if="typeof icon === 'string'"
             :class="icon + ' side-bar-button-icon'"
           />
-          <component :is="icon" v-else class="side-bar-button-icon" />
-        </OverlayBadge>
-        <i
-          v-else-if="typeof icon === 'string'"
-          :class="icon + ' side-bar-button-icon'"
-        />
-        <component
-          :is="icon"
-          v-else-if="typeof icon === 'object'"
-          class="side-bar-button-icon"
-        />
+          <component
+            :is="icon"
+            v-else-if="typeof icon === 'object'"
+            class="side-bar-button-icon"
+          />
+          <span
+            v-if="shouldShowBadge"
+            :class="
+              cn(
+                'sidebar-icon-badge absolute min-w-[16px] rounded-full bg-primary-background py-0.25 text-[10px] font-medium leading-[14px] text-base-foreground',
+                badgeClass || '-top-1 -right-1'
+              )
+            "
+          >
+            {{ overlayValue }}
+          </span>
+        </div>
       </slot>
       <span v-if="label && !isSmall" class="side-bar-button-label">{{
         t(label)
@@ -42,7 +48,6 @@
 </template>
 
 <script setup lang="ts">
-import OverlayBadge from 'primevue/overlaybadge'
 import { computed } from 'vue'
 import type { Component } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -57,6 +62,7 @@ const {
   tooltip = '',
   tooltipSuffix = '',
   iconBadge = '',
+  badgeClass = '',
   label = '',
   isSmall = false
 } = defineProps<{
@@ -65,6 +71,7 @@ const {
   tooltip?: string
   tooltipSuffix?: string
   iconBadge?: string | (() => string | null)
+  badgeClass?: string
   label?: string
   isSmall?: boolean
 }>()
diff --git a/src/components/sidebar/tabs/AssetsSidebarGridView.vue b/src/components/sidebar/tabs/AssetsSidebarGridView.vue
new file mode 100644
index 000000000..f57f0b1f8
--- /dev/null
+++ b/src/components/sidebar/tabs/AssetsSidebarGridView.vue
@@ -0,0 +1,113 @@
+<template>
+  <div class="flex h-full flex-col">
+    <!-- Active Jobs Grid -->
+    <div
+      v-if="activeJobItems.length"
+      class="grid max-h-[50%] scrollbar-custom overflow-y-auto"
+      :style="gridStyle"
+    >
+      <ActiveMediaAssetCard
+        v-for="job in activeJobItems"
+        :key="job.id"
+        :job="job"
+      />
+    </div>
+
+    <!-- Assets Header -->
+    <div
+      v-if="assets.length"
+      :class="cn('px-2 2xl:px-4', activeJobItems.length && 'mt-2')"
+    >
+      <div
+        class="flex items-center py-2 text-sm font-normal leading-normal text-muted-foreground font-inter"
+      >
+        {{
+          t(
+            assetType === 'input'
+              ? 'sideToolbar.importedAssetsHeader'
+              : 'sideToolbar.generatedAssetsHeader'
+          )
+        }}
+      </div>
+    </div>
+
+    <!-- Assets Grid -->
+    <VirtualGrid
+      class="flex-1"
+      :items="assetItems"
+      :grid-style="gridStyle"
+      @approach-end="emit('approach-end')"
+    >
+      <template #item="{ item }">
+        <MediaAssetCard
+          :asset="item.asset"
+          :selected="isSelected(item.asset.id)"
+          :show-output-count="showOutputCount(item.asset)"
+          :output-count="getOutputCount(item.asset)"
+          @click="emit('select-asset', item.asset)"
+          @context-menu="emit('context-menu', $event, item.asset)"
+          @zoom="emit('zoom', item.asset)"
+          @output-count-click="emit('output-count-click', item.asset)"
+        />
+      </template>
+    </VirtualGrid>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import VirtualGrid from '@/components/common/VirtualGrid.vue'
+import ActiveMediaAssetCard from '@/platform/assets/components/ActiveMediaAssetCard.vue'
+import { useJobList } from '@/composables/queue/useJobList'
+import MediaAssetCard from '@/platform/assets/components/MediaAssetCard.vue'
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import { isActiveJobState } from '@/utils/queueUtil'
+import { cn } from '@/utils/tailwindUtil'
+
+const {
+  assets,
+  isSelected,
+  assetType = 'output',
+  showOutputCount,
+  getOutputCount
+} = defineProps<{
+  assets: AssetItem[]
+  isSelected: (assetId: string) => boolean
+  assetType?: 'input' | 'output'
+  showOutputCount: (asset: AssetItem) => boolean
+  getOutputCount: (asset: AssetItem) => number
+}>()
+
+const emit = defineEmits<{
+  (e: 'select-asset', asset: AssetItem): void
+  (e: 'context-menu', event: MouseEvent, asset: AssetItem): void
+  (e: 'approach-end'): void
+  (e: 'zoom', asset: AssetItem): void
+  (e: 'output-count-click', asset: AssetItem): void
+}>()
+
+const { t } = useI18n()
+const { jobItems } = useJobList()
+
+type AssetGridItem = { key: string; asset: AssetItem }
+
+const activeJobItems = computed(() =>
+  jobItems.value.filter((item) => isActiveJobState(item.state))
+)
+
+const assetItems = computed<AssetGridItem[]>(() =>
+  assets.map((asset) => ({
+    key: `asset-${asset.id}`,
+    asset
+  }))
+)
+
+const gridStyle = {
+  display: 'grid',
+  gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+  padding: '0 0.5rem',
+  gap: '0.5rem'
+}
+</script>
diff --git a/src/components/sidebar/tabs/AssetsSidebarListView.vue b/src/components/sidebar/tabs/AssetsSidebarListView.vue
index dd7982fc9..b39d982a5 100644
--- a/src/components/sidebar/tabs/AssetsSidebarListView.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarListView.vue
@@ -2,7 +2,7 @@
   <div class="flex h-full flex-col">
     <div
       v-if="activeJobItems.length"
-      class="flex max-h-[50%] flex-col gap-2 overflow-y-auto px-2"
+      class="flex max-h-[50%] scrollbar-custom flex-col gap-2 overflow-y-auto px-2"
     >
       <AssetsListItem
         v-for="job in activeJobItems"
@@ -44,9 +44,15 @@
       :class="cn('px-2', activeJobItems.length && 'mt-2')"
     >
       <div
-        class="flex items-center py-2 text-sm font-normal leading-normal text-muted-foreground font-inter"
+        class="flex items-center p-2 text-sm font-normal leading-normal text-muted-foreground font-inter"
       >
-        {{ t('sideToolbar.generatedAssetsHeader') }}
+        {{
+          t(
+            assetType === 'input'
+              ? 'sideToolbar.importedAssetsHeader'
+              : 'sideToolbar.generatedAssetsHeader'
+          )
+        }}
       </div>
     </div>
 
@@ -108,7 +114,7 @@ import AssetsListItem from '@/platform/assets/components/AssetsListItem.vue'
 import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import { iconForMediaType } from '@/platform/assets/utils/mediaIconUtil'
-import type { JobState } from '@/types/queue'
+import { isActiveJobState } from '@/utils/queueUtil'
 import {
   formatDuration,
   formatSize,
@@ -118,9 +124,14 @@ import {
 import { iconForJobState } from '@/utils/queueDisplay'
 import { cn } from '@/utils/tailwindUtil'
 
-const { assets, isSelected } = defineProps<{
+const {
+  assets,
+  isSelected,
+  assetType = 'output'
+} = defineProps<{
   assets: AssetItem[]
   isSelected: (assetId: string) => boolean
+  assetType?: 'input' | 'output'
 }>()
 
 const emit = defineEmits<{
@@ -161,12 +172,6 @@ const listGridStyle = {
   gap: '0.5rem'
 }
 
-function isActiveJobState(state: JobState): boolean {
-  return (
-    state === 'pending' || state === 'initialization' || state === 'running'
-  )
-}
-
 function getAssetPrimaryText(asset: AssetItem): string {
   return truncateFilename(asset.name)
 }
diff --git a/src/components/sidebar/tabs/AssetsSidebarTab.vue b/src/components/sidebar/tabs/AssetsSidebarTab.vue
index 341d41019..58b686516 100644
--- a/src/components/sidebar/tabs/AssetsSidebarTab.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarTab.vue
@@ -100,34 +100,24 @@
           v-if="isListView"
           :assets="displayAssets"
           :is-selected="isSelected"
+          :asset-type="activeTab"
           @select-asset="handleAssetSelect"
           @context-menu="handleAssetContextMenu"
           @approach-end="handleApproachEnd"
         />
-        <VirtualGrid
+        <AssetsSidebarGridView
           v-else
-          :items="mediaAssetsWithKey"
-          :grid-style="{
-            display: 'grid',
-            gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
-            padding: '0 0.5rem',
-            gap: '0.5rem'
-          }"
+          :assets="displayAssets"
+          :is-selected="isSelected"
+          :asset-type="activeTab"
+          :show-output-count="shouldShowOutputCount"
+          :get-output-count="getOutputCount"
+          @select-asset="handleAssetSelect"
+          @context-menu="handleAssetContextMenu"
           @approach-end="handleApproachEnd"
-        >
-          <template #item="{ item }">
-            <MediaAssetCard
-              :asset="item"
-              :selected="isSelected(item.id)"
-              :show-output-count="shouldShowOutputCount(item)"
-              :output-count="getOutputCount(item)"
-              @click="handleAssetSelect(item)"
-              @context-menu="handleAssetContextMenu"
-              @zoom="handleZoomClick(item)"
-              @output-count-click="enterFolderView(item)"
-            />
-          </template>
-        </VirtualGrid>
+          @zoom="handleZoomClick"
+          @output-count-click="enterFolderView"
+        />
       </div>
     </template>
     <template #footer>
@@ -211,7 +201,13 @@
 </template>
 
 <script setup lang="ts">
-import { useDebounceFn, useElementHover, useResizeObserver } from '@vueuse/core'
+import {
+  useDebounceFn,
+  useElementHover,
+  useResizeObserver,
+  useStorage
+} from '@vueuse/core'
+import { storeToRefs } from 'pinia'
 import Divider from 'primevue/divider'
 import ProgressSpinner from 'primevue/progressspinner'
 import { useToast } from 'primevue/usetoast'
@@ -219,15 +215,14 @@ import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
-import VirtualGrid from '@/components/common/VirtualGrid.vue'
 import Load3dViewerContent from '@/components/load3d/Load3dViewerContent.vue'
+import AssetsSidebarGridView from '@/components/sidebar/tabs/AssetsSidebarGridView.vue'
 import AssetsSidebarListView from '@/components/sidebar/tabs/AssetsSidebarListView.vue'
 import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
 import ResultGallery from '@/components/sidebar/tabs/queue/ResultGallery.vue'
 import Tab from '@/components/tab/Tab.vue'
 import TabList from '@/components/tab/TabList.vue'
 import Button from '@/components/ui/button/Button.vue'
-import MediaAssetCard from '@/platform/assets/components/MediaAssetCard.vue'
 import MediaAssetContextMenu from '@/platform/assets/components/MediaAssetContextMenu.vue'
 import MediaAssetFilterBar from '@/platform/assets/components/MediaAssetFilterBar.vue'
 import { getAssetType } from '@/platform/assets/composables/media/assetMappers'
@@ -243,6 +238,7 @@ import { useSettingStore } from '@/platform/settings/settingStore'
 import { getJobDetail } from '@/services/jobOutputCache'
 import { useCommandStore } from '@/stores/commandStore'
 import { useDialogStore } from '@/stores/dialogStore'
+import { useExecutionStore } from '@/stores/executionStore'
 import { ResultItemImpl, useQueueStore } from '@/stores/queueStore'
 import { formatDuration, getMediaTypeFromFilename } from '@/utils/formatUtil'
 import { cn } from '@/utils/tailwindUtil'
@@ -256,13 +252,18 @@ interface JobOutputItem {
 const { t, n } = useI18n()
 const commandStore = useCommandStore()
 const queueStore = useQueueStore()
+const { activeJobsCount } = storeToRefs(queueStore)
+const executionStore = useExecutionStore()
 const settingStore = useSettingStore()
 
 const activeTab = ref<'input' | 'output'>('output')
 const folderPromptId = ref<string | null>(null)
 const folderExecutionTime = ref<number | undefined>(undefined)
 const isInFolderView = computed(() => folderPromptId.value !== null)
-const viewMode = ref<'list' | 'grid'>('grid')
+const viewMode = useStorage<'list' | 'grid'>(
+  'Comfy.Assets.Sidebar.ViewMode',
+  'grid'
+)
 const isQueuePanelV2Enabled = computed(() =>
   settingStore.get('Comfy.Queue.QPOV2')
 )
@@ -301,9 +302,6 @@ const formattedExecutionTime = computed(() => {
 })
 
 const queuedCount = computed(() => queueStore.pendingTasks.length)
-const activeJobsCount = computed(
-  () => queueStore.pendingTasks.length + queueStore.runningTasks.length
-)
 const activeJobsLabel = computed(() => {
   const count = activeJobsCount.value
   return t(
@@ -404,14 +402,14 @@ const showLoadingState = computed(
   () =>
     loading.value &&
     displayAssets.value.length === 0 &&
-    (!isListView.value || activeJobsCount.value === 0)
+    activeJobsCount.value === 0
 )
 
 const showEmptyState = computed(
   () =>
     !loading.value &&
     displayAssets.value.length === 0 &&
-    (!isListView.value || activeJobsCount.value === 0)
+    activeJobsCount.value === 0
 )
 
 watch(displayAssets, (newAssets) => {
@@ -453,14 +451,6 @@ const galleryItems = computed(() => {
   })
 })
 
-// Add key property for VirtualGrid
-const mediaAssetsWithKey = computed(() => {
-  return displayAssets.value.map((asset) => ({
-    ...asset,
-    key: asset.id
-  }))
-})
-
 const refreshAssets = async () => {
   await currentAssets.value.fetchMediaList()
   if (error.value) {
@@ -510,7 +500,13 @@ const handleBulkDelete = async (assets: AssetItem[]) => {
 }
 
 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 handleBulkAddToWorkflow = async (assets: AssetItem[]) => {
diff --git a/src/components/sidebar/tabs/queue/ResultGallery.test.ts b/src/components/sidebar/tabs/queue/ResultGallery.test.ts
index 49b365a0d..6034d86e7 100644
--- a/src/components/sidebar/tabs/queue/ResultGallery.test.ts
+++ b/src/components/sidebar/tabs/queue/ResultGallery.test.ts
@@ -92,7 +92,7 @@ describe('ResultGallery', () => {
         }
       },
       props: {
-        allGalleryItems: mockGalleryItems as unknown as ResultItemImpl[],
+        allGalleryItems: mockGalleryItems as ResultItemImpl[],
         activeIndex: 0,
         ...props
       },
@@ -117,7 +117,10 @@ describe('ResultGallery', () => {
     const wrapper = mountGallery({ activeIndex: -1 })
 
     // Initially galleryVisible should be false
-    const vm: any = wrapper.vm
+    type GalleryVM = typeof wrapper.vm & {
+      galleryVisible: boolean
+    }
+    const vm = wrapper.vm as GalleryVM
     expect(vm.galleryVisible).toBe(false)
 
     // Change activeIndex
@@ -167,7 +170,11 @@ describe('ResultGallery', () => {
     expect(galleria.exists()).toBe(true)
 
     // Check that our PT props for positioning work correctly
-    const pt = galleria.props('pt') as any
+    interface GalleriaPT {
+      prevButton?: { style?: string }
+      nextButton?: { style?: string }
+    }
+    const pt = galleria.props('pt') as GalleriaPT
     expect(pt?.prevButton?.style).toContain('position: fixed')
     expect(pt?.nextButton?.style).toContain('position: fixed')
   })
diff --git a/src/components/templates/thumbnails/BaseThumbnail.test.ts b/src/components/templates/thumbnails/BaseThumbnail.test.ts
index ecb03df41..f1d8571ee 100644
--- a/src/components/templates/thumbnails/BaseThumbnail.test.ts
+++ b/src/components/templates/thumbnails/BaseThumbnail.test.ts
@@ -4,6 +4,10 @@ import { nextTick } from 'vue'
 
 import BaseThumbnail from '@/components/templates/thumbnails/BaseThumbnail.vue'
 
+type ComponentInstance = InstanceType<typeof BaseThumbnail> & {
+  error: boolean
+}
+
 vi.mock('@vueuse/core', () => ({
   useEventListener: vi.fn()
 }))
@@ -45,7 +49,7 @@ describe('BaseThumbnail', () => {
 
   it('shows error state when image fails to load', async () => {
     const wrapper = mountThumbnail()
-    const vm = wrapper.vm as any
+    const vm = wrapper.vm as ComponentInstance
 
     // Manually set error since useEventListener is mocked
     vm.error = true
diff --git a/src/components/topbar/CurrentUserButton.test.ts b/src/components/topbar/CurrentUserButton.test.ts
index db5349b49..c8e568291 100644
--- a/src/components/topbar/CurrentUserButton.test.ts
+++ b/src/components/topbar/CurrentUserButton.test.ts
@@ -25,7 +25,24 @@ vi.mock('firebase/auth', () => ({
 }))
 
 // Mock pinia
-vi.mock('pinia')
+vi.mock('pinia', () => ({
+  storeToRefs: vi.fn((store) => store)
+}))
+
+// Mock the useFeatureFlags composable
+vi.mock('@/composables/useFeatureFlags', () => ({
+  useFeatureFlags: vi.fn(() => ({
+    flags: { teamWorkspacesEnabled: false }
+  }))
+}))
+
+// Mock the useTeamWorkspaceStore
+vi.mock('@/platform/workspace/stores/teamWorkspaceStore', () => ({
+  useTeamWorkspaceStore: vi.fn(() => ({
+    workspaceName: { value: '' },
+    initState: { value: 'idle' }
+  }))
+}))
 
 // Mock the useCurrentUser composable
 vi.mock('@/composables/auth/useCurrentUser', () => ({
diff --git a/src/components/topbar/CurrentUserButton.vue b/src/components/topbar/CurrentUserButton.vue
index 151dfd405..85d587e91 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
@@ -12,13 +12,28 @@
         :class="
           cn(
             'flex items-center gap-1 rounded-full hover:bg-interface-button-hover-surface justify-center',
-            compact && 'size-full aspect-square'
+            compact && 'size-full '
           )
         "
       >
-        <UserAvatar :photo-url="photoURL" :class="compact && 'size-full'" />
+        <Skeleton
+          v-if="showWorkspaceSkeleton"
+          shape="circle"
+          width="32px"
+          height="32px"
+        />
+        <WorkspaceProfilePic
+          v-else-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" />
+        <i v-if="showArrow" class="icon-[lucide--chevron-down] size-4 px-1" />
       </div>
     </Button>
 
@@ -27,38 +42,77 @@
       :show-arrow="false"
       :pt="{
         root: {
-          class: 'rounded-lg'
+          class: 'rounded-lg w-80'
         }
       }"
     >
-      <CurrentUserPopover @close="closePopover" />
+      <!-- Workspace mode: workspace-aware popover (only when ready) -->
+      <CurrentUserPopoverWorkspace
+        v-if="teamWorkspacesEnabled && initState === 'ready'"
+        @close="closePopover"
+      />
+      <!-- Legacy mode: original popover -->
+      <CurrentUserPopover
+        v-else-if="!teamWorkspacesEnabled"
+        @close="closePopover"
+      />
     </Popover>
   </div>
 </template>
 
 <script setup lang="ts">
+import { storeToRefs } from 'pinia'
 import Popover from 'primevue/popover'
-import { computed, ref } from 'vue'
+import Skeleton from 'primevue/skeleton'
+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 { workspaceName: teamWorkspaceName, initState } = storeToRefs(
+  useTeamWorkspaceStore()
+)
+
+const showWorkspaceSkeleton = computed(
+  () => isCloud && teamWorkspacesEnabled.value && initState.value === 'loading'
+)
+const showWorkspaceIcon = computed(
+  () => isCloud && teamWorkspacesEnabled.value && initState.value === 'ready'
+)
+
+const workspaceName = computed(() => {
+  if (!showWorkspaceIcon.value) return ''
+  return teamWorkspaceName.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..7d044d3ac
--- /dev/null
+++ b/src/components/topbar/CurrentUserPopoverWorkspace.vue
@@ -0,0 +1,328 @@
+<!-- A popover that shows current user information and actions -->
+<template>
+  <div
+    class="current-user-popover w-80 -m-3 p-2 rounded-lg border border-border-default bg-base-background shadow-[1px_1px_8px_0_rgba(0,0,0,0.4)]"
+  >
+    <!-- User Info Section -->
+    <div class="flex flex-col items-center px-0 py-3 mb-4">
+      <UserAvatar
+        class="mb-1"
+        :photo-url="userPhotoUrl"
+        :pt:icon:class="{
+          'text-2xl!': !userPhotoUrl
+        }"
+        size="large"
+      />
+
+      <!-- User Details -->
+      <h3 class="my-0 mb-1 truncate text-base font-bold text-base-foreground">
+        {{ userDisplayName || $t('g.user') }}
+      </h3>
+      <p v-if="userEmail" class="my-0 truncate text-sm text-muted">
+        {{ userEmail }}
+      </p>
+    </div>
+
+    <!-- Workspace Selector -->
+    <div
+      class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 hover:bg-secondary-background-hover"
+      @click="toggleWorkspaceSwitcher"
+    >
+      <div class="flex min-w-0 flex-1 items-center gap-2">
+        <WorkspaceProfilePic
+          class="size-6 shrink-0 text-xs"
+          :workspace-name="workspaceName"
+        />
+        <span class="truncate text-sm text-base-foreground">{{
+          workspaceName
+        }}</span>
+      </div>
+      <i class="pi pi-chevron-down shrink-0 text-sm text-muted-foreground" />
+    </div>
+
+    <Popover
+      ref="workspaceSwitcherPopover"
+      append-to="body"
+      :pt="{
+        content: {
+          class: 'p-0'
+        }
+      }"
+    >
+      <WorkspaceSwitcherPopover
+        @select="workspaceSwitcherPopover?.hide()"
+        @create="handleCreateWorkspace"
+      />
+    </Popover>
+
+    <!-- Credits Section (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 -->
+        <SubscribeButton
+          v-else-if="isPersonalWorkspace"
+          :fluid="false"
+          :label="$t('workspaceSwitcher.subscribe')"
+          size="sm"
+          variant="gradient"
+        />
+        <!-- Non-personal workspace: Navigate to workspace settings -->
+        <Button
+          v-else
+          variant="primary"
+          size="sm"
+          @click="handleOpenPlanAndCreditsSettings"
+        >
+          {{ $t('workspaceSwitcher.subscribe') }}
+        </Button>
+      </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 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 {
+  initState,
+  workspaceName,
+  isInPersonalWorkspace: isPersonalWorkspace,
+  isWorkspaceSubscribed
+} = 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, subscriptionStatus } = useSubscription()
+const { totalCredits, isLoadingBalance } = useSubscriptionCredits()
+const subscriptionDialog = useSubscriptionDialog()
+
+const displayedCredits = computed(() => {
+  if (initState.value !== 'ready') return ''
+  // Only personal workspaces have subscription status from useSubscription()
+  // Team workspaces don't have backend subscription data yet
+  if (isPersonalWorkspace.value) {
+    // Wait for subscription status to load
+    if (subscriptionStatus.value === null) return ''
+    return isActiveSubscription.value ? totalCredits.value : '0'
+  }
+  return '0'
+})
+
+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..631514598
--- /dev/null
+++ b/src/components/topbar/WorkspaceSwitcherPopover.vue
@@ -0,0 +1,196 @@
+<template>
+  <div class="flex w-80 flex-col overflow-hidden rounded-lg">
+    <div class="flex flex-col overflow-y-auto">
+      <!-- Loading state -->
+      <div v-if="isFetchingWorkspaces" class="flex flex-col gap-2 p-2">
+        <div
+          v-for="i in 2"
+          :key="i"
+          class="flex h-[54px] animate-pulse items-center gap-2 rounded px-2 py-4"
+        >
+          <div class="size-8 rounded-full bg-secondary-background" />
+          <div class="flex flex-1 flex-col gap-1">
+            <div class="h-4 w-24 rounded bg-secondary-background" />
+            <div class="h-3 w-16 rounded bg-secondary-background" />
+          </div>
+        </div>
+      </div>
+
+      <!-- Workspace list -->
+      <template v-else>
+        <template v-for="workspace in availableWorkspaces" :key="workspace.id">
+          <div class="border-b border-border-default p-2">
+            <div
+              :class="
+                cn(
+                  'group flex h-[54px] w-full items-center gap-2 rounded px-2 py-4',
+                  'hover:bg-secondary-background-hover',
+                  isCurrentWorkspace(workspace) && 'bg-secondary-background'
+                )
+              "
+            >
+              <button
+                class="flex flex-1 cursor-pointer items-center gap-2 border-none bg-transparent p-0"
+                @click="handleSelectWorkspace(workspace)"
+              >
+                <WorkspaceProfilePic
+                  class="size-8 text-sm"
+                  :workspace-name="workspace.name"
+                />
+                <div class="flex min-w-0 flex-1 flex-col items-start gap-1">
+                  <div class="flex items-center gap-1.5">
+                    <span class="text-sm text-base-foreground">
+                      {{
+                        workspace.type === 'personal'
+                          ? $t('workspaceSwitcher.personal')
+                          : workspace.name
+                      }}
+                    </span>
+                    <span
+                      v-if="getTierLabel(workspace)"
+                      class="text-[10px] font-bold uppercase text-base-background bg-base-foreground px-1 py-0.5 rounded-full"
+                    >
+                      {{ getTierLabel(workspace) }}
+                    </span>
+                  </div>
+                  <span class="text-xs text-muted-foreground">
+                    {{ getRoleLabel(workspace.role) }}
+                  </span>
+                </div>
+                <i
+                  v-if="isCurrentWorkspace(workspace)"
+                  class="pi pi-check text-sm text-base-foreground"
+                />
+              </button>
+            </div>
+          </div>
+        </template>
+      </template>
+
+      <!-- Create workspace button -->
+      <div class="px-2 py-2">
+        <div
+          :class="
+            cn(
+              'flex h-12 w-full items-center gap-2 rounded px-2 py-2',
+              canCreateWorkspace
+                ? 'cursor-pointer hover:bg-secondary-background-hover'
+                : 'cursor-default'
+            )
+          "
+          @click="canCreateWorkspace && handleCreateWorkspace()"
+        >
+          <div
+            :class="
+              cn(
+                'flex size-8 items-center justify-center rounded-full bg-secondary-background',
+                !canCreateWorkspace && 'opacity-50'
+              )
+            "
+          >
+            <i class="pi pi-plus text-sm text-muted-foreground" />
+          </div>
+          <div class="flex min-w-0 flex-1 flex-col">
+            <span
+              v-if="canCreateWorkspace"
+              class="text-sm text-muted-foreground"
+            >
+              {{ $t('workspaceSwitcher.createWorkspace') }}
+            </span>
+            <span v-else class="text-sm text-muted-foreground">
+              {{ $t('workspaceSwitcher.maxWorkspacesReached') }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import WorkspaceProfilePic from '@/components/common/WorkspaceProfilePic.vue'
+import { useWorkspaceSwitch } from '@/platform/auth/workspace/useWorkspaceSwitch'
+import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
+import type {
+  WorkspaceRole,
+  WorkspaceType
+} from '@/platform/workspace/api/workspaceApi'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { cn } from '@/utils/tailwindUtil'
+
+type SubscriptionPlan = 'PRO_MONTHLY' | 'PRO_YEARLY' | null
+
+interface AvailableWorkspace {
+  id: string
+  name: string
+  type: WorkspaceType
+  role: WorkspaceRole
+  isSubscribed: boolean
+  subscriptionPlan: SubscriptionPlan
+}
+
+const emit = defineEmits<{
+  select: [workspace: AvailableWorkspace]
+  create: []
+}>()
+
+const { t } = useI18n()
+const { switchWithConfirmation } = useWorkspaceSwitch()
+const { subscriptionTierName: userSubscriptionTierName } = useSubscription()
+
+const workspaceStore = useTeamWorkspaceStore()
+const { workspaceId, workspaces, canCreateWorkspace, isFetchingWorkspaces } =
+  storeToRefs(workspaceStore)
+
+const availableWorkspaces = computed<AvailableWorkspace[]>(() =>
+  workspaces.value.map((w) => ({
+    id: w.id,
+    name: w.name,
+    type: w.type,
+    role: w.role,
+    isSubscribed: w.isSubscribed,
+    subscriptionPlan: w.subscriptionPlan
+  }))
+)
+
+function isCurrentWorkspace(workspace: AvailableWorkspace): boolean {
+  return workspace.id === workspaceId.value
+}
+
+function getRoleLabel(role: AvailableWorkspace['role']): string {
+  if (role === 'owner') return t('workspaceSwitcher.roleOwner')
+  if (role === 'member') return t('workspaceSwitcher.roleMember')
+  return ''
+}
+
+function getTierLabel(workspace: AvailableWorkspace): string | null {
+  // Personal workspace: use user's subscription tier
+  if (workspace.type === 'personal') {
+    return userSubscriptionTierName.value || null
+  }
+  // Team workspace: use workspace subscription plan
+  if (!workspace.isSubscribed || !workspace.subscriptionPlan) return null
+  if (workspace.subscriptionPlan === 'PRO_MONTHLY')
+    return t('subscription.tiers.pro.name')
+  if (workspace.subscriptionPlan === 'PRO_YEARLY')
+    return t('subscription.tierNameYearly', {
+      name: t('subscription.tiers.pro.name')
+    })
+  return null
+}
+
+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/AGENTS.md b/src/components/ui/AGENTS.md
new file mode 100644
index 000000000..53b9979b7
--- /dev/null
+++ b/src/components/ui/AGENTS.md
@@ -0,0 +1,19 @@
+# UI Component Guidelines
+
+## Adding New Components
+
+```bash
+pnpm dlx shadcn-vue@latest add <component-name> --yes
+```
+
+After adding, create `ComponentName.stories.ts` with Default, Disabled, and variant stories.
+
+## Reka UI Wrapper Components
+
+- Use reactive props destructuring with rest: `const { class: className, ...restProps } = defineProps<Props>()`
+- Use `useForwardProps(restProps)` for prop forwarding, or `computed()` if adding defaults
+- Import siblings directly (`./Component.vue`), not from barrel (`'.'`)
+- Use `cn()` for class merging with `className`
+- Use Iconify icons: `<i class="icon-[lucide--check]" />`
+- Use design tokens: `bg-secondary-background`, `text-muted-foreground`, `border-border-default`
+- Tailwind 4 CSS variables use parentheses: `h-(--my-var)` not `h-[--my-var]`
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/select/Select.stories.ts b/src/components/ui/select/Select.stories.ts
new file mode 100644
index 000000000..ba2a37e48
--- /dev/null
+++ b/src/components/ui/select/Select.stories.ts
@@ -0,0 +1,261 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import Select from './Select.vue'
+import SelectContent from './SelectContent.vue'
+import SelectGroup from './SelectGroup.vue'
+import SelectItem from './SelectItem.vue'
+import SelectLabel from './SelectLabel.vue'
+import SelectSeparator from './SelectSeparator.vue'
+import SelectTrigger from './SelectTrigger.vue'
+import SelectValue from './SelectValue.vue'
+
+const meta = {
+  title: 'Components/Select',
+  component: Select,
+  tags: ['autodocs'],
+  argTypes: {
+    modelValue: {
+      control: 'text',
+      description: 'Selected value'
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'When true, disables the select'
+    },
+    'onUpdate:modelValue': { action: 'update:modelValue' }
+  }
+} satisfies Meta<typeof Select>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: {
+      Select,
+      SelectContent,
+      SelectItem,
+      SelectTrigger,
+      SelectValue
+    },
+    setup() {
+      const value = ref(args.modelValue || '')
+      return { value, args }
+    },
+    template: `
+      <Select v-model="value" :disabled="args.disabled">
+        <SelectTrigger class="w-56">
+          <SelectValue placeholder="Select a fruit" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="apple">Apple</SelectItem>
+          <SelectItem value="banana">Banana</SelectItem>
+          <SelectItem value="cherry">Cherry</SelectItem>
+          <SelectItem value="grape">Grape</SelectItem>
+          <SelectItem value="orange">Orange</SelectItem>
+        </SelectContent>
+      </Select>
+      <div class="mt-4 text-sm text-muted-foreground">
+        Selected: {{ value || 'None' }}
+      </div>
+    `
+  }),
+  args: {
+    disabled: false
+  }
+}
+
+export const WithPlaceholder: Story = {
+  render: (args) => ({
+    components: {
+      Select,
+      SelectContent,
+      SelectItem,
+      SelectTrigger,
+      SelectValue
+    },
+    setup() {
+      const value = ref('')
+      return { value, args }
+    },
+    template: `
+      <Select v-model="value" :disabled="args.disabled">
+        <SelectTrigger class="w-56">
+          <SelectValue placeholder="Choose an option..." />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="option1">Option 1</SelectItem>
+          <SelectItem value="option2">Option 2</SelectItem>
+          <SelectItem value="option3">Option 3</SelectItem>
+        </SelectContent>
+      </Select>
+    `
+  }),
+  args: {
+    disabled: false
+  }
+}
+
+export const Disabled: Story = {
+  render: (args) => ({
+    components: {
+      Select,
+      SelectContent,
+      SelectItem,
+      SelectTrigger,
+      SelectValue
+    },
+    setup() {
+      const value = ref('apple')
+      return { value, args }
+    },
+    template: `
+      <Select v-model="value" disabled>
+        <SelectTrigger class="w-56">
+          <SelectValue placeholder="Select a fruit" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="apple">Apple</SelectItem>
+          <SelectItem value="banana">Banana</SelectItem>
+          <SelectItem value="cherry">Cherry</SelectItem>
+        </SelectContent>
+      </Select>
+    `
+  })
+}
+
+export const WithGroups: Story = {
+  render: (args) => ({
+    components: {
+      Select,
+      SelectContent,
+      SelectGroup,
+      SelectItem,
+      SelectLabel,
+      SelectSeparator,
+      SelectTrigger,
+      SelectValue
+    },
+    setup() {
+      const value = ref('')
+      return { value, args }
+    },
+    template: `
+      <Select v-model="value" :disabled="args.disabled">
+        <SelectTrigger class="w-56">
+          <SelectValue placeholder="Select a model type" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectLabel>Checkpoints</SelectLabel>
+            <SelectItem value="sd15">SD 1.5</SelectItem>
+            <SelectItem value="sdxl">SDXL</SelectItem>
+            <SelectItem value="flux">Flux</SelectItem>
+          </SelectGroup>
+          <SelectSeparator />
+          <SelectGroup>
+            <SelectLabel>LoRAs</SelectLabel>
+            <SelectItem value="lora-style">Style LoRA</SelectItem>
+            <SelectItem value="lora-character">Character LoRA</SelectItem>
+          </SelectGroup>
+          <SelectSeparator />
+          <SelectGroup>
+            <SelectLabel>Other</SelectLabel>
+            <SelectItem value="vae">VAE</SelectItem>
+            <SelectItem value="embedding">Embedding</SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+      <div class="mt-4 text-sm text-muted-foreground">
+        Selected: {{ value || 'None' }}
+      </div>
+    `
+  }),
+  args: {
+    disabled: false
+  }
+}
+
+export const Scrollable: Story = {
+  render: (args) => ({
+    components: {
+      Select,
+      SelectContent,
+      SelectItem,
+      SelectTrigger,
+      SelectValue
+    },
+    setup() {
+      const value = ref('')
+      const items = Array.from({ length: 20 }, (_, i) => ({
+        value: `item-${i + 1}`,
+        label: `Option ${i + 1}`
+      }))
+      return { value, items, args }
+    },
+    template: `
+      <Select v-model="value" :disabled="args.disabled">
+        <SelectTrigger class="w-56">
+          <SelectValue placeholder="Select an option" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem
+            v-for="item in items"
+            :key="item.value"
+            :value="item.value"
+          >
+            {{ item.label }}
+          </SelectItem>
+        </SelectContent>
+      </Select>
+    `
+  }),
+  args: {
+    disabled: false
+  }
+}
+
+export const CustomWidth: Story = {
+  render: (args) => ({
+    components: {
+      Select,
+      SelectContent,
+      SelectItem,
+      SelectTrigger,
+      SelectValue
+    },
+    setup() {
+      const value = ref('')
+      return { value, args }
+    },
+    template: `
+      <div class="space-y-4">
+        <Select v-model="value" :disabled="args.disabled">
+          <SelectTrigger class="w-32">
+            <SelectValue placeholder="Small" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="a">A</SelectItem>
+            <SelectItem value="b">B</SelectItem>
+            <SelectItem value="c">C</SelectItem>
+          </SelectContent>
+        </Select>
+
+        <Select v-model="value" :disabled="args.disabled">
+          <SelectTrigger class="w-full">
+            <SelectValue placeholder="Full width select" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="option1">Option 1</SelectItem>
+            <SelectItem value="option2">Option 2</SelectItem>
+            <SelectItem value="option3">Option 3</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    `
+  }),
+  args: {
+    disabled: false
+  }
+}
diff --git a/src/components/ui/select/Select.vue b/src/components/ui/select/Select.vue
new file mode 100644
index 000000000..f685b3189
--- /dev/null
+++ b/src/components/ui/select/Select.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { SelectRootEmits, SelectRootProps } from 'reka-ui'
+import { SelectRoot, useForwardPropsEmits } from 'reka-ui'
+
+// eslint-disable-next-line vue/no-unused-properties
+const props = defineProps<SelectRootProps>()
+const emits = defineEmits<SelectRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <SelectRoot v-bind="forwarded">
+    <slot />
+  </SelectRoot>
+</template>
diff --git a/src/components/ui/select/SelectContent.vue b/src/components/ui/select/SelectContent.vue
new file mode 100644
index 000000000..a88e26b9f
--- /dev/null
+++ b/src/components/ui/select/SelectContent.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import type { SelectContentEmits, SelectContentProps } from 'reka-ui'
+import {
+  SelectContent,
+  SelectPortal,
+  SelectViewport,
+  useForwardPropsEmits
+} from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { computed } from 'vue'
+
+import { cn } from '@/utils/tailwindUtil'
+
+import SelectScrollDownButton from './SelectScrollDownButton.vue'
+import SelectScrollUpButton from './SelectScrollUpButton.vue'
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const {
+  position = 'popper',
+  class: className,
+  ...restProps
+} = defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<SelectContentEmits>()
+
+const delegatedProps = computed(() => ({
+  position,
+  ...restProps
+}))
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SelectPortal>
+    <SelectContent
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        cn(
+          'relative z-3000 max-h-96 min-w-32 overflow-hidden',
+          'mt-2 rounded-lg p-2',
+          'bg-base-background text-base-foreground',
+          'border border-solid border-border-default',
+          'shadow-md',
+          'data-[state=open]:animate-in data-[state=closed]:animate-out',
+          'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+          'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+          'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2',
+          'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          position === 'popper' &&
+            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+          className
+        )
+      "
+    >
+      <SelectScrollUpButton />
+      <SelectViewport
+        :class="
+          cn(
+            'scrollbar-custom flex flex-col gap-0',
+            position === 'popper' &&
+              'h-(--reka-select-trigger-height) w-full min-w-(--reka-select-trigger-width)'
+          )
+        "
+      >
+        <slot />
+      </SelectViewport>
+      <SelectScrollDownButton />
+    </SelectContent>
+  </SelectPortal>
+</template>
diff --git a/src/components/ui/select/SelectGroup.vue b/src/components/ui/select/SelectGroup.vue
new file mode 100644
index 000000000..11f3da9f6
--- /dev/null
+++ b/src/components/ui/select/SelectGroup.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { SelectGroupProps } from 'reka-ui'
+import { SelectGroup } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+import { cn } from '@/utils/tailwindUtil'
+
+const { class: className, ...restProps } = defineProps<
+  SelectGroupProps & { class?: HTMLAttributes['class'] }
+>()
+</script>
+
+<template>
+  <SelectGroup :class="cn('w-full', className)" v-bind="restProps">
+    <slot />
+  </SelectGroup>
+</template>
diff --git a/src/components/ui/select/SelectItem.vue b/src/components/ui/select/SelectItem.vue
new file mode 100644
index 000000000..4edeeb3ca
--- /dev/null
+++ b/src/components/ui/select/SelectItem.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { SelectItemProps } from 'reka-ui'
+import { SelectItem, SelectItemIndicator, SelectItemText } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+import { cn } from '@/utils/tailwindUtil'
+
+const { class: className, ...restProps } = defineProps<
+  SelectItemProps & { class?: HTMLAttributes['class'] }
+>()
+</script>
+
+<template>
+  <SelectItem
+    v-bind="restProps"
+    :class="
+      cn(
+        'relative flex w-full cursor-pointer select-none items-center justify-between',
+        'gap-3 rounded px-2 py-3 text-sm outline-none',
+        'hover:bg-secondary-background-hover',
+        'focus:bg-secondary-background-hover',
+        'data-[state=checked]:bg-secondary-background-selected',
+        'data-[state=checked]:hover:bg-secondary-background-selected',
+        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        className
+      )
+    "
+  >
+    <SelectItemText class="truncate">
+      <slot />
+    </SelectItemText>
+
+    <SelectItemIndicator class="flex shrink-0 items-center justify-center">
+      <i class="icon-[lucide--check] text-base-foreground" aria-hidden="true" />
+    </SelectItemIndicator>
+  </SelectItem>
+</template>
diff --git a/src/components/ui/select/SelectLabel.vue b/src/components/ui/select/SelectLabel.vue
new file mode 100644
index 000000000..bafe45da9
--- /dev/null
+++ b/src/components/ui/select/SelectLabel.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { SelectLabelProps } from 'reka-ui'
+import { SelectLabel } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+import { cn } from '@/utils/tailwindUtil'
+
+const { class: className, ...restProps } = defineProps<
+  SelectLabelProps & { class?: HTMLAttributes['class'] }
+>()
+</script>
+
+<template>
+  <SelectLabel
+    v-bind="restProps"
+    :class="
+      cn(
+        'px-3 py-2 text-xs uppercase tracking-wide text-muted-foreground',
+        className
+      )
+    "
+  >
+    <slot />
+  </SelectLabel>
+</template>
diff --git a/src/components/ui/select/SelectScrollDownButton.vue b/src/components/ui/select/SelectScrollDownButton.vue
new file mode 100644
index 000000000..1b1dc1a27
--- /dev/null
+++ b/src/components/ui/select/SelectScrollDownButton.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { SelectScrollDownButtonProps } from 'reka-ui'
+import { SelectScrollDownButton } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+import { cn } from '@/utils/tailwindUtil'
+
+const { class: className, ...restProps } = defineProps<
+  SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }
+>()
+</script>
+
+<template>
+  <SelectScrollDownButton
+    v-bind="restProps"
+    :class="
+      cn(
+        'flex cursor-default items-center justify-center py-1 text-muted-foreground',
+        className
+      )
+    "
+  >
+    <slot>
+      <i class="icon-[lucide--chevron-down]" />
+    </slot>
+  </SelectScrollDownButton>
+</template>
diff --git a/src/components/ui/select/SelectScrollUpButton.vue b/src/components/ui/select/SelectScrollUpButton.vue
new file mode 100644
index 000000000..ee1ef9263
--- /dev/null
+++ b/src/components/ui/select/SelectScrollUpButton.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { SelectScrollUpButtonProps } from 'reka-ui'
+import { SelectScrollUpButton } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+import { cn } from '@/utils/tailwindUtil'
+
+const { class: className, ...restProps } = defineProps<
+  SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }
+>()
+</script>
+
+<template>
+  <SelectScrollUpButton
+    v-bind="restProps"
+    :class="
+      cn(
+        'flex cursor-default items-center justify-center py-1 text-muted-foreground',
+        className
+      )
+    "
+  >
+    <slot>
+      <i class="icon-[lucide--chevron-up]" />
+    </slot>
+  </SelectScrollUpButton>
+</template>
diff --git a/src/components/ui/select/SelectSeparator.vue b/src/components/ui/select/SelectSeparator.vue
new file mode 100644
index 000000000..37947fd0d
--- /dev/null
+++ b/src/components/ui/select/SelectSeparator.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { SelectSeparatorProps } from 'reka-ui'
+import { SelectSeparator } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+import { cn } from '@/utils/tailwindUtil'
+
+const { class: className, ...restProps } = defineProps<
+  SelectSeparatorProps & { class?: HTMLAttributes['class'] }
+>()
+</script>
+
+<template>
+  <SelectSeparator
+    v-bind="restProps"
+    :class="cn('-mx-1 my-1 h-px bg-border-default', className)"
+  />
+</template>
diff --git a/src/components/ui/select/SelectTrigger.vue b/src/components/ui/select/SelectTrigger.vue
new file mode 100644
index 000000000..768048ab1
--- /dev/null
+++ b/src/components/ui/select/SelectTrigger.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { SelectTriggerProps } from 'reka-ui'
+import { SelectIcon, SelectTrigger } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+import { cn } from '@/utils/tailwindUtil'
+
+const { class: className, ...restProps } = defineProps<
+  SelectTriggerProps & { class?: HTMLAttributes['class'] }
+>()
+</script>
+
+<template>
+  <SelectTrigger
+    v-bind="restProps"
+    :class="
+      cn(
+        'flex h-10 w-full cursor-pointer select-none items-center justify-between',
+        'rounded-lg px-4 py-2 text-sm',
+        'bg-secondary-background text-base-foreground',
+        'border-[2.5px] border-solid border-transparent',
+        'transition-all duration-200 ease-in-out',
+        'focus:border-node-component-border focus:outline-none',
+        'data-[placeholder]:text-muted-foreground',
+        'disabled:cursor-not-allowed disabled:opacity-60',
+        '[&>span]:truncate',
+        className
+      )
+    "
+  >
+    <slot />
+    <SelectIcon as-child>
+      <i class="icon-[lucide--chevron-down] shrink-0 text-muted-foreground" />
+    </SelectIcon>
+  </SelectTrigger>
+</template>
diff --git a/src/components/ui/select/SelectValue.vue b/src/components/ui/select/SelectValue.vue
new file mode 100644
index 000000000..4ffa580ca
--- /dev/null
+++ b/src/components/ui/select/SelectValue.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { SelectValueProps } from 'reka-ui'
+import { SelectValue } from 'reka-ui'
+
+const props = defineProps<SelectValueProps>()
+</script>
+
+<template>
+  <SelectValue v-bind="props">
+    <slot />
+  </SelectValue>
+</template>
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/components/ui/tags-input/TagsInputInput.vue b/src/components/ui/tags-input/TagsInputInput.vue
index 62d3f01e8..320b89f97 100644
--- a/src/components/ui/tags-input/TagsInputInput.vue
+++ b/src/components/ui/tags-input/TagsInputInput.vue
@@ -23,6 +23,11 @@ const showInput = computed(() => isEditing.value || isEmpty)
 const { forwardRef, currentElement } = useForwardExpose()
 const registerFocus = inject(tagsInputFocusKey, undefined)
 
+function handleEscape() {
+  currentElement.value?.blur()
+  isEditing.value = false
+}
+
 onMounted(() => {
   registerFocus?.(() => currentElement.value?.focus())
 })
@@ -44,5 +49,6 @@ onUnmounted(() => {
         className
       )
     "
+    @keydown.escape.stop="handleEscape"
   />
 </template>
diff --git a/src/components/widget/SampleModelSelector.vue b/src/components/widget/SampleModelSelector.vue
index 6e1db7e7c..ab07080e8 100644
--- a/src/components/widget/SampleModelSelector.vue
+++ b/src/components/widget/SampleModelSelector.vue
@@ -117,7 +117,7 @@
     </template>
 
     <template #rightPanel>
-      <RightSidePanel></RightSidePanel>
+      <div class="size-full bg-modal-panel-background pr-6 pb-8 pl-4"></div>
     </template>
   </BaseModalLayout>
 </template>
@@ -136,7 +136,6 @@ import SingleSelect from '@/components/input/SingleSelect.vue'
 import Button from '@/components/ui/button/Button.vue'
 import BaseModalLayout from '@/components/widget/layout/BaseModalLayout.vue'
 import LeftSidePanel from '@/components/widget/panel/LeftSidePanel.vue'
-import RightSidePanel from '@/components/widget/panel/RightSidePanel.vue'
 import type { NavGroupData, NavItemData } from '@/types/navTypes'
 import { OnCloseKey } from '@/types/widgetTypes'
 import { createGridStyle } from '@/utils/gridUtil'
diff --git a/src/components/widget/layout/BaseModalLayout.stories.ts b/src/components/widget/layout/BaseModalLayout.stories.ts
index abcfae912..5fdf8258b 100644
--- a/src/components/widget/layout/BaseModalLayout.stories.ts
+++ b/src/components/widget/layout/BaseModalLayout.stories.ts
@@ -15,7 +15,6 @@ import { OnCloseKey } from '@/types/widgetTypes'
 import { createGridStyle } from '@/utils/gridUtil'
 
 import LeftSidePanel from '../panel/LeftSidePanel.vue'
-import RightSidePanel from '../panel/RightSidePanel.vue'
 import BaseModalLayout from './BaseModalLayout.vue'
 
 interface StoryArgs {
@@ -69,7 +68,6 @@ const createStoryTemplate = (args: StoryArgs) => ({
   components: {
     BaseModalLayout,
     LeftSidePanel,
-    RightSidePanel,
     SearchBox,
     MultiSelect,
     SingleSelect,
@@ -175,16 +173,15 @@ const createStoryTemplate = (args: StoryArgs) => ({
   template: `
     <div>
       <BaseModalLayout v-if="!args.hasRightPanel" :content-title="args.contentTitle || 'Content Title'">
+        <!-- Left Panel Header Title -->
+        <template v-if="args.hasLeftPanel" #leftPanelHeaderTitle>
+          <i class="icon-[lucide--puzzle] size-4 text-neutral" />
+          <span class="text-neutral text-base">Title</span>
+        </template>
+
         <!-- Left Panel -->
         <template v-if="args.hasLeftPanel" #leftPanel>
-          <LeftSidePanel v-model="selectedNavItem" :nav-items="tempNavigation">
-            <template #header-icon>
-              <i class="icon-[lucide--puzzle] size-4 text-neutral" />
-            </template>
-            <template #header-title>
-              <span class="text-neutral text-base">Title</span>
-            </template>
-          </LeftSidePanel>
+          <LeftSidePanel v-model="selectedNavItem" :nav-items="tempNavigation" />
         </template>
 
         <!-- Header -->
@@ -299,16 +296,15 @@ const createStoryTemplate = (args: StoryArgs) => ({
 
       <BaseModalLayout v-else :content-title="args.contentTitle || 'Content Title'">
         <!-- Same content but WITH right panel -->
+        <!-- Left Panel Header Title -->
+        <template v-if="args.hasLeftPanel" #leftPanelHeaderTitle>
+          <i class="icon-[lucide--puzzle] size-4 text-neutral" />
+          <span class="text-neutral text-base">Title</span>
+        </template>
+
         <!-- Left Panel -->
         <template v-if="args.hasLeftPanel" #leftPanel>
-          <LeftSidePanel v-model="selectedNavItem" :nav-items="tempNavigation">
-            <template #header-icon>
-              <i class="icon-[lucide--puzzle] size-4 text-neutral" />
-            </template>
-            <template #header-title>
-              <span class="text-neutral text-base">Title</span>
-            </template>
-          </LeftSidePanel>
+          <LeftSidePanel v-model="selectedNavItem" :nav-items="tempNavigation" />
         </template>
 
         <!-- Header -->
@@ -415,7 +411,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
 
         <!-- Right Panel - Only when hasRightPanel is true -->
         <template #rightPanel>
-          <RightSidePanel />
+          <div class="size-full bg-modal-panel-background pr-6 pb-8 pl-4"></div>
         </template>
       </BaseModalLayout>
     </div>
diff --git a/src/components/widget/layout/BaseModalLayout.vue b/src/components/widget/layout/BaseModalLayout.vue
index 0da7755af..79d18bf2c 100644
--- a/src/components/widget/layout/BaseModalLayout.vue
+++ b/src/components/widget/layout/BaseModalLayout.vue
@@ -1,100 +1,135 @@
 <template>
-  <div class="base-widget-layout rounded-2xl overflow-hidden relative">
-    <Button
-      v-show="!isRightPanelOpen && hasRightPanel"
-      size="lg"
-      :class="
-        cn('absolute top-4 right-18 z-10', 'transition-opacity duration-200', {
-          'opacity-0 pointer-events-none': isRightPanelOpen || !hasRightPanel
-        })
-      "
-      @click="toggleRightPanel"
+  <div
+    class="base-widget-layout rounded-2xl overflow-hidden relative"
+    @keydown.esc.capture="handleEscape"
+  >
+    <div
+      class="grid h-full w-full transition-[grid-template-columns] duration-300 ease-out"
+      :style="gridStyle"
     >
-      <i class="icon-[lucide--panel-right]" />
-    </Button>
-    <Button
-      size="lg"
-      class="absolute top-4 right-6 z-10 transition-opacity duration-200 w-10"
-      @click="closeDialog"
-    >
-      <i class="pi pi-times" />
-    </Button>
-    <div class="flex h-full w-full">
-      <Transition name="slide-panel">
-        <nav
-          v-if="$slots.leftPanel && showLeftPanel"
-          :class="[
-            PANEL_SIZES.width,
-            PANEL_SIZES.minWidth,
-            PANEL_SIZES.maxWidth
-          ]"
+      <nav
+        class="h-full overflow-hidden bg-modal-panel-background flex flex-col"
+        :inert="!showLeftPanel"
+        :aria-hidden="!showLeftPanel"
+      >
+        <header
+          data-component-id="LeftPanelHeader"
+          class="flex w-full h-18 shrink-0 gap-2 pl-6 pr-3 items-center-safe"
         >
-          <slot name="leftPanel"></slot>
-        </nav>
-      </Transition>
-
-      <div class="flex-1 flex bg-base-background">
-        <div class="flex h-full w-full flex-col">
-          <header
-            v-if="$slots.header"
-            class="w-full h-18 px-6 flex items-center justify-between gap-2"
+          <slot name="leftPanelHeaderTitle" />
+          <Button
+            v-if="!notMobile && showLeftPanel"
+            size="lg"
+            class="w-10 p-0 ml-auto"
+            :aria-label="t('g.hideLeftPanel')"
+            @click="toggleLeftPanel"
           >
-            <div class="flex flex-1 shrink-0 gap-2">
-              <Button v-if="!notMobile" size="icon" @click="toggleLeftPanel">
-                <i
-                  :class="
-                    cn(
-                      showLeftPanel
-                        ? 'icon-[lucide--panel-left]'
-                        : 'icon-[lucide--panel-left-close]'
-                    )
-                  "
-                />
-              </Button>
-              <slot name="header"></slot>
-            </div>
-            <slot name="header-right-area"></slot>
-            <div
-              :class="
-                cn(
-                  'flex justify-end gap-2 w-0',
-                  hasRightPanel && !isRightPanelOpen ? 'min-w-22' : 'min-w-10'
-                )
-              "
-            >
-              <Button
-                v-if="isRightPanelOpen && hasRightPanel"
-                size="lg"
-                @click="toggleRightPanel"
-              >
-                <i class="icon-[lucide--panel-right-close]" />
-              </Button>
-            </div>
-          </header>
+            <i class="icon-[lucide--panel-left-close]" />
+          </Button>
+        </header>
+        <slot name="leftPanel" />
+      </nav>
 
-          <main class="flex min-h-0 flex-1 flex-col">
-            <!-- Fallback title bar when no leftPanel is provided -->
-            <slot name="contentFilter"></slot>
-            <h2
-              v-if="!$slots.leftPanel"
-              class="text-xxl m-0 px-6 pt-2 pb-6 capitalize"
-            >
-              {{ contentTitle }}
-            </h2>
-            <div
-              class="min-h-0 flex-1 px-6 pt-0 pb-10 overflow-y-auto scrollbar-custom"
-            >
-              <slot name="content"></slot>
-            </div>
-          </main>
-        </div>
-        <aside
-          v-if="hasRightPanel && isRightPanelOpen"
-          class="w-1/4 min-w-40 max-w-80 pt-16 pb-8"
+      <div class="flex flex-col bg-base-background overflow-hidden">
+        <header
+          v-if="$slots.header"
+          class="w-full h-18 px-6 flex items-center justify-between gap-2"
         >
-          <slot name="rightPanel"></slot>
-        </aside>
+          <div class="flex flex-1 shrink-0 gap-2">
+            <Button
+              v-if="!notMobile && !showLeftPanel"
+              size="lg"
+              class="w-10 p-0"
+              :aria-label="t('g.showLeftPanel')"
+              @click="toggleLeftPanel"
+            >
+              <i class="icon-[lucide--panel-left]" />
+            </Button>
+            <slot name="header" />
+          </div>
+          <slot name="header-right-area" />
+          <template v-if="!isRightPanelOpen">
+            <Button
+              v-if="hasRightPanel"
+              size="lg"
+              class="w-10 p-0"
+              :aria-label="t('g.showRightPanel')"
+              @click="toggleRightPanel"
+            >
+              <i class="icon-[lucide--panel-right] size-4" />
+            </Button>
+            <Button
+              size="lg"
+              class="w-10"
+              :aria-label="t('g.closeDialog')"
+              @click="closeDialog"
+            >
+              <i class="pi pi-times" />
+            </Button>
+          </template>
+        </header>
+
+        <main class="flex min-h-0 flex-1 flex-col">
+          <slot name="contentFilter" />
+          <h2
+            v-if="!hasLeftPanel"
+            class="text-xxl m-0 select-none px-6 pt-2 pb-6 capitalize"
+          >
+            {{ contentTitle }}
+          </h2>
+          <div
+            class="min-h-0 flex-1 px-6 pt-0 pb-10 overflow-y-auto scrollbar-custom"
+          >
+            <slot name="content" />
+          </div>
+        </main>
       </div>
+
+      <aside
+        v-if="hasRightPanel"
+        class="overflow-hidden"
+        :inert="!isRightPanelOpen"
+        :aria-hidden="!isRightPanelOpen"
+      >
+        <div
+          class="min-w-72 w-72 flex flex-col bg-modal-panel-background h-full"
+        >
+          <header
+            data-component-id="RightPanelHeader"
+            class="flex h-18 shrink-0 items-center gap-2 px-6"
+          >
+            <h2
+              v-if="rightPanelTitle"
+              class="flex-1 select-none text-base font-semibold"
+            >
+              {{ rightPanelTitle }}
+            </h2>
+            <div v-else class="flex-1">
+              <slot name="rightPanelHeaderTitle" />
+            </div>
+            <slot name="rightPanelHeaderActions" />
+            <Button
+              size="lg"
+              class="w-10 p-0"
+              :aria-label="t('g.hideRightPanel')"
+              @click="toggleRightPanel"
+            >
+              <i class="icon-[lucide--panel-right-close] size-4" />
+            </Button>
+            <Button
+              size="lg"
+              class="w-10 p-0"
+              :aria-label="t('g.closeDialog')"
+              @click="closeDialog"
+            >
+              <i class="pi pi-times" />
+            </Button>
+          </header>
+          <div class="min-h-0 flex-1 overflow-y-auto">
+            <slot name="rightPanel" />
+          </div>
+        </div>
+      </aside>
     </div>
   </div>
 </template>
@@ -102,27 +137,28 @@
 <script setup lang="ts">
 import { useBreakpoints } from '@vueuse/core'
 import { computed, inject, ref, useSlots, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
 import { OnCloseKey } from '@/types/widgetTypes'
-import { cn } from '@/utils/tailwindUtil'
 
-const { contentTitle } = defineProps<{
+const { t } = useI18n()
+
+const { contentTitle, rightPanelTitle } = defineProps<{
   contentTitle: string
+  rightPanelTitle?: string
 }>()
 
 const isRightPanelOpen = defineModel<boolean>('rightPanelOpen', {
   default: false
 })
 
-const BREAKPOINTS = { md: 880 }
-const PANEL_SIZES = {
-  width: 'w-1/3',
-  minWidth: 'min-w-40',
-  maxWidth: 'max-w-56'
-}
-
 const slots = useSlots()
+const hasLeftPanel = computed(() => !!slots.leftPanel)
+const hasRightPanel = computed(() => !!slots.rightPanel)
+
+const BREAKPOINTS = { md: 880 }
+
 const closeDialog = inject(OnCloseKey, () => {})
 
 const breakpoints = useBreakpoints(BREAKPOINTS)
@@ -131,8 +167,6 @@ const notMobile = breakpoints.greater('md')
 const isLeftPanelOpen = ref<boolean>(true)
 const mobileMenuOpen = ref<boolean>(false)
 
-const hasRightPanel = computed(() => !!slots.rightPanel)
-
 watch(notMobile, (isDesktop) => {
   if (!isDesktop) {
     mobileMenuOpen.value = false
@@ -146,6 +180,12 @@ const showLeftPanel = computed(() => {
   return shouldShow
 })
 
+const gridStyle = computed(() => ({
+  gridTemplateColumns: hasRightPanel.value
+    ? `${hasLeftPanel.value && showLeftPanel.value ? '14rem' : '0rem'} 1fr ${isRightPanelOpen.value ? '18rem' : '0rem'}`
+    : `${hasLeftPanel.value && showLeftPanel.value ? '14rem' : '0rem'} 1fr`
+}))
+
 const toggleLeftPanel = () => {
   if (notMobile.value) {
     isLeftPanelOpen.value = !isLeftPanelOpen.value
@@ -157,6 +197,23 @@ const toggleLeftPanel = () => {
 const toggleRightPanel = () => {
   isRightPanelOpen.value = !isRightPanelOpen.value
 }
+
+function handleEscape(event: KeyboardEvent) {
+  const target = event.target
+  if (!(target instanceof HTMLElement)) return
+  if (
+    target instanceof HTMLInputElement ||
+    target instanceof HTMLTextAreaElement ||
+    target instanceof HTMLSelectElement ||
+    target.isContentEditable
+  ) {
+    return
+  }
+  if (isRightPanelOpen.value) {
+    event.stopPropagation()
+    isRightPanelOpen.value = false
+  }
+}
 </script>
 <style scoped>
 .base-widget-layout {
@@ -171,28 +228,4 @@ const toggleRightPanel = () => {
     max-width: 1724px;
   }
 }
-
-/* Fade transition for buttons */
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.2s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-
-/* Slide transition for left panel */
-.slide-panel-enter-active,
-.slide-panel-leave-active {
-  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  will-change: transform;
-  backface-visibility: hidden;
-}
-
-.slide-panel-enter-from,
-.slide-panel-leave-to {
-  transform: translateX(-100%);
-}
 </style>
diff --git a/src/components/widget/nav/NavItem.vue b/src/components/widget/nav/NavItem.vue
index 8c20ad929..f7b8bbcf1 100644
--- a/src/components/widget/nav/NavItem.vue
+++ b/src/components/widget/nav/NavItem.vue
@@ -5,7 +5,7 @@
       disabled: !isOverflowing,
       pt: { text: { class: 'whitespace-nowrap' } }
     }"
-    class="flex cursor-pointer items-start gap-2 rounded-md px-4 py-3 text-sm transition-colors text-base-foreground"
+    class="flex cursor-pointer select-none items-center-safe gap-2 rounded-md px-4 py-3 text-sm transition-colors text-base-foreground"
     :class="
       active
         ? 'bg-interface-menu-component-surface-selected'
@@ -15,25 +15,32 @@
     @mouseenter="checkOverflow"
     @click="onClick"
   >
-    <div v-if="icon" class="pt-0.5">
-      <NavIcon :icon="icon" />
-    </div>
+    <NavIcon v-if="icon" :icon="icon" />
     <i v-else class="text-neutral icon-[lucide--folder] text-xs shrink-0" />
     <span ref="textRef" class="min-w-0 truncate">
-      <slot></slot>
+      <slot />
     </span>
+    <StatusBadge
+      v-if="badge !== undefined"
+      :label="String(badge)"
+      severity="contrast"
+      variant="circle"
+      class="ml-auto"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 
+import StatusBadge from '@/components/common/StatusBadge.vue'
 import type { NavItemData } from '@/types/navTypes'
 
 import NavIcon from './NavIcon.vue'
 
-const { icon, active, onClick } = defineProps<{
+const { icon, badge, active, onClick } = defineProps<{
   icon: NavItemData['icon']
+  badge?: NavItemData['badge']
   active?: boolean
   onClick: () => void
 }>()
diff --git a/src/components/widget/panel/LeftSidePanel.stories.ts b/src/components/widget/panel/LeftSidePanel.stories.ts
index bbfee54c4..98199ad87 100644
--- a/src/components/widget/panel/LeftSidePanel.stories.ts
+++ b/src/components/widget/panel/LeftSidePanel.stories.ts
@@ -7,20 +7,6 @@ const meta: Meta<typeof LeftSidePanel> = {
   title: 'Components/Widget/Panel/LeftSidePanel',
   component: LeftSidePanel,
   argTypes: {
-    'header-icon': {
-      table: {
-        type: { summary: 'slot' },
-        defaultValue: { summary: 'undefined' }
-      },
-      control: false
-    },
-    'header-title': {
-      table: {
-        type: { summary: 'slot' },
-        defaultValue: { summary: 'undefined' }
-      },
-      control: false
-    },
     'onUpdate:modelValue': {
       table: { disable: true }
     }
@@ -59,14 +45,7 @@ export const Default: Story = {
     },
     template: `
       <div style="height: 500px; width: 256px;">
-        <LeftSidePanel v-model="selectedItem" :nav-items="args.navItems">
-          <template #header-icon>
-            <i class="icon-[lucide--puzzle] size-4 text-neutral" />
-          </template>
-          <template #header-title>
-            <span class="text-neutral text-base">Navigation</span>
-          </template>
-        </LeftSidePanel>
+        <LeftSidePanel v-model="selectedItem" :nav-items="args.navItems" />
       </div>
     `
   })
@@ -126,14 +105,7 @@ export const WithGroups: Story = {
     },
     template: `
       <div style="height: 500px; width: 256px;">
-        <LeftSidePanel v-model="selectedItem" :nav-items="args.navItems">
-          <template #header-icon>
-            <i class="icon-[lucide--puzzle] size-4 text-neutral" />
-          </template>
-          <template #header-title>
-            <span class="text-neutral text-base">Model Selector</span>
-          </template>
-        </LeftSidePanel>
+        <LeftSidePanel v-model="selectedItem" :nav-items="args.navItems" />
         <div class="mt-4 p-2 text-sm">
           Selected: {{ selectedItem }}
         </div>
@@ -176,14 +148,7 @@ export const DefaultIcons: Story = {
     },
     template: `
       <div style="height: 400px; width: 256px;">
-        <LeftSidePanel v-model="selectedItem" :nav-items="args.navItems">
-          <template #header-icon>
-            <i class="icon-[lucide--folder] size-4 text-neutral" />
-          </template>
-          <template #header-title>
-            <span class="text-neutral text-base">Files</span>
-          </template>
-        </LeftSidePanel>
+        <LeftSidePanel v-model="selectedItem" :nav-items="args.navItems" />
       </div>
     `
   })
@@ -228,14 +193,7 @@ export const LongLabels: Story = {
     },
     template: `
       <div style="height: 500px; width: 256px;">
-        <LeftSidePanel v-model="selectedItem" :nav-items="args.navItems">
-          <template #header-icon>
-            <i class="icon-[lucide--settings] size-4 text-neutral" />
-          </template>
-          <template #header-title>
-            <span class="text-neutral text-base">Settings</span>
-          </template>
-        </LeftSidePanel>
+        <LeftSidePanel v-model="selectedItem" :nav-items="args.navItems" />
       </div>
     `
   })
diff --git a/src/components/widget/panel/LeftSidePanel.vue b/src/components/widget/panel/LeftSidePanel.vue
index 94b3104eb..3711897f8 100644
--- a/src/components/widget/panel/LeftSidePanel.vue
+++ b/src/components/widget/panel/LeftSidePanel.vue
@@ -1,45 +1,41 @@
 <template>
-  <div class="flex h-full w-full flex-col bg-modal-panel-background">
-    <PanelHeader>
-      <template #icon>
-        <slot name="header-icon"></slot>
-      </template>
-      <slot name="header-title"></slot>
-    </PanelHeader>
-
-    <nav
-      class="flex scrollbar-hide flex-1 flex-col gap-1 overflow-y-auto px-3 py-4"
+  <div
+    class="flex w-full flex-auto overflow-y-auto gap-1 min-h-0 flex-col bg-modal-panel-background scrollbar-hide px-3"
+  >
+    <template
+      v-for="item in navItems"
+      :key="'title' in item ? item.title : item.id"
     >
-      <template v-for="(item, index) in navItems" :key="index">
-        <div v-if="'items' in item" class="flex flex-col gap-2">
-          <NavTitle
-            v-model="collapsedGroups[item.title]"
-            :title="item.title"
-            :collapsible="item.collapsible"
-          />
-          <template v-if="!item.collapsible || !collapsedGroups[item.title]">
-            <NavItem
-              v-for="subItem in item.items"
-              :key="subItem.id"
-              :icon="subItem.icon"
-              :active="activeItem === subItem.id"
-              @click="activeItem = subItem.id"
-            >
-              {{ subItem.label }}
-            </NavItem>
-          </template>
-        </div>
-        <div v-else class="flex flex-col gap-2">
+      <div v-if="'items' in item" class="flex flex-col gap-2">
+        <NavTitle
+          v-model="collapsedGroups[item.title]"
+          :title="item.title"
+          :collapsible="item.collapsible"
+        />
+        <template v-if="!item.collapsible || !collapsedGroups[item.title]">
           <NavItem
-            :icon="item.icon"
-            :active="activeItem === item.id"
-            @click="activeItem = item.id"
+            v-for="subItem in item.items"
+            :key="subItem.id"
+            :icon="subItem.icon"
+            :badge="subItem.badge"
+            :active="activeItem === subItem.id"
+            @click="activeItem = subItem.id"
           >
-            {{ item.label }}
+            {{ subItem.label }}
           </NavItem>
-        </div>
-      </template>
-    </nav>
+        </template>
+      </div>
+      <div v-else class="flex flex-col gap-2">
+        <NavItem
+          :icon="item.icon"
+          :badge="item.badge"
+          :active="activeItem === item.id"
+          @click="activeItem = item.id"
+        >
+          {{ item.label }}
+        </NavItem>
+      </div>
+    </template>
   </div>
 </template>
 
@@ -50,8 +46,6 @@ import NavItem from '@/components/widget/nav/NavItem.vue'
 import NavTitle from '@/components/widget/nav/NavTitle.vue'
 import type { NavGroupData, NavItemData } from '@/types/navTypes'
 
-import PanelHeader from './PanelHeader.vue'
-
 const { navItems = [], modelValue } = defineProps<{
   navItems?: (NavItemData | NavGroupData)[]
   modelValue?: string | null
diff --git a/src/components/widget/panel/PanelHeader.vue b/src/components/widget/panel/PanelHeader.vue
deleted file mode 100644
index cdcc4eb20..000000000
--- a/src/components/widget/panel/PanelHeader.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <header class="flex h-16 items-center justify-between px-6">
-    <div class="flex items-center gap-2 pl-1">
-      <slot name="icon">
-        <i class="text-neutral icon-[lucide--puzzle] text-base" />
-      </slot>
-      <h2 class="text-neutral text-base font-bold">
-        <slot></slot>
-      </h2>
-    </div>
-  </header>
-</template>
diff --git a/src/components/widget/panel/RightSidePanel.vue b/src/components/widget/panel/RightSidePanel.vue
deleted file mode 100644
index 85e5aee69..000000000
--- a/src/components/widget/panel/RightSidePanel.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div class="size-full bg-modal-panel-background pr-6 pb-8 pl-4">
-    <slot></slot>
-  </div>
-</template>
diff --git a/src/composables/canvas/useSelectedLiteGraphItems.test.ts b/src/composables/canvas/useSelectedLiteGraphItems.test.ts
index 23e1e8dd3..8e16448f4 100644
--- a/src/composables/canvas/useSelectedLiteGraphItems.test.ts
+++ b/src/composables/canvas/useSelectedLiteGraphItems.test.ts
@@ -6,6 +6,9 @@ import type { LGraphNode, Positionable } from '@/lib/litegraph/src/litegraph'
 import { LGraphEventMode, Reroute } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { app } from '@/scripts/app'
+import type { NodeId } from '@/renderer/core/layout/types'
+import type { ReadOnlyRect } from '@/lib/litegraph/src/interfaces'
+import { createMockSubgraphNode } from '@/utils/__tests__/litegraphTestUtils'
 
 // Mock the app module
 vi.mock('@/scripts/app', () => ({
@@ -29,10 +32,12 @@ vi.mock('@/lib/litegraph/src/litegraph', () => ({
 }))
 
 // Mock Positionable objects
-// @ts-expect-error - Mock implementation for testing
+
 class MockNode implements Positionable {
   pos: [number, number]
   size: [number, number]
+  id: NodeId
+  boundingRect: ReadOnlyRect
 
   constructor(
     pos: [number, number] = [0, 0],
@@ -40,6 +45,13 @@ class MockNode implements Positionable {
   ) {
     this.pos = pos
     this.size = size
+    this.id = 'mock-node'
+    this.boundingRect = [0, 0, 0, 0]
+  }
+
+  move(): void {}
+  snapToGrid(_: number): boolean {
+    return true
   }
 }
 
@@ -61,7 +73,7 @@ class MockReroute extends Reroute implements Positionable {
 
 describe('useSelectedLiteGraphItems', () => {
   let canvasStore: ReturnType<typeof useCanvasStore>
-  let mockCanvas: any
+  let mockCanvas: { selectedItems: Set<Positionable> }
 
   beforeEach(() => {
     setActivePinia(createPinia())
@@ -73,7 +85,9 @@ describe('useSelectedLiteGraphItems', () => {
     }
 
     // Mock getCanvas to return our mock canvas
-    vi.spyOn(canvasStore, 'getCanvas').mockReturnValue(mockCanvas)
+    vi.spyOn(canvasStore, 'getCanvas').mockReturnValue(
+      mockCanvas as ReturnType<typeof canvasStore.getCanvas>
+    )
   })
 
   describe('isIgnoredItem', () => {
@@ -86,7 +100,6 @@ describe('useSelectedLiteGraphItems', () => {
     it('should return false for non-Reroute items', () => {
       const { isIgnoredItem } = useSelectedLiteGraphItems()
       const node = new MockNode()
-      // @ts-expect-error - Test mock
       expect(isIgnoredItem(node)).toBe(false)
     })
   })
@@ -98,14 +111,11 @@ describe('useSelectedLiteGraphItems', () => {
       const node2 = new MockNode([100, 100])
       const reroute = new MockReroute([50, 50])
 
-      // @ts-expect-error - Test mocks
       const items = new Set<Positionable>([node1, node2, reroute])
       const filtered = filterSelectableItems(items)
 
       expect(filtered.size).toBe(2)
-      // @ts-expect-error - Test mocks
       expect(filtered.has(node1)).toBe(true)
-      // @ts-expect-error - Test mocks
       expect(filtered.has(node2)).toBe(true)
       expect(filtered.has(reroute)).toBe(false)
     })
@@ -143,9 +153,7 @@ describe('useSelectedLiteGraphItems', () => {
 
       const selectableItems = getSelectableItems()
       expect(selectableItems.size).toBe(2)
-      // @ts-expect-error - Test mock
       expect(selectableItems.has(node1)).toBe(true)
-      // @ts-expect-error - Test mock
       expect(selectableItems.has(node2)).toBe(true)
       expect(selectableItems.has(reroute)).toBe(false)
     })
@@ -255,14 +263,7 @@ describe('useSelectedLiteGraphItems', () => {
       const { getSelectedNodes } = useSelectedLiteGraphItems()
       const subNode1 = { id: 11, mode: LGraphEventMode.ALWAYS } as LGraphNode
       const subNode2 = { id: 12, mode: LGraphEventMode.NEVER } as LGraphNode
-      const subgraphNode = {
-        id: 1,
-        mode: LGraphEventMode.ALWAYS,
-        isSubgraphNode: () => true,
-        subgraph: {
-          nodes: [subNode1, subNode2]
-        }
-      } as unknown as LGraphNode
+      const subgraphNode = createMockSubgraphNode([subNode1, subNode2])
       const regularNode = { id: 2, mode: LGraphEventMode.NEVER } as LGraphNode
 
       app.canvas.selected_nodes = { '0': subgraphNode, '1': regularNode }
@@ -279,14 +280,7 @@ describe('useSelectedLiteGraphItems', () => {
       const { toggleSelectedNodesMode } = useSelectedLiteGraphItems()
       const subNode1 = { id: 11, mode: LGraphEventMode.ALWAYS } as LGraphNode
       const subNode2 = { id: 12, mode: LGraphEventMode.NEVER } as LGraphNode
-      const subgraphNode = {
-        id: 1,
-        mode: LGraphEventMode.ALWAYS,
-        isSubgraphNode: () => true,
-        subgraph: {
-          nodes: [subNode1, subNode2]
-        }
-      } as unknown as LGraphNode
+      const subgraphNode = createMockSubgraphNode([subNode1, subNode2])
       const regularNode = { id: 2, mode: LGraphEventMode.BYPASS } as LGraphNode
 
       app.canvas.selected_nodes = { '0': subgraphNode, '1': regularNode }
@@ -310,14 +304,10 @@ describe('useSelectedLiteGraphItems', () => {
       const { toggleSelectedNodesMode } = useSelectedLiteGraphItems()
       const subNode1 = { id: 11, mode: LGraphEventMode.ALWAYS } as LGraphNode
       const subNode2 = { id: 12, mode: LGraphEventMode.BYPASS } as LGraphNode
-      const subgraphNode = {
+      const subgraphNode = createMockSubgraphNode([subNode1, subNode2], {
         id: 1,
-        mode: LGraphEventMode.NEVER, // Already in NEVER mode
-        isSubgraphNode: () => true,
-        subgraph: {
-          nodes: [subNode1, subNode2]
-        }
-      } as unknown as LGraphNode
+        mode: LGraphEventMode.NEVER // Already in NEVER mode
+      })
 
       app.canvas.selected_nodes = { '0': subgraphNode }
 
diff --git a/src/composables/functional/useChainCallback.ts b/src/composables/functional/useChainCallback.ts
index 47e32b9fb..833cd4a18 100644
--- a/src/composables/functional/useChainCallback.ts
+++ b/src/composables/functional/useChainCallback.ts
@@ -1,19 +1,3 @@
-/**
- * Shorthand for {@link Parameters} of optional callbacks.
- *
- * @example
- * ```ts
- * const { onClick } = CustomClass.prototype
- * CustomClass.prototype.onClick = function (...args: CallbackParams<typeof onClick>) {
- *   const r = onClick?.apply(this, args)
- *   // ...
- *   return r
- * }
- * ```
- */
-export type CallbackParams<T extends ((...args: any) => any) | undefined> =
-  Parameters<Exclude<T, undefined>>
-
 /**
  * Chain multiple callbacks together.
  *
@@ -21,15 +5,21 @@ export type CallbackParams<T extends ((...args: any) => any) | undefined> =
  * @param callbacks - The callbacks to chain.
  * @returns A new callback that chains the original callback with the callbacks.
  */
-export const useChainCallback = <
-  O,
-  T extends (this: O, ...args: any[]) => void
->(
+export function useChainCallback<O, T>(
   originalCallback: T | undefined,
-  ...callbacks: ((this: O, ...args: Parameters<T>) => void)[]
-) => {
-  return function (this: O, ...args: Parameters<T>) {
-    originalCallback?.call(this, ...args)
-    for (const callback of callbacks) callback.call(this, ...args)
-  }
+  ...callbacks: NonNullable<T> extends (this: O, ...args: infer P) => unknown
+    ? ((this: O, ...args: P) => void)[]
+    : never
+) {
+  type Args = NonNullable<T> extends (...args: infer P) => unknown ? P : never
+  type Ret = NonNullable<T> extends (...args: unknown[]) => infer R ? R : never
+
+  return function (this: O, ...args: Args) {
+    if (typeof originalCallback === 'function') {
+      ;(originalCallback as (this: O, ...args: Args) => Ret).call(this, ...args)
+    }
+    for (const callback of callbacks) {
+      callback.call(this, ...args)
+    }
+  } as (this: O, ...args: Args) => Ret
 }
diff --git a/src/composables/graph/useGraphHierarchy.test.ts b/src/composables/graph/useGraphHierarchy.test.ts
index 510d50989..c7b5a8f81 100644
--- a/src/composables/graph/useGraphHierarchy.test.ts
+++ b/src/composables/graph/useGraphHierarchy.test.ts
@@ -1,23 +1,39 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
+import { Rectangle } from '@/lib/litegraph/src/infrastructure/Rectangle'
 import type { LGraphGroup, LGraphNode } from '@/lib/litegraph/src/litegraph'
 import * as measure from '@/lib/litegraph/src/measure'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import {
+  createMockLGraphNode,
+  createMockLGraphGroup
+} from '@/utils/__tests__/litegraphTestUtils'
 
 import { useGraphHierarchy } from './useGraphHierarchy'
 
 vi.mock('@/renderer/core/canvas/canvasStore')
 
+function createMockNode(overrides: Partial<LGraphNode> = {}): LGraphNode {
+  return Object.assign(
+    createMockLGraphNode(),
+    {
+      boundingRect: new Rectangle(100, 100, 50, 50)
+    },
+    overrides
+  )
+}
+
+function createMockGroup(overrides: Partial<LGraphGroup> = {}): LGraphGroup {
+  return createMockLGraphGroup(overrides)
+}
+
 describe('useGraphHierarchy', () => {
-  let mockCanvasStore: ReturnType<typeof useCanvasStore>
+  let mockCanvasStore: Partial<ReturnType<typeof useCanvasStore>>
   let mockNode: LGraphNode
   let mockGroups: LGraphGroup[]
 
   beforeEach(() => {
-    mockNode = {
-      boundingRect: [100, 100, 50, 50]
-    } as unknown as LGraphNode
-
+    mockNode = createMockNode()
     mockGroups = []
 
     mockCanvasStore = {
@@ -25,10 +41,21 @@ describe('useGraphHierarchy', () => {
         graph: {
           groups: mockGroups
         }
-      }
-    } as any
+      },
+      $id: 'canvas',
+      $state: {},
+      $patch: vi.fn(),
+      $reset: vi.fn(),
+      $subscribe: vi.fn(),
+      $onAction: vi.fn(),
+      $dispose: vi.fn(),
+      _customProperties: new Set(),
+      _p: {}
+    } as unknown as Partial<ReturnType<typeof useCanvasStore>>
 
-    vi.mocked(useCanvasStore).mockReturnValue(mockCanvasStore)
+    vi.mocked(useCanvasStore).mockReturnValue(
+      mockCanvasStore as ReturnType<typeof useCanvasStore>
+    )
   })
 
   describe('findParentGroup', () => {
@@ -41,9 +68,9 @@ describe('useGraphHierarchy', () => {
     })
 
     it('returns null when node is not in any group', () => {
-      const group = {
-        boundingRect: [0, 0, 50, 50]
-      } as unknown as LGraphGroup
+      const group = createMockGroup({
+        boundingRect: new Rectangle(0, 0, 50, 50)
+      })
       mockGroups.push(group)
 
       vi.spyOn(measure, 'containsCentre').mockReturnValue(false)
@@ -55,9 +82,9 @@ describe('useGraphHierarchy', () => {
     })
 
     it('returns the only group when node is in exactly one group', () => {
-      const group = {
-        boundingRect: [0, 0, 200, 200]
-      } as unknown as LGraphGroup
+      const group = createMockGroup({
+        boundingRect: new Rectangle(0, 0, 200, 200)
+      })
       mockGroups.push(group)
 
       vi.spyOn(measure, 'containsCentre').mockReturnValue(true)
@@ -69,12 +96,12 @@ describe('useGraphHierarchy', () => {
     })
 
     it('returns the smallest group when node is in multiple groups', () => {
-      const largeGroup = {
-        boundingRect: [0, 0, 300, 300]
-      } as unknown as LGraphGroup
-      const smallGroup = {
-        boundingRect: [50, 50, 100, 100]
-      } as unknown as LGraphGroup
+      const largeGroup = createMockGroup({
+        boundingRect: new Rectangle(0, 0, 300, 300)
+      })
+      const smallGroup = createMockGroup({
+        boundingRect: new Rectangle(50, 50, 100, 100)
+      })
       mockGroups.push(largeGroup, smallGroup)
 
       vi.spyOn(measure, 'containsCentre').mockReturnValue(true)
@@ -87,12 +114,12 @@ describe('useGraphHierarchy', () => {
     })
 
     it('returns the inner group when one group contains another', () => {
-      const outerGroup = {
-        boundingRect: [0, 0, 300, 300]
-      } as unknown as LGraphGroup
-      const innerGroup = {
-        boundingRect: [50, 50, 100, 100]
-      } as unknown as LGraphGroup
+      const outerGroup = createMockGroup({
+        boundingRect: new Rectangle(0, 0, 300, 300)
+      })
+      const innerGroup = createMockGroup({
+        boundingRect: new Rectangle(50, 50, 100, 100)
+      })
       mockGroups.push(outerGroup, innerGroup)
 
       vi.spyOn(measure, 'containsCentre').mockReturnValue(true)
@@ -113,7 +140,7 @@ describe('useGraphHierarchy', () => {
     })
 
     it('handles null canvas gracefully', () => {
-      mockCanvasStore.canvas = null as any
+      mockCanvasStore.canvas = null
 
       const { findParentGroup } = useGraphHierarchy()
       const result = findParentGroup(mockNode)
@@ -122,7 +149,7 @@ describe('useGraphHierarchy', () => {
     })
 
     it('handles null graph gracefully', () => {
-      mockCanvasStore.canvas!.graph = null as any
+      mockCanvasStore.canvas!.graph = null
 
       const { findParentGroup } = useGraphHierarchy()
       const result = findParentGroup(mockNode)
diff --git a/src/composables/graph/useGraphNodeManager.ts b/src/composables/graph/useGraphNodeManager.ts
index e71e4cf36..33822d1c5 100644
--- a/src/composables/graph/useGraphNodeManager.ts
+++ b/src/composables/graph/useGraphNodeManager.ts
@@ -77,6 +77,7 @@ export interface VueNodeData {
   outputs?: INodeOutputSlot[]
   resizable?: boolean
   shape?: number
+  showAdvanced?: boolean
   subgraphId?: string | null
   titleMode?: TitleMode
   widgets?: SafeWidgetData[]
@@ -314,7 +315,8 @@ export function extractVueNodeData(node: LGraphNode): VueNodeData {
     color: node.color || undefined,
     bgcolor: node.bgcolor || undefined,
     resizable: node.resizable,
-    shape: node.shape
+    shape: node.shape,
+    showAdvanced: node.showAdvanced
   }
 }
 
@@ -398,6 +400,9 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
     vueNodeData.set(id, extractVueNodeData(node))
 
     const initializeVueNodeLayout = () => {
+      // Check if the node was removed mid-sequence
+      if (!nodeRefs.has(id)) return
+
       // Extract actual positions after configure() has potentially updated them
       const nodePosition = { x: node.pos[0], y: node.pos[1] }
       const nodeSize = { width: node.size[0], height: node.size[1] }
@@ -427,7 +432,7 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
     } else {
       // Not during workflow loading - initialize layout immediately
       // This handles individual node additions during normal operation
-      initializeVueNodeLayout()
+      requestAnimationFrame(initializeVueNodeLayout)
     }
 
     // Call original callback if provided
@@ -565,6 +570,13 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
                     ? propertyEvent.newValue
                     : undefined
               })
+              break
+            case 'showAdvanced':
+              vueNodeData.set(nodeId, {
+                ...currentData,
+                showAdvanced: Boolean(propertyEvent.newValue)
+              })
+              break
           }
         }
       },
diff --git a/src/composables/graph/useSelectionState.test.ts b/src/composables/graph/useSelectionState.test.ts
index cf0e4bd84..cd4af9422 100644
--- a/src/composables/graph/useSelectionState.test.ts
+++ b/src/composables/graph/useSelectionState.test.ts
@@ -1,55 +1,19 @@
-import { createPinia, setActivePinia } from 'pinia'
+import { createTestingPinia } from '@pinia/testing'
+import { setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, test, vi } from 'vitest'
-import { ref } from 'vue'
-import type { Ref } from 'vue'
 
 import { useSelectionState } from '@/composables/graph/useSelectionState'
 import { useNodeLibrarySidebarTab } from '@/composables/sidebarTabs/useNodeLibrarySidebarTab'
 import { LGraphEventMode } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import { useNodeDefStore } from '@/stores/nodeDefStore'
-import { useNodeHelpStore } from '@/stores/workspace/nodeHelpStore'
-import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 import { isImageNode, isLGraphNode } from '@/utils/litegraphUtil'
 import { filterOutputNodes } from '@/utils/nodeFilterUtil'
+import {
+  createMockLGraphNode,
+  createMockPositionable
+} from '@/utils/__tests__/litegraphTestUtils'
 
-// Test interfaces
-interface TestNodeConfig {
-  type?: string
-  mode?: LGraphEventMode
-  flags?: { collapsed?: boolean }
-  pinned?: boolean
-  removable?: boolean
-}
-
-interface TestNode {
-  type: string
-  mode: LGraphEventMode
-  flags?: { collapsed?: boolean }
-  pinned?: boolean
-  removable?: boolean
-  isSubgraphNode: () => boolean
-}
-
-type MockedItem = TestNode | { type: string; isNode: boolean }
-
-// Mock all stores
-vi.mock('@/renderer/core/canvas/canvasStore', () => ({
-  useCanvasStore: vi.fn()
-}))
-
-vi.mock('@/stores/nodeDefStore', () => ({
-  useNodeDefStore: vi.fn()
-}))
-
-vi.mock('@/stores/workspace/sidebarTabStore', () => ({
-  useSidebarTabStore: vi.fn()
-}))
-
-vi.mock('@/stores/workspace/nodeHelpStore', () => ({
-  useNodeHelpStore: vi.fn()
-}))
-
+// Mock composables
 vi.mock('@/composables/sidebarTabs/useNodeLibrarySidebarTab', () => ({
   useNodeLibrarySidebarTab: vi.fn()
 }))
@@ -63,102 +27,28 @@ vi.mock('@/utils/nodeFilterUtil', () => ({
   filterOutputNodes: vi.fn()
 }))
 
-const createTestNode = (config: TestNodeConfig = {}): TestNode => {
-  return {
-    type: config.type || 'TestNode',
-    mode: config.mode || LGraphEventMode.ALWAYS,
-    flags: config.flags,
-    pinned: config.pinned,
-    removable: config.removable,
-    isSubgraphNode: () => false
-  }
+// Mock comment/connection objects with additional properties
+const mockComment = {
+  ...createMockPositionable({ id: 999 }),
+  type: 'comment',
+  isNode: false
+}
+const mockConnection = {
+  ...createMockPositionable({ id: 1000 }),
+  type: 'connection',
+  isNode: false
 }
 
-// Mock comment/connection objects
-const mockComment = { type: 'comment', isNode: false }
-const mockConnection = { type: 'connection', isNode: false }
-
 describe('useSelectionState', () => {
-  // Mock store instances
-  let mockSelectedItems: Ref<MockedItem[]>
-
   beforeEach(() => {
     vi.clearAllMocks()
-    setActivePinia(createPinia())
 
-    // Setup mock canvas store with proper ref
-    mockSelectedItems = ref([])
-    vi.mocked(useCanvasStore).mockReturnValue({
-      selectedItems: mockSelectedItems,
-      // Add minimal required properties for the store
-      $id: 'canvas',
-      $state: {} as any,
-      $patch: vi.fn(),
-      $reset: vi.fn(),
-      $subscribe: vi.fn(),
-      $onAction: vi.fn(),
-      $dispose: vi.fn(),
-      _customProperties: new Set(),
-      _p: {} as any
-    } as any)
-
-    // Setup mock node def store
-    vi.mocked(useNodeDefStore).mockReturnValue({
-      fromLGraphNode: vi.fn((node: TestNode) => {
-        if (node?.type === 'TestNode') {
-          return { nodePath: 'test.TestNode', name: 'TestNode' }
-        }
-        return null
-      }),
-      // Add minimal required properties for the store
-      $id: 'nodeDef',
-      $state: {} as any,
-      $patch: vi.fn(),
-      $reset: vi.fn(),
-      $subscribe: vi.fn(),
-      $onAction: vi.fn(),
-      $dispose: vi.fn(),
-      _customProperties: new Set(),
-      _p: {} as any
-    } as any)
-
-    // Setup mock sidebar tab store
-    const mockToggleSidebarTab = vi.fn()
-    vi.mocked(useSidebarTabStore).mockReturnValue({
-      activeSidebarTabId: null,
-      toggleSidebarTab: mockToggleSidebarTab,
-      // Add minimal required properties for the store
-      $id: 'sidebarTab',
-      $state: {} as any,
-      $patch: vi.fn(),
-      $reset: vi.fn(),
-      $subscribe: vi.fn(),
-      $onAction: vi.fn(),
-      $dispose: vi.fn(),
-      _customProperties: new Set(),
-      _p: {} as any
-    } as any)
-
-    // Setup mock node help store
-    const mockOpenHelp = vi.fn()
-    const mockCloseHelp = vi.fn()
-    const mockNodeHelpStore = {
-      isHelpOpen: false,
-      currentHelpNode: null,
-      openHelp: mockOpenHelp,
-      closeHelp: mockCloseHelp,
-      // Add minimal required properties for the store
-      $id: 'nodeHelp',
-      $state: {} as any,
-      $patch: vi.fn(),
-      $reset: vi.fn(),
-      $subscribe: vi.fn(),
-      $onAction: vi.fn(),
-      $dispose: vi.fn(),
-      _customProperties: new Set(),
-      _p: {} as any
-    }
-    vi.mocked(useNodeHelpStore).mockReturnValue(mockNodeHelpStore as any)
+    // Create testing Pinia instance
+    setActivePinia(
+      createTestingPinia({
+        createSpy: vi.fn
+      })
+    )
 
     // Setup mock composables
     vi.mocked(useNodeLibrarySidebarTab).mockReturnValue({
@@ -166,7 +56,7 @@ describe('useSelectionState', () => {
       title: 'Node Library',
       type: 'custom',
       render: () => null
-    } as any)
+    } as ReturnType<typeof useNodeLibrarySidebarTab>)
 
     // Setup mock utility functions
     vi.mocked(isLGraphNode).mockImplementation((item: unknown) => {
@@ -177,8 +67,8 @@ describe('useSelectionState', () => {
       const typedNode = node as { type?: string }
       return typedNode?.type === 'ImageNode'
     })
-    vi.mocked(filterOutputNodes).mockImplementation(
-      (nodes: TestNode[]) => nodes.filter((n) => n.type === 'OutputNode') as any
+    vi.mocked(filterOutputNodes).mockImplementation((nodes) =>
+      nodes.filter((n) => n.type === 'OutputNode')
     )
   })
 
@@ -189,10 +79,10 @@ describe('useSelectionState', () => {
     })
 
     test('should return true when items selected', () => {
-      // Update the mock data before creating the composable
-      const node1 = createTestNode()
-      const node2 = createTestNode()
-      mockSelectedItems.value = [node1, node2]
+      const canvasStore = useCanvasStore()
+      const node1 = createMockLGraphNode({ id: 1 })
+      const node2 = createMockLGraphNode({ id: 2 })
+      canvasStore.$state.selectedItems = [node1, node2]
 
       const { hasAnySelection } = useSelectionState()
       expect(hasAnySelection.value).toBe(true)
@@ -201,9 +91,13 @@ describe('useSelectionState', () => {
 
   describe('Node Type Filtering', () => {
     test('should pick only LGraphNodes from mixed selections', () => {
-      // Update the mock data before creating the composable
-      const graphNode = createTestNode()
-      mockSelectedItems.value = [graphNode, mockComment, mockConnection]
+      const canvasStore = useCanvasStore()
+      const graphNode = createMockLGraphNode({ id: 3 })
+      canvasStore.$state.selectedItems = [
+        graphNode,
+        mockComment,
+        mockConnection
+      ]
 
       const { selectedNodes } = useSelectionState()
       expect(selectedNodes.value).toHaveLength(1)
@@ -213,9 +107,12 @@ describe('useSelectionState', () => {
 
   describe('Node State Computation', () => {
     test('should detect bypassed nodes', () => {
-      // Update the mock data before creating the composable
-      const bypassedNode = createTestNode({ mode: LGraphEventMode.BYPASS })
-      mockSelectedItems.value = [bypassedNode]
+      const canvasStore = useCanvasStore()
+      const bypassedNode = createMockLGraphNode({
+        id: 4,
+        mode: LGraphEventMode.BYPASS
+      })
+      canvasStore.$state.selectedItems = [bypassedNode]
 
       const { selectedNodes } = useSelectionState()
       const isBypassed = selectedNodes.value.some(
@@ -225,10 +122,13 @@ describe('useSelectionState', () => {
     })
 
     test('should detect pinned/collapsed states', () => {
-      // Update the mock data before creating the composable
-      const pinnedNode = createTestNode({ pinned: true })
-      const collapsedNode = createTestNode({ flags: { collapsed: true } })
-      mockSelectedItems.value = [pinnedNode, collapsedNode]
+      const canvasStore = useCanvasStore()
+      const pinnedNode = createMockLGraphNode({ id: 5, pinned: true })
+      const collapsedNode = createMockLGraphNode({
+        id: 6,
+        flags: { collapsed: true }
+      })
+      canvasStore.$state.selectedItems = [pinnedNode, collapsedNode]
 
       const { selectedNodes } = useSelectionState()
       const isPinned = selectedNodes.value.some((n) => n.pinned === true)
@@ -244,9 +144,9 @@ describe('useSelectionState', () => {
     })
 
     test('should provide non-reactive state computation', () => {
-      // Update the mock data before creating the composable
-      const node = createTestNode({ pinned: true })
-      mockSelectedItems.value = [node]
+      const canvasStore = useCanvasStore()
+      const node = createMockLGraphNode({ id: 7, pinned: true })
+      canvasStore.$state.selectedItems = [node]
 
       const { selectedNodes } = useSelectionState()
       const isPinned = selectedNodes.value.some((n) => n.pinned === true)
@@ -262,7 +162,7 @@ describe('useSelectionState', () => {
       expect(isBypassed).toBe(false)
 
       // Test with empty selection using new composable instance
-      mockSelectedItems.value = []
+      canvasStore.$state.selectedItems = []
       const { selectedNodes: newSelectedNodes } = useSelectionState()
       const newIsPinned = newSelectedNodes.value.some((n) => n.pinned === true)
       expect(newIsPinned).toBe(false)
diff --git a/src/composables/maskeditor/useCanvasHistory.test.ts b/src/composables/maskeditor/useCanvasHistory.test.ts
index 40985c715..2e96eda00 100644
--- a/src/composables/maskeditor/useCanvasHistory.test.ts
+++ b/src/composables/maskeditor/useCanvasHistory.test.ts
@@ -75,7 +75,7 @@ if (typeof globalThis.ImageBitmap === 'undefined') {
       this.height = height
     }
     close() {}
-  } as unknown as typeof globalThis.ImageBitmap
+  } as typeof ImageBitmap
 }
 
 describe('useCanvasHistory', () => {
diff --git a/src/composables/maskeditor/useCanvasManager.test.ts b/src/composables/maskeditor/useCanvasManager.test.ts
index 4fe40df6e..48e1bf7b4 100644
--- a/src/composables/maskeditor/useCanvasManager.test.ts
+++ b/src/composables/maskeditor/useCanvasManager.test.ts
@@ -3,13 +3,13 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { MaskBlendMode } from '@/extensions/core/maskeditor/types'
 import { useCanvasManager } from '@/composables/maskeditor/useCanvasManager'
 const mockStore = {
-  imgCanvas: null as any,
-  maskCanvas: null as any,
-  rgbCanvas: null as any,
-  imgCtx: null as any,
-  maskCtx: null as any,
-  rgbCtx: null as any,
-  canvasBackground: null as any,
+  imgCanvas: null! as HTMLCanvasElement,
+  maskCanvas: null! as HTMLCanvasElement,
+  rgbCanvas: null! as HTMLCanvasElement,
+  imgCtx: null! as CanvasRenderingContext2D,
+  maskCtx: null! as CanvasRenderingContext2D,
+  rgbCtx: null! as CanvasRenderingContext2D,
+  canvasBackground: null! as HTMLElement,
   maskColor: { r: 0, g: 0, b: 0 },
   maskBlendMode: MaskBlendMode.Black,
   maskOpacity: 0.8
@@ -38,26 +38,30 @@ describe('useCanvasManager', () => {
       height: 100
     } as ImageData
 
-    mockStore.imgCtx = {
+    const partialImgCtx: Partial<CanvasRenderingContext2D> = {
       drawImage: vi.fn()
     }
+    mockStore.imgCtx = partialImgCtx as CanvasRenderingContext2D
 
-    mockStore.maskCtx = {
+    const partialMaskCtx: Partial<CanvasRenderingContext2D> = {
       drawImage: vi.fn(),
       getImageData: vi.fn(() => mockImageData),
       putImageData: vi.fn(),
       globalCompositeOperation: 'source-over',
       fillStyle: ''
     }
+    mockStore.maskCtx = partialMaskCtx as CanvasRenderingContext2D
 
-    mockStore.rgbCtx = {
+    const partialRgbCtx: Partial<CanvasRenderingContext2D> = {
       drawImage: vi.fn()
     }
+    mockStore.rgbCtx = partialRgbCtx as CanvasRenderingContext2D
 
-    mockStore.imgCanvas = {
+    const partialImgCanvas: Partial<HTMLCanvasElement> = {
       width: 0,
       height: 0
     }
+    mockStore.imgCanvas = partialImgCanvas as HTMLCanvasElement
 
     mockStore.maskCanvas = {
       width: 0,
@@ -65,19 +69,19 @@ describe('useCanvasManager', () => {
       style: {
         mixBlendMode: '',
         opacity: ''
-      }
-    }
+      } as Pick<CSSStyleDeclaration, 'mixBlendMode' | 'opacity'>
+    } as HTMLCanvasElement
 
     mockStore.rgbCanvas = {
       width: 0,
       height: 0
-    }
+    } as HTMLCanvasElement
 
     mockStore.canvasBackground = {
       style: {
         backgroundColor: ''
-      }
-    }
+      } as Pick<CSSStyleDeclaration, 'backgroundColor'>
+    } as HTMLElement
 
     mockStore.maskColor = { r: 0, g: 0, b: 0 }
     mockStore.maskBlendMode = MaskBlendMode.Black
@@ -163,7 +167,7 @@ describe('useCanvasManager', () => {
     it('should throw error when canvas missing', async () => {
       const manager = useCanvasManager()
 
-      mockStore.imgCanvas = null
+      mockStore.imgCanvas = null! as HTMLCanvasElement
 
       const origImage = createMockImage(512, 512)
       const maskImage = createMockImage(512, 512)
@@ -176,7 +180,7 @@ describe('useCanvasManager', () => {
     it('should throw error when context missing', async () => {
       const manager = useCanvasManager()
 
-      mockStore.imgCtx = null
+      mockStore.imgCtx = null! as CanvasRenderingContext2D
 
       const origImage = createMockImage(512, 512)
       const maskImage = createMockImage(512, 512)
@@ -259,7 +263,7 @@ describe('useCanvasManager', () => {
     it('should return early when canvas missing', async () => {
       const manager = useCanvasManager()
 
-      mockStore.maskCanvas = null
+      mockStore.maskCanvas = null! as HTMLCanvasElement
 
       await manager.updateMaskColor()
 
@@ -269,7 +273,7 @@ describe('useCanvasManager', () => {
     it('should return early when context missing', async () => {
       const manager = useCanvasManager()
 
-      mockStore.maskCtx = null
+      mockStore.maskCtx = null! as CanvasRenderingContext2D
 
       await manager.updateMaskColor()
 
diff --git a/src/composables/maskeditor/useCanvasTools.test.ts b/src/composables/maskeditor/useCanvasTools.test.ts
index 991d19c00..17a46f8b6 100644
--- a/src/composables/maskeditor/useCanvasTools.test.ts
+++ b/src/composables/maskeditor/useCanvasTools.test.ts
@@ -4,17 +4,37 @@ import { ColorComparisonMethod } from '@/extensions/core/maskeditor/types'
 
 import { useCanvasTools } from '@/composables/maskeditor/useCanvasTools'
 
+// Mock store interface matching the real store's nullable fields
+interface MockMaskEditorStore {
+  maskCtx: CanvasRenderingContext2D | null
+  imgCtx: CanvasRenderingContext2D | null
+  maskCanvas: HTMLCanvasElement | null
+  imgCanvas: HTMLCanvasElement | null
+  rgbCtx: CanvasRenderingContext2D | null
+  rgbCanvas: HTMLCanvasElement | null
+  maskColor: { r: number; g: number; b: number }
+  paintBucketTolerance: number
+  fillOpacity: number
+  colorSelectTolerance: number
+  colorComparisonMethod: ColorComparisonMethod
+  selectionOpacity: number
+  applyWholeImage: boolean
+  maskBoundary: boolean
+  maskTolerance: number
+  canvasHistory: { saveState: ReturnType<typeof vi.fn> }
+}
+
 const mockCanvasHistory = {
   saveState: vi.fn()
 }
 
-const mockStore = {
-  maskCtx: null as any,
-  imgCtx: null as any,
-  maskCanvas: null as any,
-  imgCanvas: null as any,
-  rgbCtx: null as any,
-  rgbCanvas: null as any,
+const mockStore: MockMaskEditorStore = {
+  maskCtx: null,
+  imgCtx: null,
+  maskCanvas: null,
+  imgCanvas: null,
+  rgbCtx: null,
+  rgbCanvas: null,
   maskColor: { r: 255, g: 255, b: 255 },
   paintBucketTolerance: 10,
   fillOpacity: 100,
@@ -57,34 +77,40 @@ describe('useCanvasTools', () => {
       mockImgImageData.data[i + 3] = 255
     }
 
-    mockStore.maskCtx = {
+    const partialMaskCtx: Partial<CanvasRenderingContext2D> = {
       getImageData: vi.fn(() => mockMaskImageData),
       putImageData: vi.fn(),
       clearRect: vi.fn()
     }
+    mockStore.maskCtx = partialMaskCtx as CanvasRenderingContext2D
 
-    mockStore.imgCtx = {
+    const partialImgCtx: Partial<CanvasRenderingContext2D> = {
       getImageData: vi.fn(() => mockImgImageData)
     }
+    mockStore.imgCtx = partialImgCtx as CanvasRenderingContext2D
 
-    mockStore.rgbCtx = {
+    const partialRgbCtx: Partial<CanvasRenderingContext2D> = {
       clearRect: vi.fn()
     }
+    mockStore.rgbCtx = partialRgbCtx as CanvasRenderingContext2D
 
-    mockStore.maskCanvas = {
+    const partialMaskCanvas: Partial<HTMLCanvasElement> = {
       width: 100,
       height: 100
     }
+    mockStore.maskCanvas = partialMaskCanvas as HTMLCanvasElement
 
-    mockStore.imgCanvas = {
+    const partialImgCanvas: Partial<HTMLCanvasElement> = {
       width: 100,
       height: 100
     }
+    mockStore.imgCanvas = partialImgCanvas as HTMLCanvasElement
 
-    mockStore.rgbCanvas = {
+    const partialRgbCanvas: Partial<HTMLCanvasElement> = {
       width: 100,
       height: 100
     }
+    mockStore.rgbCanvas = partialRgbCanvas as HTMLCanvasElement
 
     mockStore.maskColor = { r: 255, g: 255, b: 255 }
     mockStore.paintBucketTolerance = 10
@@ -103,13 +129,13 @@ describe('useCanvasTools', () => {
 
       tools.paintBucketFill({ x: 50, y: 50 })
 
-      expect(mockStore.maskCtx.getImageData).toHaveBeenCalledWith(
+      expect(mockStore.maskCtx!.getImageData).toHaveBeenCalledWith(
         0,
         0,
         100,
         100
       )
-      expect(mockStore.maskCtx.putImageData).toHaveBeenCalledWith(
+      expect(mockStore.maskCtx!.putImageData).toHaveBeenCalledWith(
         mockMaskImageData,
         0,
         0
@@ -154,7 +180,7 @@ describe('useCanvasTools', () => {
 
       tools.paintBucketFill({ x: -1, y: 50 })
 
-      expect(mockStore.maskCtx.putImageData).not.toHaveBeenCalled()
+      expect(mockStore.maskCtx!.putImageData).not.toHaveBeenCalled()
     })
 
     it('should return early when canvas missing', () => {
@@ -164,7 +190,7 @@ describe('useCanvasTools', () => {
 
       tools.paintBucketFill({ x: 50, y: 50 })
 
-      expect(mockStore.maskCtx.getImageData).not.toHaveBeenCalled()
+      expect(mockStore.maskCtx?.getImageData).not.toHaveBeenCalled()
     })
 
     it('should apply fill opacity', () => {
@@ -198,14 +224,19 @@ describe('useCanvasTools', () => {
 
       await tools.colorSelectFill({ x: 50, y: 50 })
 
-      expect(mockStore.maskCtx.getImageData).toHaveBeenCalledWith(
+      expect(mockStore.maskCtx!.getImageData).toHaveBeenCalledWith(
         0,
         0,
         100,
         100
       )
-      expect(mockStore.imgCtx.getImageData).toHaveBeenCalledWith(0, 0, 100, 100)
-      expect(mockStore.maskCtx.putImageData).toHaveBeenCalled()
+      expect(mockStore.imgCtx!.getImageData).toHaveBeenCalledWith(
+        0,
+        0,
+        100,
+        100
+      )
+      expect(mockStore.maskCtx!.putImageData).toHaveBeenCalled()
       expect(mockCanvasHistory.saveState).toHaveBeenCalled()
     })
 
@@ -216,7 +247,7 @@ describe('useCanvasTools', () => {
 
       await tools.colorSelectFill({ x: 50, y: 50 })
 
-      expect(mockStore.maskCtx.putImageData).toHaveBeenCalled()
+      expect(mockStore.maskCtx!.putImageData).toHaveBeenCalled()
     })
 
     it('should respect color tolerance', async () => {
@@ -239,7 +270,7 @@ describe('useCanvasTools', () => {
 
       await tools.colorSelectFill({ x: -1, y: 50 })
 
-      expect(mockStore.maskCtx.putImageData).not.toHaveBeenCalled()
+      expect(mockStore.maskCtx!.putImageData).not.toHaveBeenCalled()
     })
 
     it('should return early when canvas missing', async () => {
@@ -249,7 +280,7 @@ describe('useCanvasTools', () => {
 
       await tools.colorSelectFill({ x: 50, y: 50 })
 
-      expect(mockStore.maskCtx.getImageData).not.toHaveBeenCalled()
+      expect(mockStore.maskCtx?.getImageData).not.toHaveBeenCalled()
     })
 
     it('should apply selection opacity', async () => {
@@ -270,7 +301,7 @@ describe('useCanvasTools', () => {
 
       await tools.colorSelectFill({ x: 50, y: 50 })
 
-      expect(mockStore.maskCtx.putImageData).toHaveBeenCalled()
+      expect(mockStore.maskCtx!.putImageData).toHaveBeenCalled()
     })
 
     it('should use LAB color comparison method', async () => {
@@ -280,7 +311,7 @@ describe('useCanvasTools', () => {
 
       await tools.colorSelectFill({ x: 50, y: 50 })
 
-      expect(mockStore.maskCtx.putImageData).toHaveBeenCalled()
+      expect(mockStore.maskCtx!.putImageData).toHaveBeenCalled()
     })
 
     it('should respect mask boundary', async () => {
@@ -295,7 +326,7 @@ describe('useCanvasTools', () => {
 
       await tools.colorSelectFill({ x: 50, y: 50 })
 
-      expect(mockStore.maskCtx.putImageData).toHaveBeenCalled()
+      expect(mockStore.maskCtx!.putImageData).toHaveBeenCalled()
     })
 
     it('should update last color select point', async () => {
@@ -303,7 +334,7 @@ describe('useCanvasTools', () => {
 
       await tools.colorSelectFill({ x: 30, y: 40 })
 
-      expect(mockStore.maskCtx.putImageData).toHaveBeenCalled()
+      expect(mockStore.maskCtx!.putImageData).toHaveBeenCalled()
     })
   })
 
@@ -320,13 +351,13 @@ describe('useCanvasTools', () => {
 
       tools.invertMask()
 
-      expect(mockStore.maskCtx.getImageData).toHaveBeenCalledWith(
+      expect(mockStore.maskCtx!.getImageData).toHaveBeenCalledWith(
         0,
         0,
         100,
         100
       )
-      expect(mockStore.maskCtx.putImageData).toHaveBeenCalledWith(
+      expect(mockStore.maskCtx!.putImageData).toHaveBeenCalledWith(
         mockMaskImageData,
         0,
         0
@@ -369,7 +400,7 @@ describe('useCanvasTools', () => {
 
       tools.invertMask()
 
-      expect(mockStore.maskCtx.getImageData).not.toHaveBeenCalled()
+      expect(mockStore.maskCtx?.getImageData).not.toHaveBeenCalled()
     })
 
     it('should return early when context missing', () => {
@@ -389,8 +420,8 @@ describe('useCanvasTools', () => {
 
       tools.clearMask()
 
-      expect(mockStore.maskCtx.clearRect).toHaveBeenCalledWith(0, 0, 100, 100)
-      expect(mockStore.rgbCtx.clearRect).toHaveBeenCalledWith(0, 0, 100, 100)
+      expect(mockStore.maskCtx!.clearRect).toHaveBeenCalledWith(0, 0, 100, 100)
+      expect(mockStore.rgbCtx!.clearRect).toHaveBeenCalledWith(0, 0, 100, 100)
       expect(mockCanvasHistory.saveState).toHaveBeenCalled()
     })
 
@@ -401,7 +432,7 @@ describe('useCanvasTools', () => {
 
       tools.clearMask()
 
-      expect(mockStore.maskCtx.clearRect).not.toHaveBeenCalled()
+      expect(mockStore.maskCtx?.clearRect).not.toHaveBeenCalled()
       expect(mockCanvasHistory.saveState).toHaveBeenCalled()
     })
 
@@ -412,8 +443,8 @@ describe('useCanvasTools', () => {
 
       tools.clearMask()
 
-      expect(mockStore.maskCtx.clearRect).toHaveBeenCalledWith(0, 0, 100, 100)
-      expect(mockStore.rgbCtx.clearRect).not.toHaveBeenCalled()
+      expect(mockStore.maskCtx?.clearRect).toHaveBeenCalledWith(0, 0, 100, 100)
+      expect(mockStore.rgbCtx?.clearRect).not.toHaveBeenCalled()
       expect(mockCanvasHistory.saveState).toHaveBeenCalled()
     })
   })
@@ -426,26 +457,26 @@ describe('useCanvasTools', () => {
 
       tools.clearLastColorSelectPoint()
 
-      expect(mockStore.maskCtx.putImageData).toHaveBeenCalled()
+      expect(mockStore.maskCtx!.putImageData).toHaveBeenCalled()
     })
   })
 
   describe('edge cases', () => {
     it('should handle small canvas', () => {
-      mockStore.maskCanvas.width = 1
-      mockStore.maskCanvas.height = 1
+      mockStore.maskCanvas!.width = 1
+      mockStore.maskCanvas!.height = 1
       mockMaskImageData = {
         data: new Uint8ClampedArray(1 * 1 * 4),
         width: 1,
         height: 1
       } as ImageData
-      mockStore.maskCtx.getImageData = vi.fn(() => mockMaskImageData)
+      mockStore.maskCtx!.getImageData = vi.fn(() => mockMaskImageData)
 
       const tools = useCanvasTools()
 
       tools.paintBucketFill({ x: 0, y: 0 })
 
-      expect(mockStore.maskCtx.putImageData).toHaveBeenCalled()
+      expect(mockStore.maskCtx!.putImageData).toHaveBeenCalled()
     })
 
     it('should handle fractional coordinates', () => {
@@ -453,7 +484,7 @@ describe('useCanvasTools', () => {
 
       tools.paintBucketFill({ x: 50.7, y: 50.3 })
 
-      expect(mockStore.maskCtx.putImageData).toHaveBeenCalled()
+      expect(mockStore.maskCtx!.putImageData).toHaveBeenCalled()
     })
 
     it('should handle maximum tolerance', () => {
@@ -463,7 +494,7 @@ describe('useCanvasTools', () => {
 
       tools.paintBucketFill({ x: 50, y: 50 })
 
-      expect(mockStore.maskCtx.putImageData).toHaveBeenCalled()
+      expect(mockStore.maskCtx!.putImageData).toHaveBeenCalled()
     })
 
     it('should handle zero opacity', () => {
diff --git a/src/composables/maskeditor/useCanvasTransform.test.ts b/src/composables/maskeditor/useCanvasTransform.test.ts
index 95c153d29..07ea0bb43 100644
--- a/src/composables/maskeditor/useCanvasTransform.test.ts
+++ b/src/composables/maskeditor/useCanvasTransform.test.ts
@@ -95,7 +95,7 @@ if (typeof globalThis.ImageData === 'undefined') {
         this.data = new Uint8ClampedArray(dataOrWidth * widthOrHeight * 4)
       }
     }
-  } as unknown as typeof globalThis.ImageData
+  } as typeof ImageData
 }
 
 // Mock ImageBitmap for test environment using safe type casting
@@ -108,7 +108,7 @@ if (typeof globalThis.ImageBitmap === 'undefined') {
       this.height = height
     }
     close() {}
-  } as unknown as typeof globalThis.ImageBitmap
+  } as typeof ImageBitmap
 }
 
 describe('useCanvasTransform', () => {
diff --git a/src/composables/maskeditor/useImageLoader.test.ts b/src/composables/maskeditor/useImageLoader.test.ts
index ae4938366..b547ac917 100644
--- a/src/composables/maskeditor/useImageLoader.test.ts
+++ b/src/composables/maskeditor/useImageLoader.test.ts
@@ -2,22 +2,39 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { useImageLoader } from '@/composables/maskeditor/useImageLoader'
 
+type MockStore = {
+  imgCanvas: HTMLCanvasElement | null
+  maskCanvas: HTMLCanvasElement | null
+  rgbCanvas: HTMLCanvasElement | null
+  imgCtx: CanvasRenderingContext2D | null
+  maskCtx: CanvasRenderingContext2D | null
+  image: HTMLImageElement | null
+}
+
+type MockDataStore = {
+  inputData: {
+    baseLayer: { image: HTMLImageElement }
+    maskLayer: { image: HTMLImageElement }
+    paintLayer: { image: HTMLImageElement } | null
+  } | null
+}
+
 const mockCanvasManager = {
   invalidateCanvas: vi.fn().mockResolvedValue(undefined),
   updateMaskColor: vi.fn().mockResolvedValue(undefined)
 }
 
-const mockStore = {
-  imgCanvas: null as any,
-  maskCanvas: null as any,
-  rgbCanvas: null as any,
-  imgCtx: null as any,
-  maskCtx: null as any,
-  image: null as any
+const mockStore: MockStore = {
+  imgCanvas: null,
+  maskCanvas: null,
+  rgbCanvas: null,
+  imgCtx: null,
+  maskCtx: null,
+  image: null
 }
 
-const mockDataStore = {
-  inputData: null as any
+const mockDataStore: MockDataStore = {
+  inputData: null
 }
 
 vi.mock('@/stores/maskEditorStore', () => ({
@@ -33,7 +50,8 @@ vi.mock('@/composables/maskeditor/useCanvasManager', () => ({
 }))
 
 vi.mock('@vueuse/core', () => ({
-  createSharedComposable: (fn: any) => fn
+  createSharedComposable: <T extends (...args: unknown[]) => unknown>(fn: T) =>
+    fn
 }))
 
 describe('useImageLoader', () => {
@@ -61,26 +79,26 @@ describe('useImageLoader', () => {
 
     mockStore.imgCtx = {
       clearRect: vi.fn()
-    }
+    } as Partial<CanvasRenderingContext2D> as CanvasRenderingContext2D
 
     mockStore.maskCtx = {
       clearRect: vi.fn()
-    }
+    } as Partial<CanvasRenderingContext2D> as CanvasRenderingContext2D
 
     mockStore.imgCanvas = {
       width: 0,
       height: 0
-    }
+    } as Partial<HTMLCanvasElement> as HTMLCanvasElement
 
     mockStore.maskCanvas = {
       width: 0,
       height: 0
-    }
+    } as Partial<HTMLCanvasElement> as HTMLCanvasElement
 
     mockStore.rgbCanvas = {
       width: 0,
       height: 0
-    }
+    } as Partial<HTMLCanvasElement> as HTMLCanvasElement
 
     mockDataStore.inputData = {
       baseLayer: { image: mockBaseImage },
@@ -104,10 +122,10 @@ describe('useImageLoader', () => {
 
       await loader.loadImages()
 
-      expect(mockStore.maskCanvas.width).toBe(512)
-      expect(mockStore.maskCanvas.height).toBe(512)
-      expect(mockStore.rgbCanvas.width).toBe(512)
-      expect(mockStore.rgbCanvas.height).toBe(512)
+      expect(mockStore.maskCanvas?.width).toBe(512)
+      expect(mockStore.maskCanvas?.height).toBe(512)
+      expect(mockStore.rgbCanvas?.width).toBe(512)
+      expect(mockStore.rgbCanvas?.height).toBe(512)
     })
 
     it('should clear canvas contexts', async () => {
@@ -115,8 +133,8 @@ describe('useImageLoader', () => {
 
       await loader.loadImages()
 
-      expect(mockStore.imgCtx.clearRect).toHaveBeenCalledWith(0, 0, 0, 0)
-      expect(mockStore.maskCtx.clearRect).toHaveBeenCalledWith(0, 0, 0, 0)
+      expect(mockStore.imgCtx?.clearRect).toHaveBeenCalledWith(0, 0, 0, 0)
+      expect(mockStore.maskCtx?.clearRect).toHaveBeenCalledWith(0, 0, 0, 0)
     })
 
     it('should call canvasManager methods', async () => {
@@ -188,10 +206,10 @@ describe('useImageLoader', () => {
 
       await loader.loadImages()
 
-      expect(mockStore.maskCanvas.width).toBe(1024)
-      expect(mockStore.maskCanvas.height).toBe(768)
-      expect(mockStore.rgbCanvas.width).toBe(1024)
-      expect(mockStore.rgbCanvas.height).toBe(768)
+      expect(mockStore.maskCanvas?.width).toBe(1024)
+      expect(mockStore.maskCanvas?.height).toBe(768)
+      expect(mockStore.rgbCanvas?.width).toBe(1024)
+      expect(mockStore.rgbCanvas?.height).toBe(768)
     })
   })
 })
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..2f45258fb 100644
--- a/src/composables/node/useNodePricing.test.ts
+++ b/src/composables/node/useNodePricing.test.ts
@@ -1,2478 +1,857 @@
 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'
+import { createMockLGraphNode } from '@/utils/__tests__/litegraphTestUtils'
 
-// 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
+}
+
+// -----------------------------------------------------------------------------
+// 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 = {
-    id: Math.random().toString(),
+  const baseNode = createMockLGraphNode()
+  return Object.assign(baseNode, {
     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
+  })
 }
 
-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 }
+})
 
+/** Helper to create a mock node for edge case testing */
+function createMockNode(
+  nodeData: MockNodeData,
+  widgets: MockNodeWidget[] = [],
+  inputs: MockNodeInput[] = []
+): LGraphNode {
+  const baseNode = createMockLGraphNode()
+  return Object.assign(baseNode, {
+    widgets,
+    inputs,
+    constructor: { nodeData }
+  })
+}
+
+// -----------------------------------------------------------------------------
+// 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 = createMockNode({
+        name: 'RegularNode',
+        api_node: false
+      })
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('')
+    })
+
+    it('should return empty string for nodes without price_badge', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode({
+        name: 'ApiNodeNoPricing',
+        api_node: true
+      })
+
+      const price = getNodeDisplayPrice(node)
+      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 = createMockNode({
+        name: 'NoPricingNode',
+        api_node: true
+      })
+
+      const config = getNodePricingConfig(node)
+      expect(config).toBeUndefined()
+    })
+
+    it('should return undefined for non-API nodes', () => {
+      const { getNodePricingConfig } = useNodePricing()
+      const node = createMockNode({
+        name: 'RegularNode',
+        api_node: false
+      })
+
+      const config = getNodePricingConfig(node)
+      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 = createMockNode({
+        name: 'RegularNode',
+        api_node: false
+      })
+
+      expect(() => triggerPriceRecalculation(node)).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()
-        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)'
-        })
+      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 handle completely broken widget structure', () => {
+    it('should return empty string for expression that throws at runtime', async () => {
       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)' })
+      const node = createMockNodeWithPriceBadge(
+        'TestRuntimeErrorNode',
+        // Expression that will fail at runtime (calling function on undefined)
+        priceBadge('$lookup(undefined, "key")')
       )
-    })
-  })
-
-  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 }
-      ])
 
+      getNodeDisplayPrice(node)
+      await new Promise((r) => setTimeout(r, 50))
       const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsLabel(0.06)) // 0.02 * 3
+      expect(price).toBe('')
     })
 
-    it('should calculate dynamic pricing for OpenAIGPTImage1 based on quality and n', () => {
+    it('should return empty string for invalid PricingResult type', async () => {
       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)'
-        })
+      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('New Recraft nodes dynamic pricing', () => {
-    it('should calculate dynamic pricing for RecraftGenerateImageNode', () => {
+  describe('input_groups connectivity', () => {
+    it('should count connected inputs in a group', async () => {
       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 })
+      // Create a node with autogrow-style inputs (group.input1, group.input2, etc.)
+      const node = createMockNode(
+        {
+          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)
-          }
-        )
-      })
-
-      it('should return correct fallback for TripoImageToModelNode', () => {
-        const { getNodeDisplayPrice } = useNodePricing()
-        const node = createMockNode('TripoImageToModelNode', [])
-
-        const price = getNodeDisplayPrice(node)
-        expect(price).toBe(
-          creditsRangeLabel(0.1, 0.65, {
-            note: 'varies with quad, style, texture & quality'
-          })
-        )
-      })
-
-      it('should handle missing texture quality widget', () => {
-        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 handle missing model version widget', () => {
-        const { getNodeDisplayPrice } = useNodePricing()
-        const node = createMockNode('TripoTextToModelNode', [
-          { name: 'texture_quality', value: 'detailed' }
-        ])
-
-        const price = getNodeDisplayPrice(node)
-        expect(price).toBe(
-          creditsRangeLabel(0.1, 0.65, {
-            note: 'varies with quad, style, texture & quality'
-          })
-        )
-      })
-
-      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)
           }
+        },
+        [],
+        [
+          { 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
         ]
+      )
 
-        testCases.forEach(({ node_name, model, expected }) => {
-          const node = createMockNode(node_name, [
-            { name: 'model', value: model }
-          ])
-          expect(getNodeDisplayPrice(node)).toBe(expected)
-        })
+      getNodeDisplayPrice(node)
+      await new Promise((r) => setTimeout(r, 50))
+      const price = getNodeDisplayPrice(node)
+      // 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 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('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' }
-      ])
+    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')
 
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(
-        creditsLabel(0.03, {
-          suffix: ' x images/Run',
-          approximate: true
-        })
-      )
-    })
-  })
+        // $0.10 * 211 = 21.1 credits → "21.1"
+        const value2 = creditValue(0.1)
+        expect(value2).toBe('21.1')
+      })
 
-  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' }
-      ])
+      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')
+      })
 
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsRangeLabel(1.18, 1.22))
+      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')
+      })
     })
 
-    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' }
-      ])
+    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}')
+        )
 
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsRangeLabel(0.59, 0.61))
-    })
+        getNodeDisplayPrice(node)
+        await new Promise((r) => setTimeout(r, 50))
+        const price = getNodeDisplayPrice(node)
+        expect(price).toBe('10.6 credits/Run')
+      })
 
-    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' }
-      ])
+      it('should not display decimal in badge for whole credits', async () => {
+        const { getNodeDisplayPrice } = useNodePricing()
+        // $1.00 * 211 = 211 credits → "211 credits/Run"
+        const node = createMockNodeWithPriceBadge(
+          'TestWholeCreditsNode',
+          priceBadge('{"type":"usd","usd":1.00}')
+        )
 
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe(creditsRangeLabel(0.23 * 0.8, 0.24 * 0.8))
-    })
+        getNodeDisplayPrice(node)
+        await new Promise((r) => setTimeout(r, 50))
+        const price = getNodeDisplayPrice(node)
+        expect(price).toBe('211 credits/Run')
+      })
 
-    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' }
-      ])
+      it('should handle range with mixed decimal display', async () => {
+        const { getNodeDisplayPrice } = useNodePricing()
+        // 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}')
+        )
 
-      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' }))
+        getNodeDisplayPrice(node)
+        await new Promise((r) => setTimeout(r, 50))
+        const price = getNodeDisplayPrice(node)
+        expect(price).toBe('10.6-211 credits/Run')
+      })
     })
   })
 })
-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/composables/node/useWatchWidget.test.ts b/src/composables/node/useWatchWidget.test.ts
index 61363a3f1..346d838a3 100644
--- a/src/composables/node/useWatchWidget.test.ts
+++ b/src/composables/node/useWatchWidget.test.ts
@@ -3,11 +3,12 @@ import { nextTick } from 'vue'
 
 import { useComputedWithWidgetWatch } from '@/composables/node/useWatchWidget'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { createMockLGraphNode } from '@/utils/__tests__/litegraphTestUtils'
 
 // Mock useChainCallback
 vi.mock('@/composables/functional/useChainCallback', () => ({
   useChainCallback: vi.fn((original, newCallback) => {
-    return function (this: any, ...args: any[]) {
+    return function (this: unknown, ...args: unknown[]) {
       original?.call(this, ...args)
       newCallback.call(this, ...args)
     }
@@ -18,11 +19,12 @@ describe('useComputedWithWidgetWatch', () => {
   const createMockNode = (
     widgets: Array<{
       name: string
-      value: any
-      callback?: (...args: any[]) => void
+      value: unknown
+      callback?: (...args: unknown[]) => void
     }> = []
-  ) => {
-    const mockNode = {
+  ): LGraphNode => {
+    const baseNode = createMockLGraphNode()
+    return Object.assign(baseNode, {
       widgets: widgets.map((widget) => ({
         name: widget.name,
         value: widget.value,
@@ -31,9 +33,7 @@ describe('useComputedWithWidgetWatch', () => {
       graph: {
         setDirtyCanvas: vi.fn()
       }
-    } as unknown as LGraphNode
-
-    return mockNode
+    })
   }
 
   it('should create a reactive computed that responds to widget changes', async () => {
@@ -59,9 +59,9 @@ describe('useComputedWithWidgetWatch', () => {
 
     // Change widget value and trigger callback
     const widthWidget = mockNode.widgets?.find((w) => w.name === 'width')
-    if (widthWidget) {
+    if (widthWidget && widthWidget.callback) {
       widthWidget.value = 150
-      ;(widthWidget.callback as any)?.()
+      widthWidget.callback(widthWidget.value)
     }
 
     await nextTick()
@@ -89,9 +89,9 @@ describe('useComputedWithWidgetWatch', () => {
 
     // Change observed widget
     const widthWidget = mockNode.widgets?.find((w) => w.name === 'width')
-    if (widthWidget) {
+    if (widthWidget && widthWidget.callback) {
       widthWidget.value = 150
-      ;(widthWidget.callback as any)?.()
+      widthWidget.callback(widthWidget.value)
     }
 
     await nextTick()
@@ -117,9 +117,9 @@ describe('useComputedWithWidgetWatch', () => {
 
     // Change widget value
     const widget = mockNode.widgets?.[0]
-    if (widget) {
+    if (widget && widget.callback) {
       widget.value = 20
-      ;(widget.callback as any)?.()
+      widget.callback(widget.value)
     }
 
     await nextTick()
@@ -139,9 +139,9 @@ describe('useComputedWithWidgetWatch', () => {
 
     // Change widget value
     const widget = mockNode.widgets?.[0]
-    if (widget) {
+    if (widget && widget.callback) {
       widget.value = 20
-      ;(widget.callback as any)?.()
+      widget.callback(widget.value)
     }
 
     await nextTick()
@@ -171,8 +171,8 @@ describe('useComputedWithWidgetWatch', () => {
 
     // Trigger widget callback
     const widget = mockNode.widgets?.[0]
-    if (widget) {
-      ;(widget.callback as any)?.()
+    if (widget && widget.callback) {
+      widget.callback(widget.value)
     }
 
     await nextTick()
diff --git a/src/composables/queue/useJobList.test.ts b/src/composables/queue/useJobList.test.ts
index a2a061f78..0aaaa892c 100644
--- a/src/composables/queue/useJobList.test.ts
+++ b/src/composables/queue/useJobList.test.ts
@@ -305,24 +305,40 @@ describe('useJobList', () => {
     expect(vi.getTimerCount()).toBe(0)
   })
 
-  it('sorts all tasks by priority descending', async () => {
+  it('sorts all tasks by create time', async () => {
     queueStoreMock.pendingTasks = [
-      createTask({ promptId: 'p', queueIndex: 1, mockState: 'pending' })
+      createTask({
+        promptId: 'p',
+        queueIndex: 1,
+        mockState: 'pending',
+        createTime: 3000
+      })
     ]
     queueStoreMock.runningTasks = [
-      createTask({ promptId: 'r', queueIndex: 5, mockState: 'running' })
+      createTask({
+        promptId: 'r',
+        queueIndex: 5,
+        mockState: 'running',
+        createTime: 2000
+      })
     ]
     queueStoreMock.historyTasks = [
-      createTask({ promptId: 'h', queueIndex: 3, mockState: 'completed' })
+      createTask({
+        promptId: 'h',
+        queueIndex: 3,
+        mockState: 'completed',
+        createTime: 1000,
+        executionEndTimestamp: 5000
+      })
     ]
 
     const { allTasksSorted } = initComposable()
     await flush()
 
     expect(allTasksSorted.value.map((task) => task.promptId)).toEqual([
+      'p',
       'r',
-      'h',
-      'p'
+      'h'
     ])
   })
 
diff --git a/src/composables/queue/useJobList.ts b/src/composables/queue/useJobList.ts
index b745a7103..9d5a73e50 100644
--- a/src/composables/queue/useJobList.ts
+++ b/src/composables/queue/useJobList.ts
@@ -1,3 +1,4 @@
+import { orderBy } from 'es-toolkit/array'
 import { computed, onUnmounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -197,13 +198,15 @@ export function useJobList() {
   const selectedWorkflowFilter = ref<'all' | 'current'>('all')
   const selectedSortMode = ref<JobSortMode>('mostRecent')
 
+  const mostRecentTimestamp = (task: TaskItemImpl) => task.createTime ?? 0
+
   const allTasksSorted = computed<TaskItemImpl[]>(() => {
     const all = [
       ...queueStore.pendingTasks,
       ...queueStore.runningTasks,
       ...queueStore.historyTasks
     ]
-    return all.sort((a, b) => b.queueIndex - a.queueIndex)
+    return orderBy(all, [mostRecentTimestamp], ['desc'])
   })
 
   const tasksWithJobState = computed<TaskWithState[]>(() =>
diff --git a/src/composables/queue/useJobMenu.test.ts b/src/composables/queue/useJobMenu.test.ts
index 1b339d09c..e07889022 100644
--- a/src/composables/queue/useJobMenu.test.ts
+++ b/src/composables/queue/useJobMenu.test.ts
@@ -5,15 +5,24 @@ import type { Ref } from 'vue'
 import type { JobListItem } from '@/composables/queue/useJobList'
 import type { MenuEntry } from '@/composables/queue/useJobMenu'
 
+vi.mock('@/platform/distribution/types', () => ({
+  isCloud: false
+}))
+
 const downloadFileMock = vi.fn()
 vi.mock('@/base/common/downloadUtil', () => ({
-  downloadFile: (...args: any[]) => downloadFileMock(...args)
+  downloadFile: (url: string, filename?: string) => {
+    if (filename === undefined) {
+      return downloadFileMock(url)
+    }
+    return downloadFileMock(url, filename)
+  }
 }))
 
 const copyToClipboardMock = vi.fn()
 vi.mock('@/composables/useCopyToClipboard', () => ({
   useCopyToClipboard: () => ({
-    copyToClipboard: (...args: any[]) => copyToClipboardMock(...args)
+    copyToClipboard: (text: string) => copyToClipboardMock(text)
   })
 }))
 
@@ -26,8 +35,8 @@ vi.mock('@/i18n', () => ({
 
 const mapTaskOutputToAssetItemMock = vi.fn()
 vi.mock('@/platform/assets/composables/media/assetMappers', () => ({
-  mapTaskOutputToAssetItem: (...args: any[]) =>
-    mapTaskOutputToAssetItemMock(...args)
+  mapTaskOutputToAssetItem: (taskItem: TaskItemImpl, output: ResultItemImpl) =>
+    mapTaskOutputToAssetItemMock(taskItem, output)
 }))
 
 const mediaAssetActionsMock = {
@@ -55,21 +64,24 @@ const workflowStoreMock = {
   createTemporary: vi.fn()
 }
 vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
-  useWorkflowStore: () => workflowStoreMock
+  useWorkflowStore: () => workflowStoreMock,
+  ComfyWorkflow: class {}
 }))
 
 const interruptMock = vi.fn()
 const deleteItemMock = vi.fn()
 vi.mock('@/scripts/api', () => ({
   api: {
-    interrupt: (...args: any[]) => interruptMock(...args),
-    deleteItem: (...args: any[]) => deleteItemMock(...args)
+    interrupt: (runningPromptId: string | null) =>
+      interruptMock(runningPromptId),
+    deleteItem: (type: string, id: string) => deleteItemMock(type, id)
   }
 }))
 
 const downloadBlobMock = vi.fn()
 vi.mock('@/scripts/utils', () => ({
-  downloadBlob: (...args: any[]) => downloadBlobMock(...args)
+  downloadBlob: (filename: string, blob: Blob) =>
+    downloadBlobMock(filename, blob)
 }))
 
 const dialogServiceMock = {
@@ -89,11 +101,14 @@ vi.mock('@/services/litegraphService', () => ({
   useLitegraphService: () => litegraphServiceMock
 }))
 
-const nodeDefStoreMock = {
-  nodeDefsByName: {} as Record<string, any>
+const nodeDefStoreMock: {
+  nodeDefsByName: Record<string, Partial<ComfyNodeDefImpl>>
+} = {
+  nodeDefsByName: {}
 }
 vi.mock('@/stores/nodeDefStore', () => ({
-  useNodeDefStore: () => nodeDefStoreMock
+  useNodeDefStore: () => nodeDefStoreMock,
+  ComfyNodeDefImpl: class {}
 }))
 
 const queueStoreMock = {
@@ -104,14 +119,22 @@ vi.mock('@/stores/queueStore', () => ({
   useQueueStore: () => queueStoreMock
 }))
 
+const executionStoreMock = {
+  clearInitializationByPromptId: vi.fn()
+}
+vi.mock('@/stores/executionStore', () => ({
+  useExecutionStore: () => executionStoreMock
+}))
+
 const getJobWorkflowMock = vi.fn()
 vi.mock('@/services/jobOutputCache', () => ({
-  getJobWorkflow: (...args: any[]) => getJobWorkflowMock(...args)
+  getJobWorkflow: (jobId: string) => getJobWorkflowMock(jobId)
 }))
 
 const createAnnotatedPathMock = vi.fn()
 vi.mock('@/utils/createAnnotatedPath', () => ({
-  createAnnotatedPath: (...args: any[]) => createAnnotatedPathMock(...args)
+  createAnnotatedPath: (filename: string, subfolder: string, type: string) =>
+    createAnnotatedPathMock(filename, subfolder, type)
 }))
 
 const appendJsonExtMock = vi.fn((value: string) =>
@@ -123,7 +146,8 @@ vi.mock('@/utils/formatUtil', () => ({
 }))
 
 import { useJobMenu } from '@/composables/queue/useJobMenu'
-import type { TaskItemImpl } from '@/stores/queueStore'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import type { ResultItemImpl, TaskItemImpl } from '@/stores/queueStore'
 
 type MockTaskRef = Record<string, unknown>
 
@@ -181,9 +205,9 @@ describe('useJobMenu', () => {
     }))
     createAnnotatedPathMock.mockReturnValue('annotated-path')
     nodeDefStoreMock.nodeDefsByName = {
-      LoadImage: { id: 'LoadImage' },
-      LoadVideo: { id: 'LoadVideo' },
-      LoadAudio: { id: 'LoadAudio' }
+      LoadImage: { name: 'LoadImage' },
+      LoadVideo: { name: 'LoadVideo' },
+      LoadAudio: { name: 'LoadAudio' }
     }
     // Default: no workflow available via lazy loading
     getJobWorkflowMock.mockResolvedValue(undefined)
@@ -245,7 +269,7 @@ describe('useJobMenu', () => {
     ['initialization', interruptMock, deleteItemMock]
   ])('cancels %s job via interrupt', async (state) => {
     const { cancelJob } = mountJobMenu()
-    setCurrentItem(createJobItem({ state: state as any }))
+    setCurrentItem(createJobItem({ state: state as JobListItem['state'] }))
 
     await cancelJob()
 
@@ -280,7 +304,9 @@ describe('useJobMenu', () => {
     setCurrentItem(
       createJobItem({
         state: 'failed',
-        taskRef: { errorMessage: 'Something went wrong' } as any
+        taskRef: {
+          errorMessage: 'Something went wrong'
+        } as Partial<TaskItemImpl>
       })
     )
 
@@ -312,7 +338,7 @@ describe('useJobMenu', () => {
           errorMessage: 'CUDA out of memory',
           executionError,
           createTime: 12345
-        } as any
+        } as Partial<TaskItemImpl>
       })
     )
 
@@ -332,7 +358,9 @@ describe('useJobMenu', () => {
     setCurrentItem(
       createJobItem({
         state: 'failed',
-        taskRef: { errorMessage: 'Job failed with error' } as any
+        taskRef: {
+          errorMessage: 'Job failed with error'
+        } as Partial<TaskItemImpl>
       })
     )
 
@@ -354,7 +382,7 @@ describe('useJobMenu', () => {
     setCurrentItem(
       createJobItem({
         state: 'failed',
-        taskRef: { errorMessage: undefined } as any
+        taskRef: { errorMessage: undefined } as Partial<TaskItemImpl>
       })
     )
 
@@ -502,7 +530,12 @@ describe('useJobMenu', () => {
 
   it('ignores add-to-current entry when preview missing entirely', async () => {
     const { jobMenuEntries } = mountJobMenu()
-    setCurrentItem(createJobItem({ state: 'completed', taskRef: {} as any }))
+    setCurrentItem(
+      createJobItem({
+        state: 'completed',
+        taskRef: {} as Partial<TaskItemImpl>
+      })
+    )
 
     await nextTick()
     const entry = findActionEntry(jobMenuEntries.value, 'add-to-current')
@@ -531,7 +564,12 @@ describe('useJobMenu', () => {
 
   it('ignores download request when preview missing', async () => {
     const { jobMenuEntries } = mountJobMenu()
-    setCurrentItem(createJobItem({ state: 'completed', taskRef: {} as any }))
+    setCurrentItem(
+      createJobItem({
+        state: 'completed',
+        taskRef: {} as Partial<TaskItemImpl>
+      })
+    )
 
     await nextTick()
     const entry = findActionEntry(jobMenuEntries.value, 'download')
@@ -739,7 +777,7 @@ describe('useJobMenu', () => {
     setCurrentItem(
       createJobItem({
         state: 'failed',
-        taskRef: { errorMessage: 'Some error' } as any
+        taskRef: { errorMessage: 'Some error' } as Partial<TaskItemImpl>
       })
     )
 
diff --git a/src/composables/queue/useJobMenu.ts b/src/composables/queue/useJobMenu.ts
index b4208304e..b50a24846 100644
--- a/src/composables/queue/useJobMenu.ts
+++ b/src/composables/queue/useJobMenu.ts
@@ -6,6 +6,7 @@ import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { st, t } from '@/i18n'
 import { mapTaskOutputToAssetItem } from '@/platform/assets/composables/media/assetMappers'
 import { useMediaAssetActions } from '@/platform/assets/composables/useMediaAssetActions'
+import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
@@ -15,6 +16,7 @@ import { downloadBlob } from '@/scripts/utils'
 import { useDialogService } from '@/services/dialogService'
 import { getJobWorkflow } from '@/services/jobOutputCache'
 import { useLitegraphService } from '@/services/litegraphService'
+import { useExecutionStore } from '@/stores/executionStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useQueueStore } from '@/stores/queueStore'
 import type { ResultItemImpl, TaskItemImpl } from '@/stores/queueStore'
@@ -44,6 +46,7 @@ export function useJobMenu(
   const workflowStore = useWorkflowStore()
   const workflowService = useWorkflowService()
   const queueStore = useQueueStore()
+  const executionStore = useExecutionStore()
   const { copyToClipboard } = useCopyToClipboard()
   const litegraphService = useLitegraphService()
   const nodeDefStore = useNodeDefStore()
@@ -72,10 +75,15 @@ export function useJobMenu(
     const target = resolveItem(item)
     if (!target) return
     if (target.state === 'running' || target.state === 'initialization') {
-      await api.interrupt(target.id)
+      if (isCloud) {
+        await api.deleteItem('queue', target.id)
+      } else {
+        await api.interrupt(target.id)
+      }
     } else if (target.state === 'pending') {
       await api.deleteItem('queue', target.id)
     }
+    executionStore.clearInitializationByPromptId(target.id)
     await queueStore.update()
   }
 
diff --git a/src/composables/sidebarTabs/useAssetsSidebarTab.ts b/src/composables/sidebarTabs/useAssetsSidebarTab.ts
index ce3753173..cd8e8d0bb 100644
--- a/src/composables/sidebarTabs/useAssetsSidebarTab.ts
+++ b/src/composables/sidebarTabs/useAssetsSidebarTab.ts
@@ -1,6 +1,7 @@
 import { markRaw } from 'vue'
 
 import AssetsSidebarTab from '@/components/sidebar/tabs/AssetsSidebarTab.vue'
+import { useQueueStore } from '@/stores/queueStore'
 import type { SidebarTabExtension } from '@/types/extensionTypes'
 
 export const useAssetsSidebarTab = (): SidebarTabExtension => {
@@ -11,6 +12,12 @@ export const useAssetsSidebarTab = (): SidebarTabExtension => {
     tooltip: 'sideToolbar.assets',
     label: 'sideToolbar.labels.assets',
     component: markRaw(AssetsSidebarTab),
-    type: 'vue'
+    type: 'vue',
+    iconBadge: () => {
+      const queueStore = useQueueStore()
+      return queueStore.pendingTasks.length > 0
+        ? queueStore.pendingTasks.length.toString()
+        : null
+    }
   }
 }
diff --git a/src/composables/useBrowserTabTitle.test.ts b/src/composables/useBrowserTabTitle.test.ts
index 3c0cc623f..d25ec4fd2 100644
--- a/src/composables/useBrowserTabTitle.test.ts
+++ b/src/composables/useBrowserTabTitle.test.ts
@@ -11,13 +11,28 @@ vi.mock('@/i18n', () => ({
 }))
 
 // Mock the execution store
-const executionStore = reactive({
+const executionStore = reactive<{
+  isIdle: boolean
+  executionProgress: number
+  executingNode: unknown
+  executingNodeProgress: number
+  nodeProgressStates: Record<string, unknown>
+  activePrompt: {
+    workflow: {
+      changeTracker: {
+        activeState: {
+          nodes: { id: number; type: string }[]
+        }
+      }
+    }
+  } | null
+}>({
   isIdle: true,
   executionProgress: 0,
-  executingNode: null as any,
+  executingNode: null,
   executingNodeProgress: 0,
-  nodeProgressStates: {} as any,
-  activePrompt: null as any
+  nodeProgressStates: {},
+  activePrompt: null
 })
 vi.mock('@/stores/executionStore', () => ({
   useExecutionStore: () => executionStore
@@ -25,15 +40,21 @@ vi.mock('@/stores/executionStore', () => ({
 
 // Mock the setting store
 const settingStore = reactive({
-  get: vi.fn(() => 'Enabled')
+  get: vi.fn((_key: string) => 'Enabled')
 })
 vi.mock('@/platform/settings/settingStore', () => ({
   useSettingStore: () => settingStore
 }))
 
 // Mock the workflow store
-const workflowStore = reactive({
-  activeWorkflow: null as any
+const workflowStore = reactive<{
+  activeWorkflow: {
+    filename: string
+    isModified: boolean
+    isPersisted: boolean
+  } | null
+}>({
+  activeWorkflow: null
 })
 vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
   useWorkflowStore: () => workflowStore
@@ -52,13 +73,13 @@ describe('useBrowserTabTitle', () => {
     // reset execution store
     executionStore.isIdle = true
     executionStore.executionProgress = 0
-    executionStore.executingNode = null as any
+    executionStore.executingNode = null
     executionStore.executingNodeProgress = 0
     executionStore.nodeProgressStates = {}
     executionStore.activePrompt = null
 
     // reset setting and workflow stores
-    ;(settingStore.get as any).mockReturnValue('Enabled')
+    vi.mocked(settingStore.get).mockReturnValue('Enabled')
     workflowStore.activeWorkflow = null
     workspaceStore.shiftDown = false
 
@@ -74,7 +95,7 @@ describe('useBrowserTabTitle', () => {
   })
 
   it('sets workflow name as title when workflow exists and menu enabled', async () => {
-    ;(settingStore.get as any).mockReturnValue('Enabled')
+    vi.mocked(settingStore.get).mockReturnValue('Enabled')
     workflowStore.activeWorkflow = {
       filename: 'myFlow',
       isModified: false,
@@ -88,7 +109,7 @@ describe('useBrowserTabTitle', () => {
   })
 
   it('adds asterisk for unsaved workflow', async () => {
-    ;(settingStore.get as any).mockReturnValue('Enabled')
+    vi.mocked(settingStore.get).mockReturnValue('Enabled')
     workflowStore.activeWorkflow = {
       filename: 'myFlow',
       isModified: true,
@@ -102,7 +123,7 @@ describe('useBrowserTabTitle', () => {
   })
 
   it('hides asterisk when autosave is enabled', async () => {
-    ;(settingStore.get as any).mockImplementation((key: string) => {
+    vi.mocked(settingStore.get).mockImplementation((key: string) => {
       if (key === 'Comfy.Workflow.AutoSave') return 'after delay'
       if (key === 'Comfy.UseNewMenu') return 'Enabled'
       return 'Enabled'
@@ -118,7 +139,7 @@ describe('useBrowserTabTitle', () => {
   })
 
   it('hides asterisk while Shift key is held', async () => {
-    ;(settingStore.get as any).mockImplementation((key: string) => {
+    vi.mocked(settingStore.get).mockImplementation((key: string) => {
       if (key === 'Comfy.Workflow.AutoSave') return 'off'
       if (key === 'Comfy.UseNewMenu') return 'Enabled'
       return 'Enabled'
@@ -137,7 +158,7 @@ describe('useBrowserTabTitle', () => {
   // Fails when run together with other tests. Suspect to be caused by leaked
   // state from previous tests.
   it.skip('disables workflow title when menu disabled', async () => {
-    ;(settingStore.get as any).mockReturnValue('Disabled')
+    vi.mocked(settingStore.get).mockReturnValue('Disabled')
     workflowStore.activeWorkflow = {
       filename: 'myFlow',
       isModified: false,
diff --git a/src/composables/useCachedRequest.test.ts b/src/composables/useCachedRequest.test.ts
index 08faa3aaf..06d344ae1 100644
--- a/src/composables/useCachedRequest.test.ts
+++ b/src/composables/useCachedRequest.test.ts
@@ -4,7 +4,7 @@ import { useCachedRequest } from '@/composables/useCachedRequest'
 
 describe('useCachedRequest', () => {
   let mockRequestFn: (
-    params: any,
+    params: unknown,
     signal?: AbortSignal
   ) => Promise<unknown | null>
   let abortSpy: () => void
@@ -25,7 +25,7 @@ describe('useCachedRequest', () => {
     )
 
     // Create a mock request function that returns different results based on params
-    mockRequestFn = vi.fn(async (params: any) => {
+    mockRequestFn = vi.fn(async (params: unknown) => {
       // Simulate a request that takes some time
       await new Promise((resolve) => setTimeout(resolve, 8))
 
@@ -138,12 +138,18 @@ describe('useCachedRequest', () => {
 
   it('should use custom cache key function if provided', async () => {
     // Create a cache key function that sorts object keys
-    const cacheKeyFn = (params: any) => {
+    const cacheKeyFn = (params: unknown) => {
       if (typeof params !== 'object' || params === null) return String(params)
       return JSON.stringify(
-        Object.keys(params)
+        Object.keys(params as Record<string, unknown>)
           .sort()
-          .reduce((acc, key) => ({ ...acc, [key]: params[key] }), {})
+          .reduce(
+            (acc, key) => ({
+              ...acc,
+              [key]: (params as Record<string, unknown>)[key]
+            }),
+            {}
+          )
       )
     }
 
diff --git a/src/composables/useContextMenuTranslation.ts b/src/composables/useContextMenuTranslation.ts
index 7b031d7ee..0c69343f5 100644
--- a/src/composables/useContextMenuTranslation.ts
+++ b/src/composables/useContextMenuTranslation.ts
@@ -123,8 +123,7 @@ export const useContextMenuTranslation = () => {
       }
 
       // for capture translation text of input and widget
-      const extraInfo = (options.extra ||
-        options.parentMenu?.options?.extra) as
+      const extraInfo = (options.extra || options.parentMenu?.options?.extra) as
         | { inputs?: INodeInputSlot[]; widgets?: IWidget[] }
         | undefined
       // widgets and inputs
diff --git a/src/composables/useCoreCommands.test.ts b/src/composables/useCoreCommands.test.ts
index 82e3439bc..b4c230bb2 100644
--- a/src/composables/useCoreCommands.test.ts
+++ b/src/composables/useCoreCommands.test.ts
@@ -3,9 +3,11 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { ref } from 'vue'
 
 import { useCoreCommands } from '@/composables/useCoreCommands'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
+import { createMockLGraphNode } from '@/utils/__tests__/litegraphTestUtils'
 
 // Mock vue-i18n for useExternalLink
 const mockLocale = ref('en')
@@ -106,30 +108,84 @@ vi.mock('@/platform/cloud/subscription/composables/useSubscription', () => ({
 }))
 
 describe('useCoreCommands', () => {
-  const mockSubgraph = {
-    nodes: [
-      // Mock input node
-      {
-        constructor: { comfyClass: 'SubgraphInputNode' },
-        id: 'input1'
-      },
-      // Mock output node
-      {
-        constructor: { comfyClass: 'SubgraphOutputNode' },
-        id: 'output1'
-      },
-      // Mock user node
-      {
-        constructor: { comfyClass: 'SomeUserNode' },
-        id: 'user1'
-      },
-      // Another mock user node
-      {
-        constructor: { comfyClass: 'AnotherUserNode' },
-        id: 'user2'
+  const createMockNode = (id: number, comfyClass: string): LGraphNode => {
+    const baseNode = createMockLGraphNode({ id })
+    return Object.assign(baseNode, {
+      constructor: {
+        ...baseNode.constructor,
+        comfyClass
       }
-    ],
-    remove: vi.fn()
+    })
+  }
+
+  const createMockSubgraph = () => {
+    const mockNodes = [
+      // Mock input node
+      createMockNode(1, 'SubgraphInputNode'),
+      // Mock output node
+      createMockNode(2, 'SubgraphOutputNode'),
+      // Mock user node
+      createMockNode(3, 'SomeUserNode'),
+      // Another mock user node
+      createMockNode(4, 'AnotherUserNode')
+    ]
+
+    return {
+      nodes: mockNodes,
+      remove: vi.fn(),
+      events: {
+        dispatch: vi.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn()
+      },
+      name: 'test-subgraph',
+      inputNode: undefined,
+      outputNode: undefined,
+      add: vi.fn(),
+      clear: vi.fn(),
+      serialize: vi.fn(),
+      configure: vi.fn(),
+      start: vi.fn(),
+      stop: vi.fn(),
+      runStep: vi.fn(),
+      findNodeByTitle: vi.fn(),
+      findNodesByTitle: vi.fn(),
+      findNodesByType: vi.fn(),
+      findNodeById: vi.fn(),
+      getNodeById: vi.fn(),
+      setDirtyCanvas: vi.fn(),
+      sendActionToCanvas: vi.fn()
+    } as Partial<typeof app.canvas.subgraph> as typeof app.canvas.subgraph
+  }
+
+  const mockSubgraph = createMockSubgraph()
+
+  function createMockSettingStore(
+    getReturnValue: boolean
+  ): ReturnType<typeof useSettingStore> {
+    return {
+      get: vi.fn().mockReturnValue(getReturnValue),
+      addSetting: vi.fn(),
+      loadSettingValues: vi.fn(),
+      set: vi.fn(),
+      exists: vi.fn(),
+      getDefaultValue: vi.fn(),
+      settingValues: {},
+      settingsById: {},
+      $id: 'setting',
+      $state: {
+        settingValues: {},
+        settingsById: {}
+      },
+      $patch: vi.fn(),
+      $reset: vi.fn(),
+      $subscribe: vi.fn(),
+      $onAction: vi.fn(),
+      $dispose: vi.fn(),
+      _customProperties: new Set(),
+      _p: {}
+    } as ReturnType<typeof useSettingStore>
   }
 
   beforeEach(() => {
@@ -142,9 +198,7 @@ describe('useCoreCommands', () => {
     app.canvas.subgraph = undefined
 
     // Mock settings store
-    vi.mocked(useSettingStore).mockReturnValue({
-      get: vi.fn().mockReturnValue(false) // Skip confirmation dialog
-    } as any)
+    vi.mocked(useSettingStore).mockReturnValue(createMockSettingStore(false))
 
     // Mock global confirm
     global.confirm = vi.fn().mockReturnValue(true)
@@ -167,7 +221,7 @@ describe('useCoreCommands', () => {
 
     it('should preserve input/output nodes when clearing subgraph', async () => {
       // Set up subgraph context
-      app.canvas.subgraph = mockSubgraph as any
+      app.canvas.subgraph = mockSubgraph
 
       const commands = useCoreCommands()
       const clearCommand = commands.find(
@@ -181,24 +235,19 @@ describe('useCoreCommands', () => {
       expect(app.rootGraph.clear).not.toHaveBeenCalled()
 
       // Should only remove user nodes, not input/output nodes
-      expect(mockSubgraph.remove).toHaveBeenCalledTimes(2)
-      expect(mockSubgraph.remove).toHaveBeenCalledWith(mockSubgraph.nodes[2]) // user1
-      expect(mockSubgraph.remove).toHaveBeenCalledWith(mockSubgraph.nodes[3]) // user2
-      expect(mockSubgraph.remove).not.toHaveBeenCalledWith(
-        mockSubgraph.nodes[0]
-      ) // input1
-      expect(mockSubgraph.remove).not.toHaveBeenCalledWith(
-        mockSubgraph.nodes[1]
-      ) // output1
+      const subgraph = app.canvas.subgraph!
+      expect(subgraph.remove).toHaveBeenCalledTimes(2)
+      expect(subgraph.remove).toHaveBeenCalledWith(subgraph.nodes[2]) // user1
+      expect(subgraph.remove).toHaveBeenCalledWith(subgraph.nodes[3]) // user2
+      expect(subgraph.remove).not.toHaveBeenCalledWith(subgraph.nodes[0]) // input1
+      expect(subgraph.remove).not.toHaveBeenCalledWith(subgraph.nodes[1]) // output1
 
       expect(api.dispatchCustomEvent).toHaveBeenCalledWith('graphCleared')
     })
 
     it('should respect confirmation setting', async () => {
       // Mock confirmation required
-      vi.mocked(useSettingStore).mockReturnValue({
-        get: vi.fn().mockReturnValue(true) // Require confirmation
-      } as any)
+      vi.mocked(useSettingStore).mockReturnValue(createMockSettingStore(true))
 
       global.confirm = vi.fn().mockReturnValue(false) // User cancels
 
diff --git a/src/composables/useCoreCommands.ts b/src/composables/useCoreCommands.ts
index 6873216aa..8f3f72304 100644
--- a/src/composables/useCoreCommands.ts
+++ b/src/composables/useCoreCommands.ts
@@ -1235,8 +1235,11 @@ export function useCoreCommands(): ComfyCommand[] {
       id: 'Comfy.ToggleLinear',
       icon: 'pi pi-database',
       label: 'Toggle Simple Mode',
-      function: () => {
+      function: (metadata?: Record<string, unknown>) => {
+        const source =
+          typeof metadata?.source === 'string' ? metadata.source : 'keybind'
         const newMode = !canvasStore.linearMode
+        if (newMode) useTelemetry()?.trackEnterLinear({ source })
         app.rootGraph.extra.linearMode = newMode
         workflowStore.activeWorkflow?.changeTracker?.checkState()
         canvasStore.linearMode = newMode
diff --git a/src/composables/useFeatureFlags.test.ts b/src/composables/useFeatureFlags.test.ts
index eddb57b65..c2b3634f7 100644
--- a/src/composables/useFeatureFlags.test.ts
+++ b/src/composables/useFeatureFlags.test.ts
@@ -30,8 +30,7 @@ describe('useFeatureFlags', () => {
     it('should access supportsPreviewMetadata', () => {
       vi.mocked(api.getServerFeature).mockImplementation(
         (path, defaultValue) => {
-          if (path === ServerFeatureFlag.SUPPORTS_PREVIEW_METADATA)
-            return true as any
+          if (path === ServerFeatureFlag.SUPPORTS_PREVIEW_METADATA) return true
           return defaultValue
         }
       )
@@ -46,8 +45,7 @@ describe('useFeatureFlags', () => {
     it('should access maxUploadSize', () => {
       vi.mocked(api.getServerFeature).mockImplementation(
         (path, defaultValue) => {
-          if (path === ServerFeatureFlag.MAX_UPLOAD_SIZE)
-            return 209715200 as any // 200MB
+          if (path === ServerFeatureFlag.MAX_UPLOAD_SIZE) return 209715200 // 200MB
           return defaultValue
         }
       )
@@ -62,7 +60,7 @@ describe('useFeatureFlags', () => {
     it('should access supportsManagerV4', () => {
       vi.mocked(api.getServerFeature).mockImplementation(
         (path, defaultValue) => {
-          if (path === ServerFeatureFlag.MANAGER_SUPPORTS_V4) return true as any
+          if (path === ServerFeatureFlag.MANAGER_SUPPORTS_V4) return true
           return defaultValue
         }
       )
@@ -76,7 +74,7 @@ describe('useFeatureFlags', () => {
 
     it('should return undefined when features are not available and no default provided', () => {
       vi.mocked(api.getServerFeature).mockImplementation(
-        (_path, defaultValue) => defaultValue as any
+        (_path, defaultValue) => defaultValue
       )
 
       const { flags } = useFeatureFlags()
@@ -90,7 +88,7 @@ describe('useFeatureFlags', () => {
     it('should create reactive computed for custom feature flags', () => {
       vi.mocked(api.getServerFeature).mockImplementation(
         (path, defaultValue) => {
-          if (path === 'custom.feature') return 'custom-value' as any
+          if (path === 'custom.feature') return 'custom-value'
           return defaultValue
         }
       )
@@ -108,7 +106,7 @@ describe('useFeatureFlags', () => {
     it('should handle nested paths', () => {
       vi.mocked(api.getServerFeature).mockImplementation(
         (path, defaultValue) => {
-          if (path === 'extension.custom.nested.feature') return true as any
+          if (path === 'extension.custom.nested.feature') return true
           return defaultValue
         }
       )
@@ -122,8 +120,7 @@ describe('useFeatureFlags', () => {
     it('should work with ServerFeatureFlag enum', () => {
       vi.mocked(api.getServerFeature).mockImplementation(
         (path, defaultValue) => {
-          if (path === ServerFeatureFlag.MAX_UPLOAD_SIZE)
-            return 104857600 as any
+          if (path === ServerFeatureFlag.MAX_UPLOAD_SIZE) return 104857600
           return defaultValue
         }
       )
diff --git a/src/composables/useFeatureFlags.ts b/src/composables/useFeatureFlags.ts
index 136b7ccd1..ca54bb9c6 100644
--- a/src/composables/useFeatureFlags.ts
+++ b/src/composables/useFeatureFlags.ts
@@ -1,5 +1,6 @@
 import { computed, reactive, readonly } from 'vue'
 
+import { isCloud } from '@/platform/distribution/types'
 import { remoteConfig } from '@/platform/remoteConfig/remoteConfig'
 import { api } from '@/scripts/api'
 
@@ -95,6 +96,8 @@ export function useFeatureFlags() {
       )
     },
     get teamWorkspacesEnabled() {
+      if (!isCloud) return false
+
       return (
         remoteConfig.value.team_workspaces_enabled ??
         api.getServerFeature(ServerFeatureFlag.TEAM_WORKSPACES_ENABLED, false)
diff --git a/src/composables/useLoad3d.test.ts b/src/composables/useLoad3d.test.ts
index 833e95efd..dafc19931 100644
--- a/src/composables/useLoad3d.test.ts
+++ b/src/composables/useLoad3d.test.ts
@@ -1,11 +1,19 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { nextTick, ref } from 'vue'
+import { nextTick, ref, shallowRef } from 'vue'
 
 import { nodeToLoad3dMap, useLoad3d } from '@/composables/useLoad3d'
 import Load3d from '@/extensions/core/load3d/Load3d'
 import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
+import type { Size } from '@/lib/litegraph/src/interfaces'
+import type { LGraph } from '@/lib/litegraph/src/LGraph'
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import type { IWidget } from '@/lib/litegraph/src/types/widgets'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import { api } from '@/scripts/api'
+import {
+  createMockCanvasPointerEvent,
+  createMockLGraphNode
+} from '@/utils/__tests__/litegraphTestUtils'
 
 vi.mock('@/extensions/core/load3d/Load3d', () => ({
   default: vi.fn()
@@ -36,15 +44,15 @@ vi.mock('@/i18n', () => ({
 }))
 
 describe('useLoad3d', () => {
-  let mockLoad3d: any
-  let mockNode: any
-  let mockToastStore: any
+  let mockLoad3d: Partial<Load3d>
+  let mockNode: LGraphNode
+  let mockToastStore: ReturnType<typeof useToastStore>
 
   beforeEach(() => {
     vi.clearAllMocks()
     nodeToLoad3dMap.clear()
 
-    mockNode = {
+    mockNode = createMockLGraphNode({
       properties: {
         'Scene Config': {
           showGrid: true,
@@ -68,18 +76,21 @@ describe('useLoad3d', () => {
         'Resource Folder': ''
       },
       widgets: [
-        { name: 'width', value: 512 },
-        { name: 'height', value: 512 }
+        { name: 'width', value: 512, type: 'number' } as IWidget,
+        { name: 'height', value: 512, type: 'number' } as IWidget
       ],
       graph: {
         setDirtyCanvas: vi.fn()
-      },
+      } as Partial<LGraph> as LGraph,
       flags: {},
-      onMouseEnter: null,
-      onMouseLeave: null,
-      onResize: null,
-      onDrawBackground: null
-    }
+      onMouseEnter: undefined,
+      onMouseLeave: undefined,
+      onResize: undefined,
+      onDrawBackground: undefined
+    })
+
+    const mockCanvas = document.createElement('canvas')
+    mockCanvas.hidden = false
 
     mockLoad3d = {
       toggleGrid: vi.fn(),
@@ -114,19 +125,20 @@ describe('useLoad3d', () => {
       removeEventListener: vi.fn(),
       remove: vi.fn(),
       renderer: {
-        domElement: {
-          hidden: false
-        }
-      }
+        domElement: mockCanvas
+      } as Partial<Load3d['renderer']> as Load3d['renderer']
     }
 
-    vi.mocked(Load3d).mockImplementation(function () {
+    vi.mocked(Load3d).mockImplementation(function (this: Load3d) {
       Object.assign(this, mockLoad3d)
+      return this
     })
 
     mockToastStore = {
       addAlert: vi.fn()
-    }
+    } as Partial<ReturnType<typeof useToastStore>> as ReturnType<
+      typeof useToastStore
+    >
     vi.mocked(useToastStore).mockReturnValue(mockToastStore)
   })
 
@@ -208,14 +220,14 @@ describe('useLoad3d', () => {
       expect(mockNode.onDrawBackground).toBeDefined()
 
       // Test the handlers
-      mockNode.onMouseEnter()
+      mockNode.onMouseEnter?.(createMockCanvasPointerEvent(0, 0))
       expect(mockLoad3d.refreshViewport).toHaveBeenCalled()
       expect(mockLoad3d.updateStatusMouseOnNode).toHaveBeenCalledWith(true)
 
-      mockNode.onMouseLeave()
+      mockNode.onMouseLeave?.(createMockCanvasPointerEvent(0, 0))
       expect(mockLoad3d.updateStatusMouseOnNode).toHaveBeenCalledWith(false)
 
-      mockNode.onResize()
+      mockNode.onResize?.([512, 512] as Size)
       expect(mockLoad3d.handleResize).toHaveBeenCalled()
     })
 
@@ -226,13 +238,17 @@ describe('useLoad3d', () => {
       await composable.initializeLoad3d(containerRef)
 
       mockNode.flags.collapsed = true
-      mockNode.onDrawBackground()
+      mockNode.onDrawBackground?.({} as CanvasRenderingContext2D)
 
-      expect(mockLoad3d.renderer.domElement.hidden).toBe(true)
+      expect(mockLoad3d.renderer!.domElement.hidden).toBe(true)
     })
 
     it('should load model if model_file widget exists', async () => {
-      mockNode.widgets.push({ name: 'model_file', value: 'test.glb' })
+      mockNode.widgets!.push({
+        name: 'model_file',
+        value: 'test.glb',
+        type: 'text'
+      } as IWidget)
       vi.mocked(Load3dUtils.splitFilePath).mockReturnValue([
         'subfolder',
         'test.glb'
@@ -255,8 +271,12 @@ describe('useLoad3d', () => {
     })
 
     it('should restore camera state after loading model', async () => {
-      mockNode.widgets.push({ name: 'model_file', value: 'test.glb' })
-      mockNode.properties['Camera Config'].state = {
+      mockNode.widgets!.push({
+        name: 'model_file',
+        value: 'test.glb',
+        type: 'text'
+      } as IWidget)
+      ;(mockNode.properties!['Camera Config'] as { state: unknown }).state = {
         position: { x: 1, y: 2, z: 3 },
         target: { x: 0, y: 0, z: 0 }
       }
@@ -312,13 +332,13 @@ describe('useLoad3d', () => {
     it('should handle missing container or node', async () => {
       const composable = useLoad3d(mockNode)
 
-      await composable.initializeLoad3d(null as any)
+      await composable.initializeLoad3d(null!)
 
       expect(Load3d).not.toHaveBeenCalled()
     })
 
     it('should accept ref as parameter', () => {
-      const nodeRef = ref(mockNode)
+      const nodeRef = shallowRef<LGraphNode | null>(mockNode)
       const composable = useLoad3d(nodeRef)
 
       expect(composable.sceneConfig.value.backgroundColor).toBe('#000000')
@@ -370,9 +390,9 @@ describe('useLoad3d', () => {
 
       await composable.initializeLoad3d(containerRef)
 
-      mockLoad3d.toggleGrid.mockClear()
-      mockLoad3d.setBackgroundColor.mockClear()
-      mockLoad3d.setBackgroundImage.mockClear()
+      vi.mocked(mockLoad3d.toggleGrid!).mockClear()
+      vi.mocked(mockLoad3d.setBackgroundColor!).mockClear()
+      vi.mocked(mockLoad3d.setBackgroundImage!).mockClear()
 
       composable.sceneConfig.value = {
         showGrid: false,
@@ -403,8 +423,8 @@ describe('useLoad3d', () => {
       await composable.initializeLoad3d(containerRef)
       await nextTick()
 
-      mockLoad3d.setUpDirection.mockClear()
-      mockLoad3d.setMaterialMode.mockClear()
+      vi.mocked(mockLoad3d.setUpDirection!).mockClear()
+      vi.mocked(mockLoad3d.setMaterialMode!).mockClear()
 
       composable.modelConfig.value.upDirection = '+y'
       composable.modelConfig.value.materialMode = 'wireframe'
@@ -426,8 +446,8 @@ describe('useLoad3d', () => {
       await composable.initializeLoad3d(containerRef)
       await nextTick()
 
-      mockLoad3d.toggleCamera.mockClear()
-      mockLoad3d.setFOV.mockClear()
+      vi.mocked(mockLoad3d.toggleCamera!).mockClear()
+      vi.mocked(mockLoad3d.setFOV!).mockClear()
 
       composable.cameraConfig.value.cameraType = 'orthographic'
       composable.cameraConfig.value.fov = 90
@@ -449,7 +469,7 @@ describe('useLoad3d', () => {
       await composable.initializeLoad3d(containerRef)
       await nextTick()
 
-      mockLoad3d.setLightIntensity.mockClear()
+      vi.mocked(mockLoad3d.setLightIntensity!).mockClear()
 
       composable.lightConfig.value.intensity = 10
       await nextTick()
@@ -589,7 +609,7 @@ describe('useLoad3d', () => {
     })
 
     it('should use resource folder for upload', async () => {
-      mockNode.properties['Resource Folder'] = 'subfolder'
+      mockNode.properties!['Resource Folder'] = 'subfolder'
       vi.mocked(Load3dUtils.uploadFile).mockResolvedValue('uploaded-image.jpg')
 
       const composable = useLoad3d(mockNode)
@@ -641,7 +661,9 @@ describe('useLoad3d', () => {
     })
 
     it('should handle export errors', async () => {
-      mockLoad3d.exportModel.mockRejectedValueOnce(new Error('Export failed'))
+      vi.mocked(mockLoad3d.exportModel!).mockRejectedValueOnce(
+        new Error('Export failed')
+      )
 
       const composable = useLoad3d(mockNode)
       const containerRef = document.createElement('div')
@@ -719,12 +741,12 @@ describe('useLoad3d', () => {
     })
 
     it('should handle materialModeChange event', async () => {
-      let materialModeHandler: any
+      let materialModeHandler: ((mode: string) => void) | undefined
 
-      mockLoad3d.addEventListener.mockImplementation(
-        (event: string, handler: any) => {
+      vi.mocked(mockLoad3d.addEventListener!).mockImplementation(
+        (event: string, handler: unknown) => {
           if (event === 'materialModeChange') {
-            materialModeHandler = handler
+            materialModeHandler = handler as (mode: string) => void
           }
         }
       )
@@ -734,21 +756,21 @@ describe('useLoad3d', () => {
 
       await composable.initializeLoad3d(containerRef)
 
-      materialModeHandler('wireframe')
+      materialModeHandler?.('wireframe')
 
       expect(composable.modelConfig.value.materialMode).toBe('wireframe')
     })
 
     it('should handle loading events', async () => {
-      let modelLoadingStartHandler: any
-      let modelLoadingEndHandler: any
+      let modelLoadingStartHandler: (() => void) | undefined
+      let modelLoadingEndHandler: (() => void) | undefined
 
-      mockLoad3d.addEventListener.mockImplementation(
-        (event: string, handler: any) => {
+      vi.mocked(mockLoad3d.addEventListener!).mockImplementation(
+        (event: string, handler: unknown) => {
           if (event === 'modelLoadingStart') {
-            modelLoadingStartHandler = handler
+            modelLoadingStartHandler = handler as () => void
           } else if (event === 'modelLoadingEnd') {
-            modelLoadingEndHandler = handler
+            modelLoadingEndHandler = handler as () => void
           }
         }
       )
@@ -758,22 +780,22 @@ describe('useLoad3d', () => {
 
       await composable.initializeLoad3d(containerRef)
 
-      modelLoadingStartHandler()
+      modelLoadingStartHandler?.()
       expect(composable.loading.value).toBe(true)
       expect(composable.loadingMessage.value).toBe('load3d.loadingModel')
 
-      modelLoadingEndHandler()
+      modelLoadingEndHandler?.()
       expect(composable.loading.value).toBe(false)
       expect(composable.loadingMessage.value).toBe('')
     })
 
     it('should handle recordingStatusChange event', async () => {
-      let recordingStatusHandler: any
+      let recordingStatusHandler: ((status: boolean) => void) | undefined
 
-      mockLoad3d.addEventListener.mockImplementation(
-        (event: string, handler: any) => {
+      vi.mocked(mockLoad3d.addEventListener!).mockImplementation(
+        (event: string, handler: unknown) => {
           if (event === 'recordingStatusChange') {
-            recordingStatusHandler = handler
+            recordingStatusHandler = handler as (status: boolean) => void
           }
         }
       )
@@ -783,7 +805,7 @@ describe('useLoad3d', () => {
 
       await composable.initializeLoad3d(containerRef)
 
-      recordingStatusHandler(false)
+      recordingStatusHandler?.(false)
 
       expect(composable.isRecording.value).toBe(false)
       expect(composable.recordingDuration.value).toBe(10)
@@ -814,10 +836,11 @@ describe('useLoad3d', () => {
 
   describe('getModelUrl', () => {
     it('should handle http URLs directly', async () => {
-      mockNode.widgets.push({
+      mockNode.widgets!.push({
         name: 'model_file',
-        value: 'http://example.com/model.glb'
-      })
+        value: 'http://example.com/model.glb',
+        type: 'text'
+      } as IWidget)
 
       const composable = useLoad3d(mockNode)
       const containerRef = document.createElement('div')
@@ -830,7 +853,11 @@ describe('useLoad3d', () => {
     })
 
     it('should construct URL for local files', async () => {
-      mockNode.widgets.push({ name: 'model_file', value: 'models/test.glb' })
+      mockNode.widgets!.push({
+        name: 'model_file',
+        value: 'models/test.glb',
+        type: 'text'
+      } as IWidget)
       vi.mocked(Load3dUtils.splitFilePath).mockReturnValue([
         'models',
         'test.glb'
@@ -860,7 +887,9 @@ describe('useLoad3d', () => {
     })
 
     it('should use output type for preview mode', async () => {
-      mockNode.widgets = [{ name: 'model_file', value: 'test.glb' }] // No width/height widgets
+      mockNode.widgets = [
+        { name: 'model_file', value: 'test.glb', type: 'text' } as IWidget
+      ] // No width/height widgets
       vi.mocked(Load3dUtils.splitFilePath).mockReturnValue(['', 'test.glb'])
       vi.mocked(Load3dUtils.getResourceURL).mockReturnValue(
         '/api/view/test.glb'
@@ -894,10 +923,10 @@ describe('useLoad3d', () => {
     })
 
     it('should handle missing configurations', async () => {
-      delete mockNode.properties['Scene Config']
-      delete mockNode.properties['Model Config']
-      delete mockNode.properties['Camera Config']
-      delete mockNode.properties['Light Config']
+      delete mockNode.properties!['Scene Config']
+      delete mockNode.properties!['Model Config']
+      delete mockNode.properties!['Camera Config']
+      delete mockNode.properties!['Light Config']
 
       const composable = useLoad3d(mockNode)
       const containerRef = document.createElement('div')
@@ -909,7 +938,11 @@ describe('useLoad3d', () => {
     })
 
     it('should handle background image with existing config', async () => {
-      mockNode.properties['Scene Config'].backgroundImage = 'existing.jpg'
+      ;(
+        mockNode.properties!['Scene Config'] as {
+          backgroundImage: string
+        }
+      ).backgroundImage = 'existing.jpg'
 
       const composable = useLoad3d(mockNode)
       const containerRef = document.createElement('div')
diff --git a/src/composables/useLoad3dDrag.test.ts b/src/composables/useLoad3dDrag.test.ts
index f35c5c736..a682f5af8 100644
--- a/src/composables/useLoad3dDrag.test.ts
+++ b/src/composables/useLoad3dDrag.test.ts
@@ -3,6 +3,7 @@ import { ref } from 'vue'
 
 import { useLoad3dDrag } from '@/composables/useLoad3dDrag'
 import { useToastStore } from '@/platform/updates/common/toastStore'
+import { createMockFileList } from '@/utils/__tests__/litegraphTestUtils'
 
 vi.mock('@/platform/updates/common/toastStore', () => ({
   useToastStore: vi.fn()
@@ -19,22 +20,22 @@ function createMockDragEvent(
   const files = options.files || []
   const types = options.hasFiles ? ['Files'] : []
 
-  const dataTransfer = {
+  const dataTransfer: Partial<DataTransfer> = {
     types,
-    files,
+    files: createMockFileList(files),
     dropEffect: 'none' as DataTransfer['dropEffect']
   }
 
-  const event = {
+  const event: Partial<DragEvent> = {
     type,
-    dataTransfer
-  } as unknown as DragEvent
+    dataTransfer: dataTransfer as DataTransfer
+  }
 
-  return event
+  return event as DragEvent
 }
 
 describe('useLoad3dDrag', () => {
-  let mockToastStore: any
+  let mockToastStore: ReturnType<typeof useToastStore>
   let mockOnModelDrop: (file: File) => void | Promise<void>
 
   beforeEach(() => {
@@ -42,7 +43,9 @@ describe('useLoad3dDrag', () => {
 
     mockToastStore = {
       addAlert: vi.fn()
-    }
+    } as Partial<ReturnType<typeof useToastStore>> as ReturnType<
+      typeof useToastStore
+    >
     vi.mocked(useToastStore).mockReturnValue(mockToastStore)
 
     mockOnModelDrop = vi.fn()
diff --git a/src/composables/useLoad3dViewer.test.ts b/src/composables/useLoad3dViewer.test.ts
index 77a8e50a0..757e1400d 100644
--- a/src/composables/useLoad3dViewer.test.ts
+++ b/src/composables/useLoad3dViewer.test.ts
@@ -4,8 +4,11 @@ import { nextTick } from 'vue'
 import { useLoad3dViewer } from '@/composables/useLoad3dViewer'
 import Load3d from '@/extensions/core/load3d/Load3d'
 import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
+import type { LGraph } from '@/lib/litegraph/src/LGraph'
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import { useLoad3dService } from '@/services/load3dService'
+import { createMockLGraphNode } from '@/utils/__tests__/litegraphTestUtils'
 
 vi.mock('@/services/load3dService', () => ({
   useLoad3dService: vi.fn()
@@ -29,17 +32,32 @@ vi.mock('@/extensions/core/load3d/Load3d', () => ({
   default: vi.fn()
 }))
 
+function createMockSceneManager(): Load3d['sceneManager'] {
+  const mock: Partial<Load3d['sceneManager']> = {
+    scene: {} as Load3d['sceneManager']['scene'],
+    backgroundScene: {} as Load3d['sceneManager']['backgroundScene'],
+    backgroundCamera: {} as Load3d['sceneManager']['backgroundCamera'],
+    currentBackgroundColor: '#282828',
+    gridHelper: { visible: true } as Load3d['sceneManager']['gridHelper'],
+    getCurrentBackgroundInfo: vi.fn().mockReturnValue({
+      type: 'color',
+      value: '#282828'
+    })
+  }
+  return mock as Load3d['sceneManager']
+}
+
 describe('useLoad3dViewer', () => {
-  let mockLoad3d: any
-  let mockSourceLoad3d: any
-  let mockLoad3dService: any
-  let mockToastStore: any
-  let mockNode: any
+  let mockLoad3d: Partial<Load3d>
+  let mockSourceLoad3d: Partial<Load3d>
+  let mockLoad3dService: ReturnType<typeof useLoad3dService>
+  let mockToastStore: ReturnType<typeof useToastStore>
+  let mockNode: LGraphNode
 
   beforeEach(() => {
     vi.clearAllMocks()
 
-    mockNode = {
+    mockNode = createMockLGraphNode({
       properties: {
         'Scene Config': {
           backgroundColor: '#282828',
@@ -62,9 +80,9 @@ describe('useLoad3dViewer', () => {
       },
       graph: {
         setDirtyCanvas: vi.fn()
-      },
+      } as Partial<LGraph> as LGraph,
       widgets: []
-    } as any
+    })
 
     mockLoad3d = {
       setBackgroundColor: vi.fn(),
@@ -97,24 +115,17 @@ describe('useLoad3dViewer', () => {
         zoom: 1,
         cameraType: 'perspective'
       }),
-      sceneManager: {
-        currentBackgroundColor: '#282828',
-        gridHelper: { visible: true },
-        getCurrentBackgroundInfo: vi.fn().mockReturnValue({
-          type: 'color',
-          value: '#282828'
-        })
-      },
+      sceneManager: createMockSceneManager(),
       lightingManager: {
         lights: [null, { intensity: 1 }]
-      },
+      } as Load3d['lightingManager'],
       cameraManager: {
         perspectiveCamera: { fov: 75 }
-      },
+      } as Load3d['cameraManager'],
       modelManager: {
         currentUpDirection: 'original',
         materialMode: 'original'
-      },
+      } as Load3d['modelManager'],
       setBackgroundImage: vi.fn().mockResolvedValue(undefined),
       setBackgroundRenderMode: vi.fn(),
       forceRender: vi.fn()
@@ -128,12 +139,16 @@ describe('useLoad3dViewer', () => {
       copyLoad3dState: vi.fn().mockResolvedValue(undefined),
       handleViewportRefresh: vi.fn(),
       getLoad3d: vi.fn().mockReturnValue(mockSourceLoad3d)
-    }
+    } as Partial<ReturnType<typeof useLoad3dService>> as ReturnType<
+      typeof useLoad3dService
+    >
     vi.mocked(useLoad3dService).mockReturnValue(mockLoad3dService)
 
     mockToastStore = {
       addAlert: vi.fn()
-    }
+    } as Partial<ReturnType<typeof useToastStore>> as ReturnType<
+      typeof useToastStore
+    >
     vi.mocked(useToastStore).mockReturnValue(mockToastStore)
   })
 
@@ -160,7 +175,7 @@ describe('useLoad3dViewer', () => {
       const viewer = useLoad3dViewer(mockNode)
       const containerRef = document.createElement('div')
 
-      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d as Load3d)
 
       expect(Load3d).toHaveBeenCalledWith(containerRef, {
         width: undefined,
@@ -184,16 +199,20 @@ describe('useLoad3dViewer', () => {
     })
 
     it('should handle background image during initialization', async () => {
-      mockSourceLoad3d.sceneManager.getCurrentBackgroundInfo.mockReturnValue({
+      vi.mocked(
+        mockSourceLoad3d.sceneManager!.getCurrentBackgroundInfo
+      ).mockReturnValue({
         type: 'image',
         value: ''
       })
-      mockNode.properties['Scene Config'].backgroundImage = 'test-image.jpg'
+      ;(
+        mockNode.properties!['Scene Config'] as Record<string, unknown>
+      ).backgroundImage = 'test-image.jpg'
 
       const viewer = useLoad3dViewer(mockNode)
       const containerRef = document.createElement('div')
 
-      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d as Load3d)
 
       expect(viewer.backgroundImage.value).toBe('test-image.jpg')
       expect(viewer.hasBackgroundImage.value).toBe(true)
@@ -207,7 +226,7 @@ describe('useLoad3dViewer', () => {
       const viewer = useLoad3dViewer(mockNode)
       const containerRef = document.createElement('div')
 
-      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d as Load3d)
 
       expect(mockToastStore.addAlert).toHaveBeenCalledWith(
         'toastMessages.failedToInitializeLoad3dViewer'
@@ -220,7 +239,7 @@ describe('useLoad3dViewer', () => {
       const viewer = useLoad3dViewer(mockNode)
       const containerRef = document.createElement('div')
 
-      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d as Load3d)
 
       viewer.backgroundColor.value = '#ff0000'
       await nextTick()
@@ -232,7 +251,7 @@ describe('useLoad3dViewer', () => {
       const viewer = useLoad3dViewer(mockNode)
       const containerRef = document.createElement('div')
 
-      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d as Load3d)
 
       viewer.showGrid.value = false
       await nextTick()
@@ -244,7 +263,7 @@ describe('useLoad3dViewer', () => {
       const viewer = useLoad3dViewer(mockNode)
       const containerRef = document.createElement('div')
 
-      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d as Load3d)
 
       viewer.cameraType.value = 'orthographic'
       await nextTick()
@@ -256,7 +275,7 @@ describe('useLoad3dViewer', () => {
       const viewer = useLoad3dViewer(mockNode)
       const containerRef = document.createElement('div')
 
-      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d as Load3d)
 
       viewer.fov.value = 90
       await nextTick()
@@ -268,7 +287,7 @@ describe('useLoad3dViewer', () => {
       const viewer = useLoad3dViewer(mockNode)
       const containerRef = document.createElement('div')
 
-      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d as Load3d)
 
       viewer.lightIntensity.value = 2
       await nextTick()
@@ -280,7 +299,7 @@ describe('useLoad3dViewer', () => {
       const viewer = useLoad3dViewer(mockNode)
       const containerRef = document.createElement('div')
 
-      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d as Load3d)
 
       viewer.backgroundImage.value = 'new-bg.jpg'
       await nextTick()
@@ -293,7 +312,7 @@ describe('useLoad3dViewer', () => {
       const viewer = useLoad3dViewer(mockNode)
       const containerRef = document.createElement('div')
 
-      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d as Load3d)
 
       viewer.upDirection.value = '+y'
       await nextTick()
@@ -305,7 +324,7 @@ describe('useLoad3dViewer', () => {
       const viewer = useLoad3dViewer(mockNode)
       const containerRef = document.createElement('div')
 
-      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d as Load3d)
 
       viewer.materialMode.value = 'wireframe'
       await nextTick()
@@ -314,14 +333,16 @@ describe('useLoad3dViewer', () => {
     })
 
     it('should handle watcher errors gracefully', async () => {
-      mockLoad3d.setBackgroundColor.mockImplementationOnce(function () {
-        throw new Error('Color update failed')
-      })
+      vi.mocked(mockLoad3d.setBackgroundColor!).mockImplementationOnce(
+        function () {
+          throw new Error('Color update failed')
+        }
+      )
 
       const viewer = useLoad3dViewer(mockNode)
       const containerRef = document.createElement('div')
 
-      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d as Load3d)
 
       viewer.backgroundColor.value = '#ff0000'
       await nextTick()
@@ -337,7 +358,7 @@ describe('useLoad3dViewer', () => {
       const viewer = useLoad3dViewer(mockNode)
       const containerRef = document.createElement('div')
 
-      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d as Load3d)
 
       await viewer.exportModel('glb')
 
@@ -345,12 +366,14 @@ describe('useLoad3dViewer', () => {
     })
 
     it('should handle export errors', async () => {
-      mockLoad3d.exportModel.mockRejectedValueOnce(new Error('Export failed'))
+      vi.mocked(mockLoad3d.exportModel!).mockRejectedValueOnce(
+        new Error('Export failed')
+      )
 
       const viewer = useLoad3dViewer(mockNode)
       const containerRef = document.createElement('div')
 
-      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d as Load3d)
 
       await viewer.exportModel('glb')
 
@@ -373,7 +396,7 @@ describe('useLoad3dViewer', () => {
       const viewer = useLoad3dViewer(mockNode)
       const containerRef = document.createElement('div')
 
-      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d as Load3d)
 
       viewer.handleResize()
 
@@ -384,7 +407,7 @@ describe('useLoad3dViewer', () => {
       const viewer = useLoad3dViewer(mockNode)
       const containerRef = document.createElement('div')
 
-      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d as Load3d)
 
       viewer.handleMouseEnter()
 
@@ -395,7 +418,7 @@ describe('useLoad3dViewer', () => {
       const viewer = useLoad3dViewer(mockNode)
       const containerRef = document.createElement('div')
 
-      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d as Load3d)
 
       viewer.handleMouseLeave()
 
@@ -408,22 +431,35 @@ describe('useLoad3dViewer', () => {
       const viewer = useLoad3dViewer(mockNode)
       const containerRef = document.createElement('div')
 
-      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
-
-      mockNode.properties['Scene Config'].backgroundColor = '#ff0000'
-      mockNode.properties['Scene Config'].showGrid = false
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d as Load3d)
+      ;(
+        mockNode.properties!['Scene Config'] as Record<string, unknown>
+      ).backgroundColor = '#ff0000'
+      ;(
+        mockNode.properties!['Scene Config'] as Record<string, unknown>
+      ).showGrid = false
 
       viewer.restoreInitialState()
 
-      expect(mockNode.properties['Scene Config'].backgroundColor).toBe(
-        '#282828'
-      )
-      expect(mockNode.properties['Scene Config'].showGrid).toBe(true)
-      expect(mockNode.properties['Camera Config'].cameraType).toBe(
-        'perspective'
-      )
-      expect(mockNode.properties['Camera Config'].fov).toBe(75)
-      expect(mockNode.properties['Light Config'].intensity).toBe(1)
+      expect(
+        (mockNode.properties!['Scene Config'] as Record<string, unknown>)
+          .backgroundColor
+      ).toBe('#282828')
+      expect(
+        (mockNode.properties!['Scene Config'] as Record<string, unknown>)
+          .showGrid
+      ).toBe(true)
+      expect(
+        (mockNode.properties!['Camera Config'] as Record<string, unknown>)
+          .cameraType
+      ).toBe('perspective')
+      expect(
+        (mockNode.properties!['Camera Config'] as Record<string, unknown>).fov
+      ).toBe(75)
+      expect(
+        (mockNode.properties!['Light Config'] as Record<string, unknown>)
+          .intensity
+      ).toBe(1)
     })
   })
 
@@ -432,7 +468,7 @@ describe('useLoad3dViewer', () => {
       const viewer = useLoad3dViewer(mockNode)
       const containerRef = document.createElement('div')
 
-      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d as Load3d)
 
       viewer.backgroundColor.value = '#ff0000'
       viewer.showGrid.value = false
@@ -440,23 +476,27 @@ describe('useLoad3dViewer', () => {
       const result = await viewer.applyChanges()
 
       expect(result).toBe(true)
-      expect(mockNode.properties['Scene Config'].backgroundColor).toBe(
-        '#ff0000'
-      )
-      expect(mockNode.properties['Scene Config'].showGrid).toBe(false)
+      expect(
+        (mockNode.properties!['Scene Config'] as Record<string, unknown>)
+          .backgroundColor
+      ).toBe('#ff0000')
+      expect(
+        (mockNode.properties!['Scene Config'] as Record<string, unknown>)
+          .showGrid
+      ).toBe(false)
       expect(mockLoad3dService.copyLoad3dState).toHaveBeenCalledWith(
         mockLoad3d,
         mockSourceLoad3d
       )
       expect(mockSourceLoad3d.forceRender).toHaveBeenCalled()
-      expect(mockNode.graph.setDirtyCanvas).toHaveBeenCalledWith(true, true)
+      expect(mockNode.graph!.setDirtyCanvas).toHaveBeenCalledWith(true, true)
     })
 
     it('should handle background image during apply', async () => {
       const viewer = useLoad3dViewer(mockNode)
       const containerRef = document.createElement('div')
 
-      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d as Load3d)
 
       viewer.backgroundImage.value = 'new-bg.jpg'
 
@@ -481,7 +521,7 @@ describe('useLoad3dViewer', () => {
       const viewer = useLoad3dViewer(mockNode)
       const containerRef = document.createElement('div')
 
-      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d as Load3d)
 
       viewer.refreshViewport()
 
@@ -498,7 +538,7 @@ describe('useLoad3dViewer', () => {
       const viewer = useLoad3dViewer(mockNode)
       const containerRef = document.createElement('div')
 
-      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d as Load3d)
 
       const file = new File([''], 'test.jpg', { type: 'image/jpeg' })
       await viewer.handleBackgroundImageUpdate(file)
@@ -515,7 +555,7 @@ describe('useLoad3dViewer', () => {
       const viewer = useLoad3dViewer(mockNode)
       const containerRef = document.createElement('div')
 
-      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d as Load3d)
 
       const file = new File([''], 'test.jpg', { type: 'image/jpeg' })
       await viewer.handleBackgroundImageUpdate(file)
@@ -527,7 +567,7 @@ describe('useLoad3dViewer', () => {
       const viewer = useLoad3dViewer(mockNode)
       const containerRef = document.createElement('div')
 
-      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d as Load3d)
 
       viewer.backgroundImage.value = 'existing.jpg'
       viewer.hasBackgroundImage.value = true
@@ -546,7 +586,7 @@ describe('useLoad3dViewer', () => {
       const viewer = useLoad3dViewer(mockNode)
       const containerRef = document.createElement('div')
 
-      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d as Load3d)
 
       const file = new File([''], 'test.jpg', { type: 'image/jpeg' })
       await viewer.handleBackgroundImageUpdate(file)
@@ -562,7 +602,7 @@ describe('useLoad3dViewer', () => {
       const viewer = useLoad3dViewer(mockNode)
       const containerRef = document.createElement('div')
 
-      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d as Load3d)
 
       viewer.cleanup()
 
@@ -580,33 +620,36 @@ describe('useLoad3dViewer', () => {
     it('should handle missing container ref', async () => {
       const viewer = useLoad3dViewer(mockNode)
 
-      await viewer.initializeViewer(null as any, mockSourceLoad3d)
+      await viewer.initializeViewer(null!, mockSourceLoad3d as Load3d)
 
       expect(Load3d).not.toHaveBeenCalled()
     })
 
     it('should handle orthographic camera', async () => {
-      mockSourceLoad3d.getCurrentCameraType.mockReturnValue('orthographic')
+      vi.mocked(mockSourceLoad3d.getCurrentCameraType!).mockReturnValue(
+        'orthographic'
+      )
       mockSourceLoad3d.cameraManager = {
         perspectiveCamera: { fov: 75 }
-      }
-      delete mockNode.properties['Camera Config'].cameraType
+      } as Partial<Load3d['cameraManager']> as Load3d['cameraManager']
+      delete (mockNode.properties!['Camera Config'] as Record<string, unknown>)
+        .cameraType
 
       const viewer = useLoad3dViewer(mockNode)
       const containerRef = document.createElement('div')
 
-      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d as Load3d)
 
       expect(viewer.cameraType.value).toBe('orthographic')
     })
 
     it('should handle missing lights', async () => {
-      mockSourceLoad3d.lightingManager.lights = []
+      mockSourceLoad3d.lightingManager!.lights = []
 
       const viewer = useLoad3dViewer(mockNode)
       const containerRef = document.createElement('div')
 
-      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d as Load3d)
 
       expect(viewer.lightIntensity.value).toBe(1) // Default value
     })
diff --git a/src/composables/useLoad3dViewer.ts b/src/composables/useLoad3dViewer.ts
index 38b4a9f54..94e4ebc24 100644
--- a/src/composables/useLoad3dViewer.ts
+++ b/src/composables/useLoad3dViewer.ts
@@ -630,6 +630,10 @@ export const useLoad3dViewer = (node?: LGraphNode) => {
     handleBackgroundImageUpdate,
     handleModelDrop,
     handleSeek,
-    cleanup
+    cleanup,
+
+    hasSkeleton: false,
+    intensity: lightIntensity,
+    showSkeleton: false
   }
 }
diff --git a/src/composables/useTemplateFiltering.ts b/src/composables/useTemplateFiltering.ts
index 9dcdeffcc..8f6753ab0 100644
--- a/src/composables/useTemplateFiltering.ts
+++ b/src/composables/useTemplateFiltering.ts
@@ -1,4 +1,4 @@
-import { refDebounced, watchDebounced } from '@vueuse/core'
+import { refThrottled, watchDebounced } from '@vueuse/core'
 import Fuse from 'fuse.js'
 import type { IFuseOptions } from 'fuse.js'
 import { computed, ref, watch } from 'vue'
@@ -84,7 +84,7 @@ export function useTemplateFiltering(
     return ['ComfyUI', 'External or Remote API']
   })
 
-  const debouncedSearchQuery = refDebounced(searchQuery, 50)
+  const debouncedSearchQuery = refThrottled(searchQuery, 50)
 
   const filteredBySearch = computed(() => {
     if (!debouncedSearchQuery.value.trim()) {
diff --git a/src/core/graph/widgets/dynamicWidgets.test.ts b/src/core/graph/widgets/dynamicWidgets.test.ts
index c2c4743f7..0252691d1 100644
--- a/src/core/graph/widgets/dynamicWidgets.test.ts
+++ b/src/core/graph/widgets/dynamicWidgets.test.ts
@@ -175,4 +175,32 @@ describe('Autogrow', () => {
     await nextTick()
     expect(node.inputs.length).toBe(5)
   })
+  test('Can deserialize a complex node', async () => {
+    const graph = new LGraph()
+    const node = testNode()
+    graph.add(node)
+    addAutogrow(node, { min: 1, input: inputsSpec, prefix: 'a' })
+    addAutogrow(node, { min: 1, input: inputsSpec, prefix: 'b' })
+    addNodeInput(node, { name: 'aa', isOptional: false, type: 'IMAGE' })
+
+    connectInput(node, 0, graph)
+    connectInput(node, 1, graph)
+    connectInput(node, 3, graph)
+    connectInput(node, 4, graph)
+
+    const serialized = graph.serialize()
+    graph.clear()
+    graph.configure(serialized)
+    const newNode = graph.nodes[0]!
+
+    expect(newNode.inputs.map((i) => i.name)).toStrictEqual([
+      '0.a0',
+      '0.a1',
+      '0.a2',
+      '1.b0',
+      '1.b1',
+      '1.b2',
+      'aa'
+    ])
+  })
 })
diff --git a/src/core/graph/widgets/dynamicWidgets.ts b/src/core/graph/widgets/dynamicWidgets.ts
index 406822d43..7e3f7fd71 100644
--- a/src/core/graph/widgets/dynamicWidgets.ts
+++ b/src/core/graph/widgets/dynamicWidgets.ts
@@ -1,4 +1,5 @@
 import { remove } from 'es-toolkit'
+import { shallowReactive } from 'vue'
 
 import { useChainCallback } from '@/composables/functional/useChainCallback'
 import type {
@@ -342,7 +343,9 @@ function applyMatchType(node: LGraphNode, inputSpec: InputSpecV2) {
   //ensure outputs get updated
   const index = node.inputs.length - 1
   requestAnimationFrame(() => {
-    const input = node.inputs.at(index)!
+    const input = node.inputs[index]
+    if (!input) return
+    node.inputs[index] = shallowReactive(input)
     node.onConnectionsChange?.(
       LiteGraph.INPUT,
       index,
@@ -385,20 +388,32 @@ function addAutogrowGroup(
     ...autogrowOrdinalToName(ordinal, input.name, groupName, node)
   }))
 
-  const newInputs = namedSpecs
-    .filter(
-      (namedSpec) => !node.inputs.some((inp) => inp.name === namedSpec.name)
-    )
-    .map((namedSpec) => {
-      addNodeInput(node, namedSpec)
-      const input = spliceInputs(node, node.inputs.length - 1, 1)[0]
-      if (inputSpecs.length !== 1 || (INLINE_INPUTS && !input.widget))
-        ensureWidgetForInput(node, input)
-      return input
-    })
+  const newInputs = namedSpecs.map((namedSpec) => {
+    addNodeInput(node, namedSpec)
+    const input = spliceInputs(node, node.inputs.length - 1, 1)[0]
+    if (inputSpecs.length !== 1 || (INLINE_INPUTS && !input.widget))
+      ensureWidgetForInput(node, input)
+    return input
+  })
 
+  for (const newInput of newInputs) {
+    for (const existingInput of remove(
+      node.inputs,
+      (inp) => inp.name === newInput.name
+    )) {
+      //NOTE: link.target_slot is updated on spliceInputs call
+      newInput.link ??= existingInput.link
+    }
+  }
+
+  const targetName = autogrowOrdinalToName(
+    ordinal - 1,
+    inputSpecs.at(-1)!.name,
+    groupName,
+    node
+  ).name
   const lastIndex = node.inputs.findLastIndex((inp) =>
-    inp.name.startsWith(groupName)
+    inp.name.startsWith(targetName)
   )
   const insertionIndex = lastIndex === -1 ? node.inputs.length : lastIndex + 1
   spliceInputs(node, insertionIndex, 0, ...newInputs)
@@ -427,13 +442,14 @@ function autogrowInputConnected(index: number, node: AutogrowNode) {
   const input = node.inputs[index]
   const groupName = input.name.slice(0, input.name.lastIndexOf('.'))
   const lastInput = node.inputs.findLast((inp) =>
-    inp.name.startsWith(groupName)
+    inp.name.startsWith(groupName + '.')
   )
   const ordinal = resolveAutogrowOrdinal(input.name, groupName, node)
   if (
     !lastInput ||
     ordinal == undefined ||
-    ordinal !== resolveAutogrowOrdinal(lastInput.name, groupName, node)
+    (ordinal !== resolveAutogrowOrdinal(lastInput.name, groupName, node) &&
+      !app.configuringGraph)
   )
     return
   addAutogrowGroup(ordinal + 1, groupName, node)
@@ -453,6 +469,7 @@ function autogrowInputDisconnected(index: number, node: AutogrowNode) {
       inp.name.lastIndexOf('.') === groupName.length
   )
   const stride = inputSpecs.length
+  if (stride + index >= node.inputs.length) return
   if (groupInputs.length % stride !== 0) {
     console.error('Failed to group multi-input autogrow inputs')
     return
@@ -473,10 +490,24 @@ function autogrowInputDisconnected(index: number, node: AutogrowNode) {
       const curIndex = node.inputs.findIndex((inp) => inp === curInput)
       if (curIndex === -1) throw new Error('missing input')
       link.target_slot = curIndex
+      node.onConnectionsChange?.(
+        LiteGraph.INPUT,
+        curIndex,
+        true,
+        link,
+        curInput
+      )
     }
     const lastInput = groupInputs.at(column - stride)
     if (!lastInput) continue
     lastInput.link = null
+    node.onConnectionsChange?.(
+      LiteGraph.INPUT,
+      node.inputs.length + column - stride,
+      false,
+      null,
+      lastInput
+    )
   }
   const removalChecks = groupInputs.slice((min - 1) * stride)
   let i
@@ -564,5 +595,6 @@ function applyAutogrow(node: LGraphNode, inputSpecV2: InputSpecV2) {
     prefix,
     inputSpecs: inputsV2
   }
-  for (let i = 0; i < min; i++) addAutogrowGroup(i, inputSpecV2.name, node)
+  for (let i = 0; i === 0 || i < min; i++)
+    addAutogrowGroup(i, inputSpecV2.name, node)
 }
diff --git a/src/extensions/core/clipspace.ts b/src/extensions/core/clipspace.ts
index bc644d8d7..2fe7378de 100644
--- a/src/extensions/core/clipspace.ts
+++ b/src/extensions/core/clipspace.ts
@@ -47,8 +47,9 @@ export class ClipspaceDialog extends ComfyDialog {
     if (ClipspaceDialog.instance) {
       const self = ClipspaceDialog.instance
       // allow reconstruct controls when copying from non-image to image content.
+      const imgSettings = self.createImgSettings()
       const children = $el('div.comfy-modal-content', [
-        self.createImgSettings(),
+        ...(imgSettings ? [imgSettings] : []),
         ...self.createButtons()
       ])
 
@@ -103,7 +104,7 @@ export class ClipspaceDialog extends ComfyDialog {
     return buttons
   }
 
-  createImgSettings() {
+  createImgSettings(): HTMLTableElement | null {
     if (ComfyApp.clipspace?.imgs) {
       const combo_items = []
       const imgs = ComfyApp.clipspace.imgs
@@ -167,14 +168,14 @@ export class ClipspaceDialog extends ComfyDialog {
 
       return $el('table', {}, [row1, row2, row3])
     } else {
-      return []
+      return null
     }
   }
 
-  createImgPreview() {
+  createImgPreview(): HTMLImageElement | null {
     if (ComfyApp.clipspace?.imgs) {
       return $el('img', { id: 'clipspace_preview', ondragstart: () => false })
-    } else return []
+    } else return null
   }
 
   override show() {
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/cloudRemoteConfig.ts b/src/extensions/core/cloudRemoteConfig.ts
index 0628800d8..6d775389e 100644
--- a/src/extensions/core/cloudRemoteConfig.ts
+++ b/src/extensions/core/cloudRemoteConfig.ts
@@ -2,7 +2,6 @@ import { watchDebounced } from '@vueuse/core'
 
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
-import { loadRemoteConfig } from '@/platform/remoteConfig/remoteConfig'
 import { refreshRemoteConfig } from '@/platform/remoteConfig/refreshRemoteConfig'
 import { useExtensionService } from '@/services/extensionService'
 
@@ -26,7 +25,7 @@ useExtensionService().registerExtension({
       { debounce: 256, immediate: true }
     )
 
-    // Poll for config updates every 10 minutes
-    setInterval(() => void loadRemoteConfig(), 600_000)
+    // Poll for config updates every 10 minutes (with auth)
+    setInterval(() => void refreshRemoteConfig(), 600_000)
   }
 })
diff --git a/src/extensions/core/contextMenuFilter.name.test.ts b/src/extensions/core/contextMenuFilter.name.test.ts
index 1fb0b5fd5..2ee4f6a21 100644
--- a/src/extensions/core/contextMenuFilter.name.test.ts
+++ b/src/extensions/core/contextMenuFilter.name.test.ts
@@ -1,6 +1,10 @@
 import { describe, expect, it, vi } from 'vitest'
 
 import { legacyMenuCompat } from '@/lib/litegraph/src/contextMenuCompat'
+import type {
+  IContextMenuValue,
+  LGraphNode
+} from '@/lib/litegraph/src/litegraph'
 import { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
 
 /**
@@ -18,11 +22,12 @@ describe('Context Menu Extension Name in Warnings', () => {
 
     // Extension monkey-patches the method
     const original = LGraphCanvas.prototype.getCanvasMenuOptions
-    LGraphCanvas.prototype.getCanvasMenuOptions = function (...args: any[]) {
-      const items = (original as any).apply(this, args)
-      items.push({ content: 'My Custom Menu Item', callback: () => {} })
-      return items
-    }
+    LGraphCanvas.prototype.getCanvasMenuOptions =
+      function (): (IContextMenuValue | null)[] {
+        const items = original.call(this)
+        items.push({ content: 'My Custom Menu Item', callback: () => {} })
+        return items
+      }
 
     // Clear extension (happens after setup completes)
     legacyMenuCompat.setCurrentExtension(null)
@@ -49,8 +54,8 @@ describe('Context Menu Extension Name in Warnings', () => {
 
     // Extension monkey-patches the method
     const original = LGraphCanvas.prototype.getNodeMenuOptions
-    LGraphCanvas.prototype.getNodeMenuOptions = function (...args: any[]) {
-      const items = (original as any).apply(this, args)
+    LGraphCanvas.prototype.getNodeMenuOptions = function (node: LGraphNode) {
+      const items = original.call(this, node)
       items.push({ content: 'My Node Menu Item', callback: () => {} })
       return items
     }
diff --git a/src/extensions/core/contextMenuFilter.test.ts b/src/extensions/core/contextMenuFilter.test.ts
index 5cd9d3664..72a2d7604 100644
--- a/src/extensions/core/contextMenuFilter.test.ts
+++ b/src/extensions/core/contextMenuFilter.test.ts
@@ -7,6 +7,10 @@ import type { LGraphCanvas, LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useExtensionService } from '@/services/extensionService'
 import { useExtensionStore } from '@/stores/extensionStore'
 import type { ComfyExtension } from '@/types/comfy'
+import {
+  createMockCanvas,
+  createMockLGraphNode
+} from '@/utils/__tests__/litegraphTestUtils'
 
 describe('Context Menu Extension API', () => {
   let mockCanvas: LGraphCanvas
@@ -35,7 +39,7 @@ describe('Context Menu Extension API', () => {
   // Mock extensions
   const createCanvasMenuExtension = (
     name: string,
-    items: IContextMenuValue[]
+    items: (IContextMenuValue | null)[]
   ): ComfyExtension => ({
     name,
     getCanvasMenuItems: () => items
@@ -54,16 +58,16 @@ describe('Context Menu Extension API', () => {
     extensionStore = useExtensionStore()
     extensionService = useExtensionService()
 
-    mockCanvas = {
+    mockCanvas = createMockCanvas({
       graph_mouse: [100, 100],
       selectedItems: new Set()
-    } as unknown as LGraphCanvas
+    })
 
-    mockNode = {
+    mockNode = createMockLGraphNode({
       id: 1,
       type: 'TestNode',
       pos: [0, 0]
-    } as unknown as LGraphNode
+    })
   })
 
   describe('collectCanvasMenuItems', () => {
@@ -79,7 +83,7 @@ describe('Context Menu Extension API', () => {
 
       const items: IContextMenuValue[] = extensionService
         .invokeExtensions('getCanvasMenuItems', mockCanvas)
-        .flat()
+        .flat() as IContextMenuValue[]
 
       expect(items).toHaveLength(3)
       expect(items[0]).toMatchObject({ content: 'Canvas Item 1' })
@@ -99,7 +103,7 @@ describe('Context Menu Extension API', () => {
             ]
           }
         },
-        null as unknown as IContextMenuValue,
+        null,
         { content: 'After Separator', callback: () => {} }
       ])
 
@@ -107,7 +111,7 @@ describe('Context Menu Extension API', () => {
 
       const items: IContextMenuValue[] = extensionService
         .invokeExtensions('getCanvasMenuItems', mockCanvas)
-        .flat()
+        .flat() as IContextMenuValue[]
 
       expect(items).toHaveLength(3)
       expect(items[0].content).toBe('Menu with Submenu')
@@ -129,7 +133,7 @@ describe('Context Menu Extension API', () => {
 
       const items: IContextMenuValue[] = extensionService
         .invokeExtensions('getCanvasMenuItems', mockCanvas)
-        .flat()
+        .flat() as IContextMenuValue[]
 
       expect(items).toHaveLength(1)
       expect(items[0].content).toBe('Canvas Item 1')
@@ -146,11 +150,11 @@ describe('Context Menu Extension API', () => {
       // Collect items multiple times (simulating repeated menu opens)
       const items1: IContextMenuValue[] = extensionService
         .invokeExtensions('getCanvasMenuItems', mockCanvas)
-        .flat()
+        .flat() as IContextMenuValue[]
 
       const items2: IContextMenuValue[] = extensionService
         .invokeExtensions('getCanvasMenuItems', mockCanvas)
-        .flat()
+        .flat() as IContextMenuValue[]
 
       // Both collections should have the same items (no duplication)
       expect(items1).toHaveLength(2)
@@ -180,7 +184,7 @@ describe('Context Menu Extension API', () => {
 
       const items: IContextMenuValue[] = extensionService
         .invokeExtensions('getNodeMenuItems', mockNode)
-        .flat()
+        .flat() as IContextMenuValue[]
 
       expect(items).toHaveLength(3)
       expect(items[0]).toMatchObject({ content: 'Node Item 1' })
@@ -205,7 +209,7 @@ describe('Context Menu Extension API', () => {
 
       const items: IContextMenuValue[] = extensionService
         .invokeExtensions('getNodeMenuItems', mockNode)
-        .flat()
+        .flat() as IContextMenuValue[]
 
       expect(items[0].content).toBe('Node Menu with Submenu')
       expect(items[0].submenu?.options).toHaveLength(2)
@@ -222,7 +226,7 @@ describe('Context Menu Extension API', () => {
 
       const items: IContextMenuValue[] = extensionService
         .invokeExtensions('getNodeMenuItems', mockNode)
-        .flat()
+        .flat() as IContextMenuValue[]
 
       expect(items).toHaveLength(1)
       expect(items[0].content).toBe('Node Item 1')
diff --git a/src/extensions/core/customCombo.ts b/src/extensions/core/customCombo.ts
deleted file mode 100644
index ed7356a40..000000000
--- a/src/extensions/core/customCombo.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-import { shallowReactive } from 'vue'
-
-import { useChainCallback } from '@/composables/functional/useChainCallback'
-import type { CanvasPointerEvent } from '@/lib/litegraph/src/types/events'
-import { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
-import { LLink } from '@/lib/litegraph/src/litegraph'
-import { app } from '@/scripts/app'
-
-function applyToGraph(this: LGraphNode, extraLinks: LLink[] = []) {
-  if (!this.outputs[0].links?.length || !this.graph) return
-
-  const links = [
-    ...this.outputs[0].links.map((l) => this.graph!.links[l]),
-    ...extraLinks
-  ]
-  let v = this.widgets?.[0].value
-  // For each output link copy our value over the original widget value
-  for (const linkInfo of links) {
-    const node = this.graph?.getNodeById(linkInfo.target_id)
-    const input = node?.inputs[linkInfo.target_slot]
-    if (!input) {
-      console.warn('Unable to resolve node or input for link', linkInfo)
-      continue
-    }
-
-    const widgetName = input.widget?.name
-    if (!widgetName) {
-      console.warn('Invalid widget or widget name', input.widget)
-      continue
-    }
-
-    const widget = node.widgets?.find((w) => w.name === widgetName)
-    if (!widget) {
-      console.warn(`Unable to find widget "${widgetName}" on node [${node.id}]`)
-      continue
-    }
-
-    widget.value = v
-    widget.callback?.(
-      widget.value,
-      app.canvas,
-      node,
-      app.canvas.graph_mouse,
-      {} as CanvasPointerEvent
-    )
-  }
-}
-
-function onNodeCreated(this: LGraphNode) {
-  this.applyToGraph = useChainCallback(this.applyToGraph, applyToGraph)
-
-  const comboWidget = this.widgets![0]
-  const values = shallowReactive<string[]>([])
-  comboWidget.options.values = values
-
-  const updateCombo = () => {
-    values.splice(
-      0,
-      values.length,
-      ...this.widgets!.filter(
-        (w) => w.name.startsWith('option') && w.value
-      ).map((w) => `${w.value}`)
-    )
-    if (app.configuringGraph) return
-    if (values.includes(`${comboWidget.value}`)) return
-    comboWidget.value = values[0] ?? ''
-    comboWidget.callback?.(comboWidget.value)
-  }
-  comboWidget.callback = useChainCallback(comboWidget.callback, () =>
-    this.applyToGraph!()
-  )
-
-  function addOption(node: LGraphNode) {
-    if (!node.widgets) return
-    const newCount = node.widgets.length - 1
-    node.addWidget('string', `option${newCount}`, '', () => {})
-    const widget = node.widgets.at(-1)
-    if (!widget) return
-
-    let value = ''
-    Object.defineProperty(widget, 'value', {
-      get() {
-        return value
-      },
-      set(v) {
-        value = v
-        updateCombo()
-        if (!node.widgets) return
-        const lastWidget = node.widgets.at(-1)
-        if (lastWidget === this) {
-          if (v) addOption(node)
-          return
-        }
-        if (v || node.widgets.at(-2) !== this || lastWidget?.value) return
-        node.widgets.pop()
-        node.computeSize(node.size)
-        this.callback(v)
-      }
-    })
-  }
-  addOption(this)
-}
-
-app.registerExtension({
-  name: 'Comfy.CustomCombo',
-  beforeRegisterNodeDef(nodeType, nodeData) {
-    if (nodeData?.name !== 'CustomCombo') return
-    nodeType.prototype.onNodeCreated = useChainCallback(
-      nodeType.prototype.onNodeCreated,
-      onNodeCreated
-    )
-  }
-})
diff --git a/src/extensions/core/customWidgets.ts b/src/extensions/core/customWidgets.ts
new file mode 100644
index 000000000..df796c03e
--- /dev/null
+++ b/src/extensions/core/customWidgets.ts
@@ -0,0 +1,210 @@
+import { shallowReactive } from 'vue'
+
+import { useChainCallback } from '@/composables/functional/useChainCallback'
+import type { CanvasPointerEvent } from '@/lib/litegraph/src/types/events'
+import { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import { LLink } from '@/lib/litegraph/src/litegraph'
+import { app } from '@/scripts/app'
+
+function applyToGraph(this: LGraphNode, extraLinks: LLink[] = []) {
+  if (!this.outputs[0].links?.length || !this.graph) return
+
+  const links = [
+    ...this.outputs[0].links.map((l) => this.graph!.links[l]),
+    ...extraLinks
+  ]
+  let v = this.widgets?.[0].value
+  // For each output link copy our value over the original widget value
+  for (const linkInfo of links) {
+    const node = this.graph?.getNodeById(linkInfo.target_id)
+    const input = node?.inputs[linkInfo.target_slot]
+    if (!input) {
+      console.warn('Unable to resolve node or input for link', linkInfo)
+      continue
+    }
+
+    const widgetName = input.widget?.name
+    if (!widgetName) {
+      console.warn('Invalid widget or widget name', input.widget)
+      continue
+    }
+
+    const widget = node.widgets?.find((w) => w.name === widgetName)
+    if (!widget) {
+      console.warn(`Unable to find widget "${widgetName}" on node [${node.id}]`)
+      continue
+    }
+
+    widget.value = v
+    widget.callback?.(
+      widget.value,
+      app.canvas,
+      node,
+      app.canvas.graph_mouse,
+      {} as CanvasPointerEvent
+    )
+  }
+}
+
+function onCustomComboCreated(this: LGraphNode) {
+  this.applyToGraph = applyToGraph
+
+  const comboWidget = this.widgets![0]
+  const values = shallowReactive<string[]>([])
+  comboWidget.options.values = values
+
+  const updateCombo = () => {
+    values.splice(
+      0,
+      values.length,
+      ...this.widgets!.filter(
+        (w) => w.name.startsWith('option') && w.value
+      ).map((w) => `${w.value}`)
+    )
+    if (app.configuringGraph) return
+    if (values.includes(`${comboWidget.value}`)) return
+    comboWidget.value = values[0] ?? ''
+    comboWidget.callback?.(comboWidget.value)
+  }
+  comboWidget.callback = useChainCallback(comboWidget.callback, () =>
+    this.applyToGraph!()
+  )
+
+  function addOption(node: LGraphNode) {
+    if (!node.widgets) return
+    const newCount = node.widgets.length - 1
+    node.addWidget('string', `option${newCount}`, '', () => {})
+    const widget = node.widgets.at(-1)
+    if (!widget) return
+
+    let value = ''
+    Object.defineProperty(widget, 'value', {
+      get() {
+        return value
+      },
+      set(v) {
+        value = v
+        updateCombo()
+        if (!node.widgets) return
+        const lastWidget = node.widgets.at(-1)
+        if (lastWidget === this) {
+          if (v) addOption(node)
+          return
+        }
+        if (v || node.widgets.at(-2) !== this || lastWidget?.value) return
+        node.widgets.pop()
+        node.computeSize(node.size)
+        this.callback(v)
+      }
+    })
+  }
+  const widgets = this.widgets!
+  widgets.push({
+    name: 'index',
+    type: 'hidden',
+    get value() {
+      return widgets.slice(2).findIndex((w) => w.value === comboWidget.value)
+    },
+    set value(_) {},
+    draw: () => undefined,
+    computeSize: () => [0, -4],
+    options: { hidden: true },
+    y: 0
+  })
+  addOption(this)
+}
+
+function onCustomIntCreated(this: LGraphNode) {
+  const valueWidget = this.widgets?.[0]
+  if (!valueWidget) return
+
+  Object.defineProperty(valueWidget.options, 'min', {
+    get: () => this.properties.min ?? -(2 ** 63),
+    set: (v) => {
+      this.properties.min = v
+      valueWidget.callback?.(valueWidget.value)
+    }
+  })
+  Object.defineProperty(valueWidget.options, 'max', {
+    get: () => this.properties.max ?? 2 ** 63,
+    set: (v) => {
+      this.properties.max = v
+      valueWidget.callback?.(valueWidget.value)
+    }
+  })
+  Object.defineProperty(valueWidget.options, 'step2', {
+    get: () => this.properties.step ?? 1,
+    set: (v) => {
+      this.properties.step = v
+      valueWidget.callback?.(valueWidget.value) // for vue reactivity
+    }
+  })
+}
+function onCustomFloatCreated(this: LGraphNode) {
+  const valueWidget = this.widgets?.[0]
+  if (!valueWidget) return
+
+  Object.defineProperty(valueWidget.options, 'min', {
+    get: () => this.properties.min ?? -Infinity,
+    set: (v) => {
+      this.properties.min = v
+      valueWidget.callback?.(valueWidget.value)
+    }
+  })
+  Object.defineProperty(valueWidget.options, 'max', {
+    get: () => this.properties.max ?? Infinity,
+    set: (v) => {
+      this.properties.max = v
+      valueWidget.callback?.(valueWidget.value)
+    }
+  })
+  Object.defineProperty(valueWidget.options, 'precision', {
+    get: () => this.properties.precision ?? 1,
+    set: (v) => {
+      this.properties.precision = v
+      valueWidget.callback?.(valueWidget.value)
+    }
+  })
+  Object.defineProperty(valueWidget.options, 'step2', {
+    get: () => {
+      if (this.properties.step) return this.properties.step
+
+      const { precision } = this.properties
+      return typeof precision === 'number' ? 5 * 10 ** -precision : 1
+    },
+    set: (v) => (this.properties.step = v)
+  })
+  Object.defineProperty(valueWidget.options, 'round', {
+    get: () => {
+      if (this.properties.round) return this.properties.round
+
+      const { precision } = this.properties
+      return typeof precision === 'number' ? 10 ** -precision : 0.1
+    },
+    set: (v) => {
+      this.properties.round = v
+      valueWidget.callback?.(valueWidget.value)
+    }
+  })
+}
+
+app.registerExtension({
+  name: 'Comfy.CustomWidgets',
+  beforeRegisterNodeDef(nodeType, nodeData) {
+    if (nodeData?.name === 'CustomCombo')
+      nodeType.prototype.onNodeCreated = useChainCallback(
+        nodeType.prototype.onNodeCreated,
+        onCustomComboCreated
+      )
+    else if (nodeData?.name === 'PrimitiveInt')
+      nodeType.prototype.onNodeCreated = useChainCallback(
+        nodeType.prototype.onNodeCreated,
+        onCustomIntCreated
+      )
+    else if (nodeData?.name === 'PrimitiveFloat')
+      nodeType.prototype.onNodeCreated = useChainCallback(
+        nodeType.prototype.onNodeCreated,
+        onCustomFloatCreated
+      )
+  }
+})
diff --git a/src/extensions/core/index.ts b/src/extensions/core/index.ts
index f50493d82..fe8cbf2c7 100644
--- a/src/extensions/core/index.ts
+++ b/src/extensions/core/index.ts
@@ -1,8 +1,8 @@
-import { isCloud } from '@/platform/distribution/types'
+import { isCloud, isNightly } from '@/platform/distribution/types'
 
 import './clipspace'
 import './contextMenuFilter'
-import './customCombo'
+import './customWidgets'
 import './dynamicPrompts'
 import './editAttention'
 import './electronAdapter'
@@ -32,9 +32,18 @@ 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/extensions/core/nightlyBadges.ts b/src/extensions/core/nightlyBadges.ts
new file mode 100644
index 000000000..a453a6397
--- /dev/null
+++ b/src/extensions/core/nightlyBadges.ts
@@ -0,0 +1,17 @@
+import { t } from '@/i18n'
+import { useExtensionService } from '@/services/extensionService'
+import type { TopbarBadge } from '@/types/comfy'
+
+const badges: TopbarBadge[] = [
+  {
+    text: t('nightly.badge.label'),
+    label: t('g.nightly'),
+    variant: 'warning',
+    tooltip: t('nightly.badge.tooltip')
+  }
+]
+
+useExtensionService().registerExtension({
+  name: 'Comfy.Nightly.Badges',
+  topbarBadges: badges
+})
diff --git a/src/extensions/core/nodeTemplates.ts b/src/extensions/core/nodeTemplates.ts
index 040b54526..532fbc410 100644
--- a/src/extensions/core/nodeTemplates.ts
+++ b/src/extensions/core/nodeTemplates.ts
@@ -32,9 +32,13 @@ import { GroupNodeConfig, GroupNodeHandler } from './groupNode'
 const id = 'Comfy.NodeTemplates'
 const file = 'comfy.templates.json'
 
+interface NodeTemplate {
+  name: string
+  data: string
+}
+
 class ManageTemplates extends ComfyDialog {
-  // @ts-expect-error fixme ts strict error
-  templates: any[]
+  templates: NodeTemplate[] = []
   draggedEl: HTMLElement | null
   saveVisualCue: number | null
   emptyImg: HTMLImageElement
diff --git a/src/extensions/core/previewAny.ts b/src/extensions/core/previewAny.ts
index d9d093702..d06ba1584 100644
--- a/src/extensions/core/previewAny.ts
+++ b/src/extensions/core/previewAny.ts
@@ -75,7 +75,9 @@ useExtensionService().registerExtension({
 
         for (const previewWidget of previewWidgets) {
           const text = message.text ?? ''
-          previewWidget.value = Array.isArray(text) ? (text[0] ?? '') : text
+          previewWidget.value = Array.isArray(text)
+            ? (text?.join('\n\n') ?? '')
+            : text
         }
       }
     }
diff --git a/src/extensions/core/uploadAudio.ts b/src/extensions/core/uploadAudio.ts
index fbe645859..c1450632b 100644
--- a/src/extensions/core/uploadAudio.ts
+++ b/src/extensions/core/uploadAudio.ts
@@ -1,6 +1,5 @@
 import { MediaRecorder as ExtendableMediaRecorder } from 'extendable-media-recorder'
 
-import { useChainCallback } from '@/composables/functional/useChainCallback'
 import { useNodeDragAndDrop } from '@/composables/node/useNodeDragAndDrop'
 import { useNodeFileInput } from '@/composables/node/useNodeFileInput'
 import { useNodePaste } from '@/composables/node/useNodePaste'
@@ -25,6 +24,17 @@ import { getNodeByLocatorId } from '@/utils/graphTraversalUtil'
 import { api } from '../../scripts/api'
 import { app } from '../../scripts/app'
 
+function updateUIWidget(
+  audioUIWidget: DOMWidget<HTMLAudioElement, string>,
+  url: string = ''
+) {
+  audioUIWidget.element.src = url
+  audioUIWidget.value = url
+  audioUIWidget.callback?.(url)
+  if (url) audioUIWidget.element.classList.remove('empty-audio-widget')
+  else audioUIWidget.element.classList.add('empty-audio-widget')
+}
+
 async function uploadFile(
   audioWidget: IStringWidget,
   audioUIWidget: DOMWidget<HTMLAudioElement, string>,
@@ -55,10 +65,10 @@ async function uploadFile(
       }
 
       if (updateNode) {
-        audioUIWidget.element.src = api.apiURL(
-          getResourceURL(...splitFilePath(path))
+        updateUIWidget(
+          audioUIWidget,
+          api.apiURL(getResourceURL(...splitFilePath(path)))
         )
-        audioWidget.value = path
 
         // Manually trigger the callback to update VueNodes
         audioWidget.callback?.(path)
@@ -118,26 +128,18 @@ app.registerExtension({
             const audios = output.audio
             if (!audios?.length) return
             const audio = audios[0]
-            audioUIWidget.element.src = api.apiURL(
-              getResourceURL(
-                audio.subfolder ?? '',
-                audio.filename ?? '',
-                audio.type
-              )
+            const resourceUrl = getResourceURL(
+              audio.subfolder ?? '',
+              audio.filename ?? '',
+              audio.type
             )
-            audioUIWidget.element.classList.remove('empty-audio-widget')
+            updateUIWidget(audioUIWidget, api.apiURL(resourceUrl))
           }
         }
 
-        audioUIWidget.onRemove = useChainCallback(
-          audioUIWidget.onRemove,
-          () => {
-            if (!audioUIWidget.element) return
-            audioUIWidget.element.pause()
-            audioUIWidget.element.src = ''
-            audioUIWidget.element.remove()
-          }
-        )
+        let value = ''
+        audioUIWidget.options.getValue = () => value
+        audioUIWidget.options.setValue = (v) => (value = v)
 
         return { widget: audioUIWidget }
       }
@@ -156,10 +158,12 @@ app.registerExtension({
         (w) => w.name === 'audioUI'
       ) as unknown as DOMWidget<HTMLAudioElement, string>
       const audio = output.audio[0]
-      audioUIWidget.element.src = api.apiURL(
-        getResourceURL(audio.subfolder ?? '', audio.filename ?? '', audio.type)
+      const resourceUrl = getResourceURL(
+        audio.subfolder ?? '',
+        audio.filename ?? '',
+        audio.type
       )
-      audioUIWidget.element.classList.remove('empty-audio-widget')
+      updateUIWidget(audioUIWidget, api.apiURL(resourceUrl))
     }
   }
 })
@@ -183,18 +187,18 @@ app.registerExtension({
         const audioUIWidget = node.widgets.find(
           (w) => w.name === 'audioUI'
         ) as unknown as DOMWidget<HTMLAudioElement, string>
-        audioUIWidget.options.canvasOnly = true
 
         const onAudioWidgetUpdate = () => {
-          if (typeof audioWidget.value !== 'string') return
-          audioUIWidget.element.src = api.apiURL(
-            getResourceURL(...splitFilePath(audioWidget.value))
+          updateUIWidget(
+            audioUIWidget,
+            api.apiURL(
+              getResourceURL(...splitFilePath(audioWidget.value ?? ''))
+            )
           )
         }
         // Initially load default audio file to audioUIWidget.
-        if (audioWidget.value) {
-          onAudioWidgetUpdate()
-        }
+        onAudioWidgetUpdate()
+
         audioWidget.callback = onAudioWidgetUpdate
 
         // Load saved audio file widget values if restoring from workflow
@@ -202,9 +206,7 @@ app.registerExtension({
         node.onGraphConfigured = function () {
           // @ts-expect-error fixme ts strict error
           onGraphConfigured?.apply(this, arguments)
-          if (audioWidget.value) {
-            onAudioWidgetUpdate()
-          }
+          onAudioWidgetUpdate()
         }
 
         const handleUpload = async (files: File[]) => {
@@ -328,7 +330,7 @@ app.registerExtension({
                     URL.revokeObjectURL(audioUIWidget.element.src)
                   }
 
-                  audioUIWidget.element.src = URL.createObjectURL(audioBlob)
+                  updateUIWidget(audioUIWidget, URL.createObjectURL(audioBlob))
 
                   isRecording = false
 
diff --git a/src/extensions/core/widgetInputs.ts b/src/extensions/core/widgetInputs.ts
index c7f9f6eb8..879e79976 100644
--- a/src/extensions/core/widgetInputs.ts
+++ b/src/extensions/core/widgetInputs.ts
@@ -1,7 +1,4 @@
-import {
-  type CallbackParams,
-  useChainCallback
-} from '@/composables/functional/useChainCallback'
+import { useChainCallback } from '@/composables/functional/useChainCallback'
 import { LGraphNode, LiteGraph } from '@/lib/litegraph/src/litegraph'
 import type {
   INodeInputSlot,
@@ -11,7 +8,10 @@ import type {
 } from '@/lib/litegraph/src/litegraph'
 import { NodeSlot } from '@/lib/litegraph/src/node/NodeSlot'
 import type { CanvasPointerEvent } from '@/lib/litegraph/src/types/events'
-import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
+import type {
+  IBaseWidget,
+  TWidgetValue
+} from '@/lib/litegraph/src/types/widgets'
 import type { InputSpec } from '@/schemas/nodeDefSchema'
 import { app } from '@/scripts/app'
 import {
@@ -26,7 +26,7 @@ import { isPrimitiveNode } from '@/renderer/utils/nodeTypeGuards'
 
 const replacePropertyName = 'Run widget replace on values'
 export class PrimitiveNode extends LGraphNode {
-  controlValues?: any[]
+  controlValues?: TWidgetValue[]
   lastType?: string
   static override category: string
   constructor(title: string) {
@@ -561,7 +561,7 @@ app.registerExtension({
     const origOnInputDblClick = nodeType.prototype.onInputDblClick
     nodeType.prototype.onInputDblClick = function (
       this: LGraphNode,
-      ...[slot, ...args]: CallbackParams<typeof origOnInputDblClick>
+      ...[slot, ...args]: Parameters<NonNullable<typeof origOnInputDblClick>>
     ) {
       const r = origOnInputDblClick?.apply(this, [slot, ...args])
 
diff --git a/src/lib/litegraph/src/LGraph.ts b/src/lib/litegraph/src/LGraph.ts
index 49ad35101..95bd5b3ad 100644
--- a/src/lib/litegraph/src/LGraph.ts
+++ b/src/lib/litegraph/src/LGraph.ts
@@ -2603,6 +2603,10 @@ export class Subgraph
   }
 
   addInput(name: string, type: string): SubgraphInput {
+    if (name === null || type === null) {
+      throw new Error('Name and type are required for subgraph input')
+    }
+
     this.events.dispatch('adding-input', { name, type })
 
     const input = new SubgraphInput(
@@ -2621,6 +2625,10 @@ export class Subgraph
   }
 
   addOutput(name: string, type: string): SubgraphOutput {
+    if (name === null || type === null) {
+      throw new Error('Name and type are required for subgraph output')
+    }
+
     this.events.dispatch('adding-output', { name, type })
 
     const output = new SubgraphOutput(
diff --git a/src/lib/litegraph/src/LGraphCanvas.ts b/src/lib/litegraph/src/LGraphCanvas.ts
index 30d7a3fd6..37c0950a2 100644
--- a/src/lib/litegraph/src/LGraphCanvas.ts
+++ b/src/lib/litegraph/src/LGraphCanvas.ts
@@ -1350,12 +1350,12 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
     })
 
     function inner_clicked(
-      this: ContextMenu<string>,
+      this: ContextMenuDivElement,
       v?: string | IContextMenuValue<string>
     ) {
       if (!node || typeof v === 'string' || !v?.value) return
 
-      const rect = this.root.getBoundingClientRect()
+      const rect = this.getBoundingClientRect()
       canvas.showEditPropertyValue(node, v.value, {
         position: [rect.left, rect.top]
       })
@@ -4283,6 +4283,12 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
     item.selected = true
     this.selectedItems.add(item)
     this.state.selectionChanged = true
+
+    if (item instanceof LGraphGroup) {
+      item.recomputeInsideNodes()
+      return
+    }
+
     if (!(item instanceof LGraphNode)) return
 
     // Node-specific handling
diff --git a/src/lib/litegraph/src/LGraphGroup.test.ts b/src/lib/litegraph/src/LGraphGroup.test.ts
index 589e5a958..64b437b6a 100644
--- a/src/lib/litegraph/src/LGraphGroup.test.ts
+++ b/src/lib/litegraph/src/LGraphGroup.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect } from 'vitest'
 
-import { LGraphGroup } from '@/lib/litegraph/src/litegraph'
+import { LGraph, LGraphGroup } from '@/lib/litegraph/src/litegraph'
 
 import { test } from './__fixtures__/testExtensions'
 
@@ -9,4 +9,72 @@ describe('LGraphGroup', () => {
     const link = new LGraphGroup('title', 929)
     expect(link.serialize()).toMatchSnapshot('Basic')
   })
+
+  describe('recomputeInsideNodes', () => {
+    test('uses visited set to avoid redundant computation', () => {
+      const graph = new LGraph()
+
+      // Create 4 nested groups: outer -> mid1 -> mid2 -> inner
+      const outer = new LGraphGroup('outer')
+      outer.pos = [0, 0]
+      outer.size = [400, 400]
+      graph.add(outer)
+
+      const mid1 = new LGraphGroup('mid1')
+      mid1.pos = [10, 10]
+      mid1.size = [300, 300]
+      graph.add(mid1)
+
+      const mid2 = new LGraphGroup('mid2')
+      mid2.pos = [20, 20]
+      mid2.size = [200, 200]
+      graph.add(mid2)
+
+      const inner = new LGraphGroup('inner')
+      inner.pos = [30, 30]
+      inner.size = [100, 100]
+      graph.add(inner)
+
+      // Track the visited set to verify each group is only fully processed once
+      const visited = new Set<number>()
+      outer.recomputeInsideNodes(100, visited)
+
+      // All nested groups should be in the visited set
+      expect(visited.has(outer.id)).toBe(true)
+      expect(visited.has(mid1.id)).toBe(true)
+      expect(visited.has(mid2.id)).toBe(true)
+      expect(visited.has(inner.id)).toBe(true)
+      expect(visited.size).toBe(4)
+
+      // Verify children relationships are correct
+      expect(outer.children.has(mid1)).toBe(true)
+      expect(outer.children.has(mid2)).toBe(true)
+      expect(outer.children.has(inner)).toBe(true)
+      expect(mid1.children.has(mid2)).toBe(true)
+      expect(mid1.children.has(inner)).toBe(true)
+      expect(mid2.children.has(inner)).toBe(true)
+    })
+
+    test('respects maxDepth limit', () => {
+      const graph = new LGraph()
+
+      const outer = new LGraphGroup('outer')
+      outer.pos = [0, 0]
+      outer.size = [300, 300]
+      graph.add(outer)
+
+      const inner = new LGraphGroup('inner')
+      inner.pos = [10, 10]
+      inner.size = [100, 100]
+      graph.add(inner)
+
+      // With maxDepth=1, inner group is added as child but not processed
+      outer.recomputeInsideNodes(1)
+
+      // outer should have inner as a child
+      expect(outer.children.has(inner)).toBe(true)
+      // inner should not have computed its own children (it was never processed)
+      expect(inner.children.size).toBe(0)
+    })
+  })
 })
diff --git a/src/lib/litegraph/src/LGraphGroup.ts b/src/lib/litegraph/src/LGraphGroup.ts
index 9e14cf277..ee3197d43 100644
--- a/src/lib/litegraph/src/LGraphGroup.ts
+++ b/src/lib/litegraph/src/LGraphGroup.ts
@@ -241,8 +241,21 @@ export class LGraphGroup implements Positionable, IPinnable, IColorable {
     return this.pinned ? false : snapPoint(this.pos, snapTo)
   }
 
-  recomputeInsideNodes(): void {
+  /**
+   * Recomputes which items (nodes, reroutes, nested groups) are inside this group.
+   * Recursively processes nested groups to ensure their children are also computed.
+   * @param maxDepth Maximum recursion depth for nested groups. Use 1 to skip nested group computation.
+   * @param visited Set of already visited group IDs to prevent redundant computation.
+   */
+  recomputeInsideNodes(
+    maxDepth: number = 100,
+    visited: Set<number> = new Set()
+  ): void {
     if (!this.graph) throw new NullGraphError()
+    if (maxDepth <= 0 || visited.has(this.id)) return
+
+    visited.add(this.id)
+
     const { nodes, reroutes, groups } = this.graph
     const children = this._children
     this._nodes.length = 0
@@ -261,10 +274,16 @@ export class LGraphGroup implements Positionable, IPinnable, IColorable {
       if (isPointInRect(reroute.pos, this._bounding)) children.add(reroute)
     }
 
-    // Move groups we wholly contain
+    // Move groups we wholly contain and recursively compute their children
+    const containedGroups: LGraphGroup[] = []
     for (const group of groups) {
-      if (containsRect(this._bounding, group._bounding)) children.add(group)
+      if (group !== this && containsRect(this._bounding, group._bounding)) {
+        children.add(group)
+        containedGroups.push(group)
+      }
     }
+    for (const group of containedGroups)
+      group.recomputeInsideNodes(maxDepth - 1, visited)
 
     groups.sort((a, b) => {
       if (a === this) {
diff --git a/src/lib/litegraph/src/LGraphNode.test.ts b/src/lib/litegraph/src/LGraphNode.test.ts
index 98ef533f6..6682d274c 100644
--- a/src/lib/litegraph/src/LGraphNode.test.ts
+++ b/src/lib/litegraph/src/LGraphNode.test.ts
@@ -14,6 +14,11 @@ import {
 } from '@/lib/litegraph/src/litegraph'
 
 import { test } from './__fixtures__/testExtensions'
+import { createMockLGraphNodeWithArrayBoundingRect } from '@/utils/__tests__/litegraphTestUtils'
+
+interface NodeConstructorWithSlotOffset {
+  slot_start_y?: number
+}
 
 function getMockISerialisedNode(
   data: Partial<ISerialisedNode>
@@ -297,16 +302,10 @@ describe('LGraphNode', () => {
 
   describe('getInputPos and getOutputPos', () => {
     test('should handle collapsed nodes correctly', () => {
-      const node = new LGraphNode('TestNode') as unknown as Omit<
-        LGraphNode,
-        'boundingRect'
-      > & { boundingRect: Float64Array }
+      const node = createMockLGraphNodeWithArrayBoundingRect('TestNode')
       node.pos = [100, 100]
       node.size = [100, 100]
-      node.boundingRect[0] = 100
-      node.boundingRect[1] = 100
-      node.boundingRect[2] = 100
-      node.boundingRect[3] = 100
+      node.updateArea()
       node.configure(
         getMockISerialisedNode({
           id: 1,
@@ -366,16 +365,10 @@ describe('LGraphNode', () => {
     })
 
     test('should detect input slots correctly', () => {
-      const node = new LGraphNode('TestNode') as unknown as Omit<
-        LGraphNode,
-        'boundingRect'
-      > & { boundingRect: Float64Array }
+      const node = createMockLGraphNodeWithArrayBoundingRect('TestNode')
       node.pos = [100, 100]
       node.size = [100, 100]
-      node.boundingRect[0] = 100
-      node.boundingRect[1] = 100
-      node.boundingRect[2] = 200
-      node.boundingRect[3] = 200
+      node.updateArea()
       node.configure(
         getMockISerialisedNode({
           id: 1,
@@ -398,16 +391,10 @@ describe('LGraphNode', () => {
     })
 
     test('should detect output slots correctly', () => {
-      const node = new LGraphNode('TestNode') as unknown as Omit<
-        LGraphNode,
-        'boundingRect'
-      > & { boundingRect: Float64Array }
+      const node = createMockLGraphNodeWithArrayBoundingRect('TestNode')
       node.pos = [100, 100]
       node.size = [100, 100]
-      node.boundingRect[0] = 100
-      node.boundingRect[1] = 100
-      node.boundingRect[2] = 200
-      node.boundingRect[3] = 200
+      node.updateArea()
       node.configure(
         getMockISerialisedNode({
           id: 1,
@@ -431,16 +418,10 @@ describe('LGraphNode', () => {
     })
 
     test('should prioritize input slots over output slots', () => {
-      const node = new LGraphNode('TestNode') as unknown as Omit<
-        LGraphNode,
-        'boundingRect'
-      > & { boundingRect: Float64Array }
+      const node = createMockLGraphNodeWithArrayBoundingRect('TestNode')
       node.pos = [100, 100]
       node.size = [100, 100]
-      node.boundingRect[0] = 100
-      node.boundingRect[1] = 100
-      node.boundingRect[2] = 200
-      node.boundingRect[3] = 200
+      node.updateArea()
       node.configure(
         getMockISerialisedNode({
           id: 1,
@@ -632,7 +613,8 @@ describe('LGraphNode', () => {
       }
       node.inputs = [inputSlot, inputSlot2]
       const slotIndex = 0
-      const nodeOffsetY = (node.constructor as any).slot_start_y || 0
+      const nodeOffsetY =
+        (node.constructor as NodeConstructorWithSlotOffset).slot_start_y || 0
       const expectedY =
         200 + (slotIndex + 0.7) * LiteGraph.NODE_SLOT_HEIGHT + nodeOffsetY
       const expectedX = 100 + LiteGraph.NODE_SLOT_HEIGHT * 0.5
@@ -644,7 +626,7 @@ describe('LGraphNode', () => {
     })
 
     test('should return default vertical position including slot_start_y when defined', () => {
-      ;(node.constructor as any).slot_start_y = 25
+      ;(node.constructor as NodeConstructorWithSlotOffset).slot_start_y = 25
       node.flags.collapsed = false
       node.inputs = [inputSlot]
       const slotIndex = 0
@@ -653,7 +635,7 @@ describe('LGraphNode', () => {
         200 + (slotIndex + 0.7) * LiteGraph.NODE_SLOT_HEIGHT + nodeOffsetY
       const expectedX = 100 + LiteGraph.NODE_SLOT_HEIGHT * 0.5
       expect(node.getInputSlotPos(inputSlot)).toEqual([expectedX, expectedY])
-      delete (node.constructor as any).slot_start_y
+      delete (node.constructor as NodeConstructorWithSlotOffset).slot_start_y
     })
     test('should not overwrite onMouseDown prototype', () => {
       expect(Object.prototype.hasOwnProperty.call(node, 'onMouseDown')).toEqual(
diff --git a/src/lib/litegraph/src/LGraphNodeProperties.test.ts b/src/lib/litegraph/src/LGraphNodeProperties.test.ts
index aca6fe391..1c523945c 100644
--- a/src/lib/litegraph/src/LGraphNodeProperties.test.ts
+++ b/src/lib/litegraph/src/LGraphNodeProperties.test.ts
@@ -1,22 +1,25 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it } from 'vitest'
 
 import { LGraphNodeProperties } from '@/lib/litegraph/src/LGraphNodeProperties'
+import type { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import {
+  createMockLGraph,
+  createMockLGraphNode
+} from '@/utils/__tests__/litegraphTestUtils'
 
 describe('LGraphNodeProperties', () => {
-  let mockNode: any
-  let mockGraph: any
+  let mockNode: LGraphNode
+  let mockGraph: LGraph
 
   beforeEach(() => {
-    mockGraph = {
-      trigger: vi.fn()
-    }
+    mockGraph = createMockLGraph()
 
-    mockNode = {
+    mockNode = createMockLGraphNode({
       id: 123,
       title: 'Test Node',
       flags: {},
       graph: mockGraph
-    }
+    })
   })
 
   describe('property tracking', () => {
diff --git a/src/lib/litegraph/src/LGraphNodeProperties.ts b/src/lib/litegraph/src/LGraphNodeProperties.ts
index ae51d3739..9df938298 100644
--- a/src/lib/litegraph/src/LGraphNodeProperties.ts
+++ b/src/lib/litegraph/src/LGraphNodeProperties.ts
@@ -13,7 +13,9 @@ const DEFAULT_TRACKED_PROPERTIES: string[] = [
   'flags.pinned',
   'mode',
   'color',
-  'bgcolor'
+  'bgcolor',
+  'shape',
+  'showAdvanced'
 ]
 /**
  * Manages node properties with optional change tracking and instrumentation.
diff --git a/src/lib/litegraph/src/canvas/LinkConnector.core.test.ts b/src/lib/litegraph/src/canvas/LinkConnector.core.test.ts
index 65b468940..4b1d29cca 100644
--- a/src/lib/litegraph/src/canvas/LinkConnector.core.test.ts
+++ b/src/lib/litegraph/src/canvas/LinkConnector.core.test.ts
@@ -17,6 +17,10 @@ import {
   LinkDirection
 } from '@/lib/litegraph/src/litegraph'
 import type { ConnectingLink } from '@/lib/litegraph/src/interfaces'
+import {
+  createMockNodeInputSlot,
+  createMockNodeOutputSlot
+} from '@/utils/__tests__/litegraphTestUtils'
 
 interface TestContext {
   network: LinkNetwork & { add(node: LGraphNode): void }
@@ -136,7 +140,7 @@ describe('LinkConnector', () => {
       connector.state.connectingTo = 'input'
 
       expect(() => {
-        connector.moveInputLink(network, { link: 1 } as any)
+        connector.moveInputLink(network, createMockNodeInputSlot({ link: 1 }))
       }).toThrow('Already dragging links.')
     })
   })
@@ -174,7 +178,10 @@ describe('LinkConnector', () => {
       connector.state.connectingTo = 'output'
 
       expect(() => {
-        connector.moveOutputLink(network, { links: [1] } as any)
+        connector.moveOutputLink(
+          network,
+          createMockNodeOutputSlot({ links: [1] })
+        )
       }).toThrow('Already dragging links.')
     })
   })
diff --git a/src/lib/litegraph/src/canvas/LinkConnector.integration.test.ts b/src/lib/litegraph/src/canvas/LinkConnector.integration.test.ts
index 3c4368c5a..671709345 100644
--- a/src/lib/litegraph/src/canvas/LinkConnector.integration.test.ts
+++ b/src/lib/litegraph/src/canvas/LinkConnector.integration.test.ts
@@ -12,6 +12,10 @@ import { LGraphNode, LLink, LinkConnector } from '@/lib/litegraph/src/litegraph'
 
 import { test as baseTest } from '../__fixtures__/testExtensions'
 import type { ConnectingLink } from '@/lib/litegraph/src/interfaces'
+import {
+  createMockCanvasPointerEvent,
+  createMockCanvasRenderingContext2D
+} from '@/utils/__tests__/litegraphTestUtils'
 
 interface TestContext {
   graph: LGraph
@@ -35,9 +39,9 @@ const test = baseTest.extend<TestContext>({
   },
 
   graph: async ({ reroutesComplexGraph }, use) => {
-    const ctx = vi.fn(() => ({ measureText: vi.fn(() => ({ width: 10 })) }))
+    const mockCtx = createMockCanvasRenderingContext2D()
     for (const node of reroutesComplexGraph.nodes) {
-      node.updateArea(ctx() as unknown as CanvasRenderingContext2D)
+      node.updateArea(mockCtx)
     }
     await use(reroutesComplexGraph)
   },
@@ -186,10 +190,10 @@ const test = baseTest.extend<TestContext>({
 })
 
 function mockedNodeTitleDropEvent(node: LGraphNode): CanvasPointerEvent {
-  return {
-    canvasX: node.pos[0] + node.size[0] / 2,
-    canvasY: node.pos[1] + 16
-  } as any
+  return createMockCanvasPointerEvent(
+    node.pos[0] + node.size[0] / 2,
+    node.pos[1] + 16
+  )
 }
 
 function mockedInputDropEvent(
@@ -197,10 +201,7 @@ function mockedInputDropEvent(
   slot: number
 ): CanvasPointerEvent {
   const pos = node.getInputPos(slot)
-  return {
-    canvasX: pos[0],
-    canvasY: pos[1]
-  } as any
+  return createMockCanvasPointerEvent(pos[0], pos[1])
 }
 
 function mockedOutputDropEvent(
@@ -208,10 +209,7 @@ function mockedOutputDropEvent(
   slot: number
 ): CanvasPointerEvent {
   const pos = node.getOutputPos(slot)
-  return {
-    canvasX: pos[0],
-    canvasY: pos[1]
-  } as any
+  return createMockCanvasPointerEvent(pos[0], pos[1])
 }
 
 describe('LinkConnector Integration', () => {
@@ -239,7 +237,7 @@ describe('LinkConnector Integration', () => {
 
       const canvasX = disconnectedNode.pos[0] + disconnectedNode.size[0] / 2
       const canvasY = disconnectedNode.pos[1] + 16
-      const dropEvent = { canvasX, canvasY } as any
+      const dropEvent = createMockCanvasPointerEvent(canvasX, canvasY)
 
       // Drop links, ensure reset has not been run
       connector.dropLinks(graph, dropEvent)
@@ -281,7 +279,7 @@ describe('LinkConnector Integration', () => {
 
       const canvasX = disconnectedNode.pos[0] + disconnectedNode.size[0] / 2
       const canvasY = disconnectedNode.pos[1] + 16
-      const dropEvent = { canvasX, canvasY } as any
+      const dropEvent = createMockCanvasPointerEvent(canvasX, canvasY)
 
       connector.dropLinks(graph, dropEvent)
       connector.reset()
@@ -422,7 +420,7 @@ describe('LinkConnector Integration', () => {
 
       const canvasX = disconnectedNode.pos[0] + disconnectedNode.size[0] / 2
       const canvasY = disconnectedNode.pos[1] + 16
-      const dropEvent = { canvasX, canvasY } as any
+      const dropEvent = createMockCanvasPointerEvent(canvasX, canvasY)
 
       connector.dropLinks(graph, dropEvent)
       connector.reset()
@@ -473,9 +471,10 @@ describe('LinkConnector Integration', () => {
       expect(floatingLink).toBeInstanceOf(LLink)
       const floatingReroute = LLink.getReroutes(graph, floatingLink)[0]
 
-      const canvasX = floatingReroute.pos[0]
-      const canvasY = floatingReroute.pos[1]
-      const dropEvent = { canvasX, canvasY } as any
+      const dropEvent = createMockCanvasPointerEvent(
+        floatingReroute.pos[0],
+        floatingReroute.pos[1]
+      )
 
       connector.dropLinks(graph, dropEvent)
       connector.reset()
@@ -554,7 +553,10 @@ describe('LinkConnector Integration', () => {
       const manyOutputsNode = graph.getNodeById(4)!
       const canvasX = floatingReroute.pos[0]
       const canvasY = floatingReroute.pos[1]
-      const floatingRerouteEvent = { canvasX, canvasY } as any
+      const floatingRerouteEvent = createMockCanvasPointerEvent(
+        canvasX,
+        canvasY
+      )
 
       connector.moveOutputLink(graph, manyOutputsNode.outputs[0])
       connector.dropLinks(graph, floatingRerouteEvent)
@@ -579,7 +581,7 @@ describe('LinkConnector Integration', () => {
 
       const canvasX = reroute7.pos[0]
       const canvasY = reroute7.pos[1]
-      const reroute7Event = { canvasX, canvasY } as any
+      const reroute7Event = createMockCanvasPointerEvent(canvasX, canvasY)
 
       const toSortedRerouteChain = (linkIds: number[]) =>
         linkIds
@@ -698,7 +700,7 @@ describe('LinkConnector Integration', () => {
       const canvasY = disconnectedNode.pos[1]
 
       connector.dragFromReroute(graph, floatingReroute)
-      connector.dropLinks(graph, { canvasX, canvasY } as any)
+      connector.dropLinks(graph, createMockCanvasPointerEvent(canvasX, canvasY))
       connector.reset()
 
       expect(graph.floatingLinks.size).toBe(0)
@@ -716,7 +718,7 @@ describe('LinkConnector Integration', () => {
       const canvasY = reroute8.pos[1]
 
       connector.dragFromReroute(graph, floatingReroute)
-      connector.dropLinks(graph, { canvasX, canvasY } as any)
+      connector.dropLinks(graph, createMockCanvasPointerEvent(canvasX, canvasY))
       connector.reset()
 
       expect(graph.floatingLinks.size).toBe(0)
@@ -801,10 +803,10 @@ describe('LinkConnector Integration', () => {
     connector.moveOutputLink(graph, floatingOutNode.outputs[0])
 
     const manyOutputsNode = graph.getNodeById(4)!
-    const dropEvent = {
-      canvasX: manyOutputsNode.pos[0],
-      canvasY: manyOutputsNode.pos[1]
-    } as any
+    const dropEvent = createMockCanvasPointerEvent(
+      manyOutputsNode.pos[0],
+      manyOutputsNode.pos[1]
+    )
     connector.dropLinks(graph, dropEvent)
     connector.reset()
 
@@ -818,9 +820,11 @@ describe('LinkConnector Integration', () => {
     connector.moveOutputLink(graph, manyOutputsNode.outputs[0])
 
     const disconnectedNode = graph.getNodeById(9)!
-    dropEvent.canvasX = disconnectedNode.pos[0]
-    dropEvent.canvasY = disconnectedNode.pos[1]
-    connector.dropLinks(graph, dropEvent)
+    const dropEvent2 = createMockCanvasPointerEvent(
+      disconnectedNode.pos[0],
+      disconnectedNode.pos[1]
+    )
+    connector.dropLinks(graph, dropEvent2)
     connector.reset()
 
     const newOutput = disconnectedNode.outputs[0]
@@ -951,10 +955,10 @@ describe('LinkConnector Integration', () => {
 
       const targetReroute = graph.reroutes.get(targetRerouteId)!
       const nextLinkIds = getNextLinkIds(targetReroute.linkIds)
-      const dropEvent = {
-        canvasX: targetReroute.pos[0],
-        canvasY: targetReroute.pos[1]
-      } as any
+      const dropEvent = createMockCanvasPointerEvent(
+        targetReroute.pos[0],
+        targetReroute.pos[1]
+      )
 
       connector.dragNewFromOutput(
         graph,
@@ -1094,10 +1098,10 @@ describe('LinkConnector Integration', () => {
 
       connector.dragFromReroute(graph, fromReroute)
 
-      const dropEvent = {
-        canvasX: toReroute.pos[0],
-        canvasY: toReroute.pos[1]
-      } as any
+      const dropEvent = createMockCanvasPointerEvent(
+        toReroute.pos[0],
+        toReroute.pos[1]
+      )
       connector.dropLinks(graph, dropEvent)
       connector.reset()
 
@@ -1167,10 +1171,10 @@ describe('LinkConnector Integration', () => {
       const fromReroute = graph.reroutes.get(from)!
       const toReroute = graph.reroutes.get(to)!
 
-      const dropEvent = {
-        canvasX: toReroute.pos[0],
-        canvasY: toReroute.pos[1]
-      } as any
+      const dropEvent = createMockCanvasPointerEvent(
+        toReroute.pos[0],
+        toReroute.pos[1]
+      )
 
       connector.dragFromReroute(graph, fromReroute)
       connector.dropLinks(graph, dropEvent)
@@ -1204,10 +1208,10 @@ describe('LinkConnector Integration', () => {
       const node = graph.getNodeById(nodeId)!
       const input = node.inputs[0]
       const reroute = graph.getReroute(rerouteId)!
-      const dropEvent = {
-        canvasX: reroute.pos[0],
-        canvasY: reroute.pos[1]
-      } as any
+      const dropEvent = createMockCanvasPointerEvent(
+        reroute.pos[0],
+        reroute.pos[1]
+      )
 
       connector.dragNewFromInput(graph, node, input)
       connector.dropLinks(graph, dropEvent)
@@ -1234,7 +1238,7 @@ describe('LinkConnector Integration', () => {
 
       const node = graph.getNodeById(nodeId)!
       const reroute = graph.getReroute(rerouteId)!
-      const dropEvent = { canvasX: node.pos[0], canvasY: node.pos[1] } as any
+      const dropEvent = createMockCanvasPointerEvent(node.pos[0], node.pos[1])
 
       connector.dragFromReroute(graph, reroute)
       connector.dropLinks(graph, dropEvent)
@@ -1262,10 +1266,10 @@ describe('LinkConnector Integration', () => {
       const node = graph.getNodeById(nodeId)!
       const reroute = graph.getReroute(rerouteId)!
       const inputPos = node.getInputPos(0)
-      const dropOnInputEvent = {
-        canvasX: inputPos[0],
-        canvasY: inputPos[1]
-      } as any
+      const dropOnInputEvent = createMockCanvasPointerEvent(
+        inputPos[0],
+        inputPos[1]
+      )
 
       connector.dragFromReroute(graph, reroute)
       connector.dropLinks(graph, dropOnInputEvent)
diff --git a/src/lib/litegraph/src/canvas/LinkConnector.test.ts b/src/lib/litegraph/src/canvas/LinkConnector.test.ts
index 29786bdf1..9ec8e3dfb 100644
--- a/src/lib/litegraph/src/canvas/LinkConnector.test.ts
+++ b/src/lib/litegraph/src/canvas/LinkConnector.test.ts
@@ -1,23 +1,46 @@
 // TODO: Fix these tests after migration
 import { beforeEach, describe, expect, test, vi } from 'vitest'
 
-import type { INodeInputSlot, LGraphNode } from '@/lib/litegraph/src/litegraph'
-// We don't strictly need RenderLink interface import for the mock
 import { LinkConnector } from '@/lib/litegraph/src/litegraph'
+import {
+  createMockCanvasPointerEvent,
+  createMockLGraphNode,
+  createMockLinkNetwork,
+  createMockNodeInputSlot,
+  createMockNodeOutputSlot
+} from '@/utils/__tests__/litegraphTestUtils'
 
 // Mocks
 const mockSetConnectingLinks = vi.fn()
 
+type RenderLinkItem = LinkConnector['renderLinks'][number]
+
 // Mock a structure that has the needed method
-function mockRenderLinkImpl(canConnect: boolean) {
-  return {
-    canConnectToInput: vi.fn().mockReturnValue(canConnect)
-    // Add other properties if they become necessary for tests
+function mockRenderLinkImpl(canConnect: boolean): RenderLinkItem {
+  const partial: Partial<RenderLinkItem> = {
+    toType: 'output',
+    fromPos: [0, 0],
+    fromSlotIndex: 0,
+    fromDirection: 0,
+    network: createMockLinkNetwork(),
+    node: createMockLGraphNode(),
+    fromSlot: createMockNodeOutputSlot(),
+    dragDirection: 0,
+    canConnectToInput: vi.fn().mockReturnValue(canConnect),
+    canConnectToOutput: vi.fn().mockReturnValue(false),
+    canConnectToReroute: vi.fn().mockReturnValue(false),
+    connectToInput: vi.fn(),
+    connectToOutput: vi.fn(),
+    connectToSubgraphInput: vi.fn(),
+    connectToRerouteOutput: vi.fn(),
+    connectToSubgraphOutput: vi.fn(),
+    connectToRerouteInput: vi.fn()
   }
+  return partial as RenderLinkItem
 }
 
-const mockNode = {} as LGraphNode
-const mockInput = {} as INodeInputSlot
+const mockNode = createMockLGraphNode()
+const mockInput = createMockNodeInputSlot()
 
 describe.skip('LinkConnector', () => {
   let connector: LinkConnector
@@ -37,8 +60,7 @@ describe.skip('LinkConnector', () => {
     test('should return true if at least one render link can connect', () => {
       const link1 = mockRenderLinkImpl(false)
       const link2 = mockRenderLinkImpl(true)
-      // Cast to any to satisfy the push requirement, as we only need the canConnectToInput method
-      connector.renderLinks.push(link1 as any, link2 as any)
+      connector.renderLinks.push(link1, link2)
       expect(connector.isInputValidDrop(mockNode, mockInput)).toBe(true)
       expect(link1.canConnectToInput).toHaveBeenCalledWith(mockNode, mockInput)
       expect(link2.canConnectToInput).toHaveBeenCalledWith(mockNode, mockInput)
@@ -47,7 +69,7 @@ describe.skip('LinkConnector', () => {
     test('should return false if no render links can connect', () => {
       const link1 = mockRenderLinkImpl(false)
       const link2 = mockRenderLinkImpl(false)
-      connector.renderLinks.push(link1 as any, link2 as any)
+      connector.renderLinks.push(link1, link2)
       expect(connector.isInputValidDrop(mockNode, mockInput)).toBe(false)
       expect(link1.canConnectToInput).toHaveBeenCalledWith(mockNode, mockInput)
       expect(link2.canConnectToInput).toHaveBeenCalledWith(mockNode, mockInput)
@@ -57,7 +79,7 @@ describe.skip('LinkConnector', () => {
       const link1 = mockRenderLinkImpl(false)
       const link2 = mockRenderLinkImpl(true) // This one can connect
       const link3 = mockRenderLinkImpl(false)
-      connector.renderLinks.push(link1 as any, link2 as any, link3 as any)
+      connector.renderLinks.push(link1, link2, link3)
 
       expect(connector.isInputValidDrop(mockNode, mockInput)).toBe(true)
 
@@ -88,7 +110,10 @@ describe.skip('LinkConnector', () => {
 
     test('should call the listener when the event is dispatched before reset', () => {
       const listener = vi.fn()
-      const eventData = { renderLinks: [], event: {} as any } // Mock event data
+      const eventData = {
+        renderLinks: [],
+        event: createMockCanvasPointerEvent(0, 0)
+      }
       connector.listenUntilReset('before-drop-links', listener)
 
       connector.events.dispatch('before-drop-links', eventData)
@@ -120,7 +145,10 @@ describe.skip('LinkConnector', () => {
 
     test('should not call the listener after reset is dispatched', () => {
       const listener = vi.fn()
-      const eventData = { renderLinks: [], event: {} as any }
+      const eventData = {
+        renderLinks: [],
+        event: createMockCanvasPointerEvent(0, 0)
+      }
       connector.listenUntilReset('before-drop-links', listener)
 
       // Dispatch reset first
diff --git a/src/lib/litegraph/src/canvas/LinkConnectorSubgraphInputValidation.test.ts b/src/lib/litegraph/src/canvas/LinkConnectorSubgraphInputValidation.test.ts
index 3d9740c4f..8c2922005 100644
--- a/src/lib/litegraph/src/canvas/LinkConnectorSubgraphInputValidation.test.ts
+++ b/src/lib/litegraph/src/canvas/LinkConnectorSubgraphInputValidation.test.ts
@@ -9,10 +9,20 @@ import {
   LLink
 } from '@/lib/litegraph/src/litegraph'
 import { ToInputFromIoNodeLink } from '@/lib/litegraph/src/canvas/ToInputFromIoNodeLink'
-import type { NodeInputSlot } from '@/lib/litegraph/src/litegraph'
+import type {
+  CanvasPointerEvent,
+  NodeInputSlot
+} from '@/lib/litegraph/src/litegraph'
 import { LinkDirection } from '@/lib/litegraph/src/types/globalEnums'
 
 import { createTestSubgraph } from '../subgraph/__fixtures__/subgraphHelpers'
+import {
+  createMockCanvasPointerEvent,
+  createMockNodeInputSlot
+} from '@/utils/__tests__/litegraphTestUtils'
+
+type MockPointerEvent = CanvasPointerEvent
+type MockRenderLink = ToOutputRenderLink
 
 describe('LinkConnector SubgraphInput connection validation', () => {
   let connector: LinkConnector
@@ -206,10 +216,7 @@ describe('LinkConnector SubgraphInput connection validation', () => {
       connector.state.connectingTo = 'output'
 
       // Create mock event
-      const mockEvent = {
-        canvasX: 100,
-        canvasY: 100
-      } as any
+      const mockEvent: MockPointerEvent = createMockCanvasPointerEvent(100, 100)
 
       // Mock the getSlotInPosition to return the subgraph input
       const mockGetSlotInPosition = vi.fn().mockReturnValue(subgraph.inputs[0])
@@ -256,10 +263,7 @@ describe('LinkConnector SubgraphInput connection validation', () => {
       connector.state.connectingTo = 'output'
 
       // Create mock event
-      const mockEvent = {
-        canvasX: 100,
-        canvasY: 100
-      } as any
+      const mockEvent: MockPointerEvent = createMockCanvasPointerEvent(100, 100)
 
       // Mock the getSlotInPosition to return the subgraph input
       const mockGetSlotInPosition = vi.fn().mockReturnValue(subgraph.inputs[0])
@@ -342,12 +346,12 @@ describe('LinkConnector SubgraphInput connection validation', () => {
       })
 
       // Create a mock render link without the method
-      const mockLink = {
-        fromSlot: { type: 'number' }
+      const mockLink: Partial<MockRenderLink> = {
+        fromSlot: createMockNodeInputSlot({ type: 'number' })
         // No canConnectToSubgraphInput method
-      } as any
+      }
 
-      connector.renderLinks.push(mockLink)
+      connector.renderLinks.push(mockLink as MockRenderLink)
 
       const subgraphInput = subgraph.inputs[0]
 
diff --git a/src/lib/litegraph/src/canvas/ToOutputRenderLink.test.ts b/src/lib/litegraph/src/canvas/ToOutputRenderLink.test.ts
index 73bfec657..7c9706ee6 100644
--- a/src/lib/litegraph/src/canvas/ToOutputRenderLink.test.ts
+++ b/src/lib/litegraph/src/canvas/ToOutputRenderLink.test.ts
@@ -4,23 +4,30 @@ import {
   LinkDirection,
   ToOutputRenderLink
 } from '@/lib/litegraph/src/litegraph'
+import type { CustomEventTarget } from '@/lib/litegraph/src/infrastructure/CustomEventTarget'
+import type { LinkConnectorEventMap } from '@/lib/litegraph/src/infrastructure/LinkConnectorEventMap'
+import {
+  createMockLGraphNode,
+  createMockLinkNetwork,
+  createMockNodeInputSlot,
+  createMockNodeOutputSlot
+} from '@/utils/__tests__/litegraphTestUtils'
 
 describe('ToOutputRenderLink', () => {
   describe('connectToOutput', () => {
     it('should return early if inputNode is null', () => {
       // Setup
-      const mockNetwork = {}
-      const mockFromSlot = {}
-      const mockNode = {
-        id: 'test-id',
+      const mockNetwork = createMockLinkNetwork()
+      const mockFromSlot = createMockNodeInputSlot()
+      const mockNode = createMockLGraphNode({
         inputs: [mockFromSlot],
         getInputPos: vi.fn().mockReturnValue([0, 0])
-      }
+      })
 
       const renderLink = new ToOutputRenderLink(
-        mockNetwork as any,
-        mockNode as any,
-        mockFromSlot as any,
+        mockNetwork,
+        mockNode,
+        mockFromSlot,
         undefined,
         LinkDirection.CENTER
       )
@@ -30,18 +37,21 @@ describe('ToOutputRenderLink', () => {
         value: null
       })
 
-      const mockTargetNode = {
+      const mockTargetNode = createMockLGraphNode({
         connectSlots: vi.fn()
-      }
-      const mockEvents = {
+      })
+      const mockEvents: Partial<CustomEventTarget<LinkConnectorEventMap>> = {
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
         dispatch: vi.fn()
       }
 
       // Act
       renderLink.connectToOutput(
-        mockTargetNode as any,
-        {} as any,
-        mockEvents as any
+        mockTargetNode,
+        createMockNodeOutputSlot(),
+        mockEvents as CustomEventTarget<LinkConnectorEventMap>
       )
 
       // Assert
@@ -51,35 +61,37 @@ describe('ToOutputRenderLink', () => {
 
     it('should create connection and dispatch event when inputNode exists', () => {
       // Setup
-      const mockNetwork = {}
-      const mockFromSlot = {}
-      const mockNode = {
-        id: 'test-id',
+      const mockNetwork = createMockLinkNetwork()
+      const mockFromSlot = createMockNodeInputSlot()
+      const mockNode = createMockLGraphNode({
         inputs: [mockFromSlot],
         getInputPos: vi.fn().mockReturnValue([0, 0])
-      }
+      })
 
       const renderLink = new ToOutputRenderLink(
-        mockNetwork as any,
-        mockNode as any,
-        mockFromSlot as any,
+        mockNetwork,
+        mockNode,
+        mockFromSlot,
         undefined,
         LinkDirection.CENTER
       )
 
       const mockNewLink = { id: 'new-link' }
-      const mockTargetNode = {
+      const mockTargetNode = createMockLGraphNode({
         connectSlots: vi.fn().mockReturnValue(mockNewLink)
-      }
-      const mockEvents = {
+      })
+      const mockEvents: Partial<CustomEventTarget<LinkConnectorEventMap>> = {
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
         dispatch: vi.fn()
       }
 
       // Act
       renderLink.connectToOutput(
-        mockTargetNode as any,
-        {} as any,
-        mockEvents as any
+        mockTargetNode,
+        createMockNodeOutputSlot(),
+        mockEvents as CustomEventTarget<LinkConnectorEventMap>
       )
 
       // Assert
diff --git a/src/lib/litegraph/src/contextMenuCompat.test.ts b/src/lib/litegraph/src/contextMenuCompat.test.ts
index fc4c7d156..246551dc9 100644
--- a/src/lib/litegraph/src/contextMenuCompat.test.ts
+++ b/src/lib/litegraph/src/contextMenuCompat.test.ts
@@ -3,6 +3,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { legacyMenuCompat } from '@/lib/litegraph/src/contextMenuCompat'
 import type { IContextMenuValue } from '@/lib/litegraph/src/litegraph'
 import { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
+import { createMockCanvas } from '@/utils/__tests__/litegraphTestUtils'
 
 describe('contextMenuCompat', () => {
   let originalGetCanvasMenuOptions: typeof LGraphCanvas.prototype.getCanvasMenuOptions
@@ -13,11 +14,11 @@ describe('contextMenuCompat', () => {
     originalGetCanvasMenuOptions = LGraphCanvas.prototype.getCanvasMenuOptions
 
     // Create mock canvas
-    mockCanvas = {
+    mockCanvas = createMockCanvas({
       constructor: {
         prototype: LGraphCanvas.prototype
-      }
-    } as unknown as LGraphCanvas
+      } as typeof LGraphCanvas
+    } as Partial<LGraphCanvas>)
 
     // Clear console warnings
     vi.spyOn(console, 'warn').mockImplementation(() => {})
@@ -54,11 +55,12 @@ describe('contextMenuCompat', () => {
 
       // Simulate extension monkey-patching
       const original = LGraphCanvas.prototype.getCanvasMenuOptions
-      LGraphCanvas.prototype.getCanvasMenuOptions = function (...args: any[]) {
-        const items = (original as any).apply(this, args)
-        items.push({ content: 'Custom Item', callback: () => {} })
-        return items
-      }
+      LGraphCanvas.prototype.getCanvasMenuOptions =
+        function (): (IContextMenuValue | null)[] {
+          const items = original.call(this)
+          items.push({ content: 'Custom Item', callback: () => {} })
+          return items
+        }
 
       // Should have logged a warning with extension name
       expect(warnSpy).toHaveBeenCalledWith(
@@ -83,8 +85,10 @@ describe('contextMenuCompat', () => {
       legacyMenuCompat.install(LGraphCanvas.prototype, methodName)
       legacyMenuCompat.setCurrentExtension('test.extension')
 
-      const patchFunction = function (this: LGraphCanvas, ...args: any[]) {
-        const items = (originalGetCanvasMenuOptions as any).apply(this, args)
+      const patchFunction = function (
+        this: LGraphCanvas
+      ): (IContextMenuValue | null)[] {
+        const items = originalGetCanvasMenuOptions.call(this)
         items.push({ content: 'Custom', callback: () => {} })
         return items
       }
diff --git a/src/lib/litegraph/src/interfaces.ts b/src/lib/litegraph/src/interfaces.ts
index aad3dff3f..9df7339af 100644
--- a/src/lib/litegraph/src/interfaces.ts
+++ b/src/lib/litegraph/src/interfaces.ts
@@ -254,7 +254,10 @@ type KeysOfType<T, Match> = Exclude<
 >
 
 /** The names of all (optional) methods and functions in T */
-export type MethodNames<T> = KeysOfType<T, ((...args: any) => any) | undefined>
+export type MethodNames<T> = KeysOfType<
+  T,
+  ((...args: unknown[]) => unknown) | undefined
+>
 export interface NewNodePosition {
   node: LGraphNode
   newPos: {
@@ -459,28 +462,6 @@ export interface ISubgraphInput extends INodeInputSlot {
   _subgraphSlot: SubgraphInput
 }
 
-/**
- * Shorthand for {@link Parameters} of optional callbacks.
- * @example
- * ```ts
- * const { onClick } = CustomClass.prototype
- * CustomClass.prototype.onClick = function (...args: CallbackParams<typeof onClick>) {
- *   const r = onClick?.apply(this, args)
- *   // ...
- *   return r
- * }
- * ```
- */
-export type CallbackParams<T extends ((...args: any) => any) | undefined> =
-  Parameters<Exclude<T, undefined>>
-
-/**
- * Shorthand for {@link ReturnType} of optional callbacks.
- * @see {@link CallbackParams}
- */
-export type CallbackReturn<T extends ((...args: any) => any) | undefined> =
-  ReturnType<Exclude<T, undefined>>
-
 /**
  * An object that can be hovered over.
  */
diff --git a/src/lib/litegraph/src/node/NodeSlot.ts b/src/lib/litegraph/src/node/NodeSlot.ts
index 4e17069b2..9fac7816f 100644
--- a/src/lib/litegraph/src/node/NodeSlot.ts
+++ b/src/lib/litegraph/src/node/NodeSlot.ts
@@ -30,7 +30,7 @@ export interface IDrawOptions {
   highlight?: boolean
 }
 
-const ROTATION_OFFSET = -Math.PI / 2
+const ROTATION_OFFSET = -Math.PI
 
 /** Shared base class for {@link LGraphNode} input and output slots. */
 export abstract class NodeSlot extends SlotBase implements INodeSlot {
diff --git a/src/lib/litegraph/src/subgraph/ExecutableNodeDTO.ts b/src/lib/litegraph/src/subgraph/ExecutableNodeDTO.ts
index 9e9454a81..366dbb96d 100644
--- a/src/lib/litegraph/src/subgraph/ExecutableNodeDTO.ts
+++ b/src/lib/litegraph/src/subgraph/ExecutableNodeDTO.ts
@@ -4,11 +4,7 @@ import { InvalidLinkError } from '@/lib/litegraph/src/infrastructure/InvalidLink
 import { NullGraphError } from '@/lib/litegraph/src/infrastructure/NullGraphError'
 import { RecursionError } from '@/lib/litegraph/src/infrastructure/RecursionError'
 import { SlotIndexError } from '@/lib/litegraph/src/infrastructure/SlotIndexError'
-import type {
-  CallbackParams,
-  CallbackReturn,
-  ISlotType
-} from '@/lib/litegraph/src/interfaces'
+import type { ISlotType } from '@/lib/litegraph/src/interfaces'
 import { LGraphEventMode, LiteGraph } from '@/lib/litegraph/src/litegraph'
 
 import type { Subgraph } from './Subgraph'
@@ -45,8 +41,8 @@ type ResolvedInput = {
  */
 export class ExecutableNodeDTO implements ExecutableLGraphNode {
   applyToGraph?(
-    ...args: CallbackParams<typeof this.node.applyToGraph>
-  ): CallbackReturn<typeof this.node.applyToGraph>
+    ...args: Parameters<NonNullable<typeof this.node.applyToGraph>>
+  ): ReturnType<NonNullable<typeof this.node.applyToGraph>>
 
   /** The graph that this node is a part of. */
   readonly graph: LGraph | Subgraph
diff --git a/src/lib/litegraph/src/subgraph/SubgraphEdgeCases.test.ts b/src/lib/litegraph/src/subgraph/SubgraphEdgeCases.test.ts
index b161467e2..5a5ba1745 100644
--- a/src/lib/litegraph/src/subgraph/SubgraphEdgeCases.test.ts
+++ b/src/lib/litegraph/src/subgraph/SubgraphEdgeCases.test.ts
@@ -83,7 +83,9 @@ describe.skip('SubgraphEdgeCases - Invalid States', () => {
       name: 'fake',
       type: 'number',
       disconnect: () => {}
-    } as any
+    } as Partial<Parameters<typeof subgraph.removeInput>[0]> as Parameters<
+      typeof subgraph.removeInput
+    >[0]
 
     // Should throw appropriate error for non-existent input
     expect(() => {
@@ -97,41 +99,43 @@ describe.skip('SubgraphEdgeCases - Invalid States', () => {
       name: 'fake',
       type: 'number',
       disconnect: () => {}
-    } as any
+    } as Partial<Parameters<typeof subgraph.removeOutput>[0]> as Parameters<
+      typeof subgraph.removeOutput
+    >[0]
 
     expect(() => {
       subgraph.removeOutput(fakeOutput)
     }).toThrow(/Output not found/) // Expected error
   })
 
-  it('should handle null/undefined input names', () => {
+  it('should throw error for null/undefined input names', () => {
     const subgraph = createTestSubgraph()
 
-    // ISSUE: Current implementation allows null/undefined names which may cause runtime errors
-    // TODO: Consider adding validation to prevent null/undefined names
-    // This test documents the current permissive behavior
-    expect(() => {
-      subgraph.addInput(null as any, 'number')
-    }).not.toThrow() // Current behavior: allows null
+    const nullString: string = null!
+    const undefinedString: string = undefined!
 
     expect(() => {
-      subgraph.addInput(undefined as any, 'number')
-    }).not.toThrow() // Current behavior: allows undefined
+      subgraph.addInput(nullString, 'number')
+    }).toThrow()
+
+    expect(() => {
+      subgraph.addInput(undefinedString, 'number')
+    }).toThrow()
   })
 
   it('should handle null/undefined output names', () => {
     const subgraph = createTestSubgraph()
 
-    // ISSUE: Current implementation allows null/undefined names which may cause runtime errors
-    // TODO: Consider adding validation to prevent null/undefined names
-    // This test documents the current permissive behavior
-    expect(() => {
-      subgraph.addOutput(null as any, 'number')
-    }).not.toThrow() // Current behavior: allows null
+    const nullString: string = null!
+    const undefinedString: string = undefined!
 
     expect(() => {
-      subgraph.addOutput(undefined as any, 'number')
-    }).not.toThrow() // Current behavior: allows undefined
+      subgraph.addOutput(nullString, 'number')
+    }).toThrow()
+
+    expect(() => {
+      subgraph.addOutput(undefinedString, 'number')
+    }).toThrow()
   })
 
   it('should handle empty string names', () => {
@@ -151,14 +155,16 @@ describe.skip('SubgraphEdgeCases - Invalid States', () => {
   it('should handle undefined types gracefully', () => {
     const subgraph = createTestSubgraph()
 
-    // Undefined type should not crash but may have default behavior
+    const undefinedString: string = undefined!
+
+    // Undefined type should throw error
     expect(() => {
-      subgraph.addInput('test', undefined as any)
-    }).not.toThrow()
+      subgraph.addInput('test', undefinedString)
+    }).toThrow()
 
     expect(() => {
-      subgraph.addOutput('test', undefined as any)
-    }).not.toThrow()
+      subgraph.addOutput('test', undefinedString)
+    }).toThrow()
   })
 
   it('should handle duplicate slot names', () => {
diff --git a/src/lib/litegraph/src/subgraph/SubgraphMemory.test.ts b/src/lib/litegraph/src/subgraph/SubgraphMemory.test.ts
index 7b936392a..92699283e 100644
--- a/src/lib/litegraph/src/subgraph/SubgraphMemory.test.ts
+++ b/src/lib/litegraph/src/subgraph/SubgraphMemory.test.ts
@@ -10,6 +10,12 @@ import {
   createTestSubgraphNode
 } from './__fixtures__/subgraphHelpers'
 
+type InputWithWidget = {
+  _widget?: IWidget | { type: string; value: unknown; name: string }
+  _connection?: { id: number; type: string }
+  _listenerController?: AbortController
+}
+
 describe.skip('SubgraphNode Memory Management', () => {
   describe.skip('Event Listener Cleanup', () => {
     it('should register event listeners on construction', () => {
@@ -308,14 +314,14 @@ describe.skip('SubgraphMemory - Widget Reference Management', () => {
 
       // Set widget reference
       if (input && '_widget' in input) {
-        ;(input as any)._widget = mockWidget
-        expect((input as any)._widget).toBe(mockWidget)
+        ;(input as InputWithWidget)._widget = mockWidget
+        expect((input as InputWithWidget)._widget).toBe(mockWidget)
       }
 
       // Clear widget reference
       if (input && '_widget' in input) {
-        ;(input as any)._widget = undefined
-        expect((input as any)._widget).toBeUndefined()
+        ;(input as InputWithWidget)._widget = undefined
+        expect((input as InputWithWidget)._widget).toBeUndefined()
       }
     }
   )
@@ -360,30 +366,34 @@ describe.skip('SubgraphMemory - Widget Reference Management', () => {
 
       // Set up references that should be cleaned up
       const mockReferences = {
-        widget: { type: 'number', value: 42 },
+        widget: { type: 'number', value: 42, name: 'mock_widget' },
         connection: { id: 1, type: 'number' },
         listener: vi.fn()
       }
 
       // Set references
       if (input) {
-        ;(input as any)._widget = mockReferences.widget
-        ;(input as any)._connection = mockReferences.connection
+        ;(input as InputWithWidget)._widget = mockReferences.widget
+        ;(input as InputWithWidget)._connection = mockReferences.connection
       }
       if (output) {
-        ;(input as any)._connection = mockReferences.connection
+        ;(input as InputWithWidget)._connection = mockReferences.connection
       }
 
       // Verify references are set
-      expect((input as any)?._widget).toBe(mockReferences.widget)
-      expect((input as any)?._connection).toBe(mockReferences.connection)
+      expect((input as InputWithWidget)?._widget).toBe(mockReferences.widget)
+      expect((input as InputWithWidget)?._connection).toBe(
+        mockReferences.connection
+      )
 
       // Simulate proper cleanup (what onRemoved should do)
       subgraphNode.onRemoved()
 
       // Input-specific listeners should be cleaned up (this works)
       if (input && '_listenerController' in input) {
-        expect((input as any)._listenerController?.signal.aborted).toBe(true)
+        expect(
+          (input as InputWithWidget)._listenerController?.signal.aborted
+        ).toBe(true)
       }
     }
   )
diff --git a/src/lib/litegraph/src/subgraph/SubgraphNode.test.ts b/src/lib/litegraph/src/subgraph/SubgraphNode.test.ts
index 96e2e5dd3..10493cfd4 100644
--- a/src/lib/litegraph/src/subgraph/SubgraphNode.test.ts
+++ b/src/lib/litegraph/src/subgraph/SubgraphNode.test.ts
@@ -9,6 +9,7 @@ import { describe, expect, it, vi } from 'vitest'
 
 import type { SubgraphNode } from '@/lib/litegraph/src/litegraph'
 import { LGraph, Subgraph } from '@/lib/litegraph/src/litegraph'
+import type { SubgraphInput } from '@/lib/litegraph/src/subgraph/SubgraphInput'
 
 import { subgraphTest } from './__fixtures__/subgraphFixtures'
 import {
@@ -531,7 +532,7 @@ describe.skip('SubgraphNode Cleanup', () => {
 
     // Now trigger an event - only node1 should respond
     subgraph.events.dispatch('input-added', {
-      input: { name: 'test', type: 'number', id: 'test-id' } as any
+      input: { name: 'test', type: 'number', id: 'test-id' } as SubgraphInput
     })
 
     // Only node1 should have added an input
@@ -558,7 +559,7 @@ describe.skip('SubgraphNode Cleanup', () => {
 
     // Trigger an event - no nodes should respond
     subgraph.events.dispatch('input-added', {
-      input: { name: 'test', type: 'number', id: 'test-id' } as any
+      input: { name: 'test', type: 'number', id: 'test-id' } as SubgraphInput
     })
 
     // Without cleanup: all 3 removed nodes would have added an input
diff --git a/src/lib/litegraph/src/subgraph/SubgraphNode.titleButton.test.ts b/src/lib/litegraph/src/subgraph/SubgraphNode.titleButton.test.ts
index c76e9d5ee..feb6b1d50 100644
--- a/src/lib/litegraph/src/subgraph/SubgraphNode.titleButton.test.ts
+++ b/src/lib/litegraph/src/subgraph/SubgraphNode.titleButton.test.ts
@@ -3,12 +3,18 @@ import { describe, expect, it, vi } from 'vitest'
 
 import { LGraphButton } from '@/lib/litegraph/src/litegraph'
 import type { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
+import type { CanvasPointerEvent } from '@/lib/litegraph/src/types/events'
 
 import {
   createTestSubgraph,
   createTestSubgraphNode
 } from './__fixtures__/subgraphHelpers'
 
+interface MockPointerEvent {
+  canvasX: number
+  canvasY: number
+}
+
 describe.skip('SubgraphNode Title Button', () => {
   describe.skip('Constructor', () => {
     it('should automatically add enter_subgraph button', () => {
@@ -58,7 +64,7 @@ describe.skip('SubgraphNode Title Button', () => {
       const canvas = {
         openSubgraph: vi.fn(),
         dispatch: vi.fn()
-      } as unknown as LGraphCanvas
+      } as Partial<LGraphCanvas> as LGraphCanvas
 
       subgraphNode.onTitleButtonClick(enterButton, canvas)
 
@@ -78,7 +84,7 @@ describe.skip('SubgraphNode Title Button', () => {
       const canvas = {
         openSubgraph: vi.fn(),
         dispatch: vi.fn()
-      } as unknown as LGraphCanvas
+      } as Partial<LGraphCanvas> as LGraphCanvas
 
       subgraphNode.onTitleButtonClick(customButton, canvas)
 
@@ -119,16 +125,16 @@ describe.skip('SubgraphNode Title Button', () => {
       const canvas = {
         ctx: {
           measureText: vi.fn().mockReturnValue({ width: 25 })
-        } as unknown as CanvasRenderingContext2D,
+        } as Partial<CanvasRenderingContext2D> as CanvasRenderingContext2D,
         openSubgraph: vi.fn(),
         dispatch: vi.fn()
-      } as unknown as LGraphCanvas
+      } as Partial<LGraphCanvas> as LGraphCanvas
 
       // Simulate click on the enter button
-      const event = {
+      const event: MockPointerEvent = {
         canvasX: 275, // Near right edge where button should be
         canvasY: 80 // In title area
-      } as any
+      }
 
       // Calculate node-relative position
       const clickPosRelativeToNode: [number, number] = [
@@ -138,7 +144,7 @@ describe.skip('SubgraphNode Title Button', () => {
 
       // @ts-expect-error onMouseDown possibly undefined
       const handled = subgraphNode.onMouseDown(
-        event,
+        event as Partial<CanvasPointerEvent> as CanvasPointerEvent,
         clickPosRelativeToNode,
         canvas
       )
@@ -156,16 +162,16 @@ describe.skip('SubgraphNode Title Button', () => {
       const canvas = {
         ctx: {
           measureText: vi.fn().mockReturnValue({ width: 25 })
-        } as unknown as CanvasRenderingContext2D,
+        } as Partial<CanvasRenderingContext2D> as CanvasRenderingContext2D,
         openSubgraph: vi.fn(),
         dispatch: vi.fn()
-      } as unknown as LGraphCanvas
+      } as Partial<LGraphCanvas> as LGraphCanvas
 
       // Click in the body of the node, not on button
-      const event = {
+      const event: MockPointerEvent = {
         canvasX: 200, // Middle of node
         canvasY: 150 // Body area
-      } as any
+      }
 
       // Calculate node-relative position
       const clickPosRelativeToNode: [number, number] = [
@@ -173,9 +179,8 @@ describe.skip('SubgraphNode Title Button', () => {
         150 - subgraphNode.pos[1] // 150 - 100 = 50
       ]
 
-      // @ts-expect-error onMouseDown possibly undefined
-      const handled = subgraphNode.onMouseDown(
-        event,
+      const handled = subgraphNode.onMouseDown!(
+        event as Partial<CanvasPointerEvent> as CanvasPointerEvent,
         clickPosRelativeToNode,
         canvas
       )
@@ -204,25 +209,24 @@ describe.skip('SubgraphNode Title Button', () => {
       const canvas = {
         ctx: {
           measureText: vi.fn().mockReturnValue({ width: 25 })
-        } as unknown as CanvasRenderingContext2D,
+        } as Partial<CanvasRenderingContext2D> as CanvasRenderingContext2D,
         openSubgraph: vi.fn(),
         dispatch: vi.fn()
-      } as unknown as LGraphCanvas
+      } as Partial<LGraphCanvas> as LGraphCanvas
 
       // Try to click on where the button would be
-      const event = {
+      const event: MockPointerEvent = {
         canvasX: 275,
         canvasY: 80
-      } as any
+      }
 
       const clickPosRelativeToNode: [number, number] = [
         275 - subgraphNode.pos[0], // 175
         80 - subgraphNode.pos[1] // -20
       ]
 
-      // @ts-expect-error onMouseDown possibly undefined
-      const handled = subgraphNode.onMouseDown(
-        event,
+      const handled = subgraphNode.onMouseDown!(
+        event as Partial<CanvasPointerEvent> as CanvasPointerEvent,
         clickPosRelativeToNode,
         canvas
       )
diff --git a/src/lib/litegraph/src/subgraph/SubgraphSlotVisualFeedback.test.ts b/src/lib/litegraph/src/subgraph/SubgraphSlotVisualFeedback.test.ts
index baf842812..9a85ddb18 100644
--- a/src/lib/litegraph/src/subgraph/SubgraphSlotVisualFeedback.test.ts
+++ b/src/lib/litegraph/src/subgraph/SubgraphSlotVisualFeedback.test.ts
@@ -1,13 +1,21 @@
 // TODO: Fix these tests after migration
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
+import type { DefaultConnectionColors } from '@/lib/litegraph/src/interfaces'
 import { LGraphNode } from '@/lib/litegraph/src/litegraph'
 
 import { createTestSubgraph } from './__fixtures__/subgraphHelpers'
 
+interface MockColorContext {
+  defaultInputColor: string
+  defaultOutputColor: string
+  getConnectedColor: ReturnType<typeof vi.fn>
+  getDisconnectedColor: ReturnType<typeof vi.fn>
+}
+
 describe.skip('SubgraphSlot visual feedback', () => {
   let mockCtx: CanvasRenderingContext2D
-  let mockColorContext: any
+  let mockColorContext: MockColorContext
   let globalAlphaValues: number[]
 
   beforeEach(() => {
@@ -34,7 +42,8 @@ describe.skip('SubgraphSlot visual feedback', () => {
       rect: vi.fn(),
       fillText: vi.fn()
     }
-    mockCtx = mockContext as unknown as CanvasRenderingContext2D
+    mockCtx =
+      mockContext as Partial<CanvasRenderingContext2D> as CanvasRenderingContext2D
 
     // Create a mock color context
     mockColorContext = {
@@ -42,7 +51,7 @@ describe.skip('SubgraphSlot visual feedback', () => {
       defaultOutputColor: '#00FF00',
       getConnectedColor: vi.fn().mockReturnValue('#0000FF'),
       getDisconnectedColor: vi.fn().mockReturnValue('#AAAAAA')
-    }
+    } as Partial<MockColorContext> as MockColorContext
   })
 
   it('should render SubgraphInput slots with full opacity when dragging from compatible slot', () => {
@@ -60,7 +69,8 @@ describe.skip('SubgraphSlot visual feedback', () => {
     // Draw the slot with a compatible fromSlot
     subgraphInput.draw({
       ctx: mockCtx,
-      colorContext: mockColorContext,
+      colorContext:
+        mockColorContext as Partial<DefaultConnectionColors> as DefaultConnectionColors,
       fromSlot: nodeInput,
       editorAlpha: 1
     })
@@ -80,7 +90,8 @@ describe.skip('SubgraphSlot visual feedback', () => {
     // Draw subgraphInput2 while dragging from subgraphInput1 (incompatible - both are outputs inside subgraph)
     subgraphInput2.draw({
       ctx: mockCtx,
-      colorContext: mockColorContext,
+      colorContext:
+        mockColorContext as Partial<DefaultConnectionColors> as DefaultConnectionColors,
       fromSlot: subgraphInput1,
       editorAlpha: 1
     })
@@ -105,7 +116,8 @@ describe.skip('SubgraphSlot visual feedback', () => {
     // Draw the slot with a compatible fromSlot
     subgraphOutput.draw({
       ctx: mockCtx,
-      colorContext: mockColorContext,
+      colorContext:
+        mockColorContext as Partial<DefaultConnectionColors> as DefaultConnectionColors,
       fromSlot: nodeOutput,
       editorAlpha: 1
     })
@@ -125,7 +137,8 @@ describe.skip('SubgraphSlot visual feedback', () => {
     // Draw subgraphOutput2 while dragging from subgraphOutput1 (incompatible - both are inputs inside subgraph)
     subgraphOutput2.draw({
       ctx: mockCtx,
-      colorContext: mockColorContext,
+      colorContext:
+        mockColorContext as Partial<DefaultConnectionColors> as DefaultConnectionColors,
       fromSlot: subgraphOutput1,
       editorAlpha: 1
     })
@@ -170,7 +183,8 @@ describe.skip('SubgraphSlot visual feedback', () => {
     // Draw the SubgraphOutput slot while dragging from a node output with incompatible type
     subgraphOutput.draw({
       ctx: mockCtx,
-      colorContext: mockColorContext,
+      colorContext:
+        mockColorContext as Partial<DefaultConnectionColors> as DefaultConnectionColors,
       fromSlot: nodeStringOutput,
       editorAlpha: 1
     })
diff --git a/src/lib/litegraph/src/subgraph/SubgraphWidgetPromotion.test.ts b/src/lib/litegraph/src/subgraph/SubgraphWidgetPromotion.test.ts
index d47ca186d..1d609fe01 100644
--- a/src/lib/litegraph/src/subgraph/SubgraphWidgetPromotion.test.ts
+++ b/src/lib/litegraph/src/subgraph/SubgraphWidgetPromotion.test.ts
@@ -18,7 +18,7 @@ import {
 function createNodeWithWidget(
   title: string,
   widgetType: TWidgetType = 'number',
-  widgetValue: any = 42,
+  widgetValue: unknown = 42,
   slotType: ISlotType = 'number',
   tooltip?: string
 ) {
diff --git a/src/lib/litegraph/src/utils/textUtils.test.ts b/src/lib/litegraph/src/utils/textUtils.test.ts
index 8ca101f61..4d2bbbca0 100644
--- a/src/lib/litegraph/src/utils/textUtils.test.ts
+++ b/src/lib/litegraph/src/utils/textUtils.test.ts
@@ -1,3 +1,4 @@
+import type { Mock } from 'vitest'
 import { describe, expect, it, vi } from 'vitest'
 
 import { truncateText } from '@/lib/litegraph/src/litegraph'
@@ -5,8 +6,13 @@ import { truncateText } from '@/lib/litegraph/src/litegraph'
 describe('truncateText', () => {
   const createMockContext = (charWidth: number = 10) => {
     return {
-      measureText: vi.fn((text: string) => ({ width: text.length * charWidth }))
-    } as unknown as CanvasRenderingContext2D
+      measureText: vi.fn(
+        (text: string) =>
+          ({
+            width: text.length * charWidth
+          }) as TextMetrics
+      )
+    } as Partial<CanvasRenderingContext2D> as CanvasRenderingContext2D
   }
 
   it('should return original text if it fits within maxWidth', () => {
@@ -57,7 +63,7 @@ describe('truncateText', () => {
     // Verify binary search efficiency - should not measure every possible substring
     // Binary search for 100 chars should take around log2(100) ≈ 7 iterations
     // Plus a few extra calls for measuring the full text and ellipsis
-    const callCount = (ctx.measureText as any).mock.calls.length
+    const callCount = (ctx.measureText as Mock).mock.calls.length
     expect(callCount).toBeLessThan(20)
     expect(callCount).toBeGreaterThan(5)
   })
diff --git a/src/lib/litegraph/src/widgets/ComboWidget.test.ts b/src/lib/litegraph/src/widgets/ComboWidget.test.ts
index f080dbab7..e58a61cc8 100644
--- a/src/lib/litegraph/src/widgets/ComboWidget.test.ts
+++ b/src/lib/litegraph/src/widgets/ComboWidget.test.ts
@@ -389,8 +389,9 @@ describe('ComboWidget', () => {
       node.size = [200, 30]
 
       const mockContextMenu = vi.fn()
-      LiteGraph.ContextMenu =
-        mockContextMenu as unknown as typeof LiteGraph.ContextMenu
+      LiteGraph.ContextMenu = mockContextMenu as Partial<
+        typeof LiteGraph.ContextMenu
+      > as typeof LiteGraph.ContextMenu
 
       widget.onClick({ e: mockEvent, node, canvas: mockCanvas })
 
@@ -426,8 +427,9 @@ describe('ComboWidget', () => {
       node.size = [200, 30]
 
       const mockContextMenu = vi.fn()
-      LiteGraph.ContextMenu =
-        mockContextMenu as unknown as typeof LiteGraph.ContextMenu
+      LiteGraph.ContextMenu = mockContextMenu as Partial<
+        typeof LiteGraph.ContextMenu
+      > as typeof LiteGraph.ContextMenu
 
       widget.onClick({ e: mockEvent, node, canvas: mockCanvas })
 
@@ -463,8 +465,9 @@ describe('ComboWidget', () => {
         .mockImplementation(function (_values, options) {
           capturedCallback = options.callback
         })
-      LiteGraph.ContextMenu =
-        mockContextMenu as unknown as typeof LiteGraph.ContextMenu
+      LiteGraph.ContextMenu = mockContextMenu as Partial<
+        typeof LiteGraph.ContextMenu
+      > as typeof LiteGraph.ContextMenu
 
       const setValueSpy = vi.spyOn(widget, 'setValue')
       widget.onClick({ e: mockEvent, node, canvas: mockCanvas })
@@ -506,8 +509,9 @@ describe('ComboWidget', () => {
         .mockImplementation(function (_values, options) {
           capturedCallback = options.callback
         })
-      LiteGraph.ContextMenu =
-        mockContextMenu as unknown as typeof LiteGraph.ContextMenu
+      LiteGraph.ContextMenu = mockContextMenu as Partial<
+        typeof LiteGraph.ContextMenu
+      > as typeof LiteGraph.ContextMenu
 
       const setValueSpy = vi.spyOn(widget, 'setValue')
       widget.onClick({ e: mockEvent, node, canvas: mockCanvas })
@@ -538,8 +542,9 @@ describe('ComboWidget', () => {
       node.size = [200, 30]
 
       const mockContextMenu = vi.fn()
-      LiteGraph.ContextMenu =
-        mockContextMenu as unknown as typeof LiteGraph.ContextMenu
+      LiteGraph.ContextMenu = mockContextMenu as Partial<
+        typeof LiteGraph.ContextMenu
+      > as typeof LiteGraph.ContextMenu
 
       widget.onClick({ e: mockEvent, node, canvas: mockCanvas })
 
@@ -572,8 +577,9 @@ describe('ComboWidget', () => {
       node.size = [200, 30]
 
       const mockContextMenu = vi.fn()
-      LiteGraph.ContextMenu =
-        mockContextMenu as unknown as typeof LiteGraph.ContextMenu
+      LiteGraph.ContextMenu = mockContextMenu as Partial<
+        typeof LiteGraph.ContextMenu
+      > as typeof LiteGraph.ContextMenu
 
       widget.onClick({ e: mockEvent, node, canvas: mockCanvas })
 
@@ -768,8 +774,9 @@ describe('ComboWidget', () => {
           .mockImplementation(function () {
             this.addItem = mockAddItem
           })
-        LiteGraph.ContextMenu =
-          mockContextMenu as unknown as typeof LiteGraph.ContextMenu
+        LiteGraph.ContextMenu = mockContextMenu as Partial<
+          typeof LiteGraph.ContextMenu
+        > as typeof LiteGraph.ContextMenu
         widget.onClick({ e: mockEvent, node, canvas: mockCanvas })
 
         // Should show formatted labels in dropdown
@@ -831,8 +838,9 @@ describe('ComboWidget', () => {
             capturedCallback = options.callback
             this.addItem = mockAddItem
           })
-        LiteGraph.ContextMenu =
-          mockContextMenu as unknown as typeof LiteGraph.ContextMenu
+        LiteGraph.ContextMenu = mockContextMenu as Partial<
+          typeof LiteGraph.ContextMenu
+        > as typeof LiteGraph.ContextMenu
 
         const setValueSpy = vi.spyOn(widget, 'setValue')
         widget.onClick({ e: mockEvent, node, canvas: mockCanvas })
@@ -885,8 +893,9 @@ describe('ComboWidget', () => {
             capturedCallback = options.callback
             this.addItem = mockAddItem
           })
-        LiteGraph.ContextMenu =
-          mockContextMenu as unknown as typeof LiteGraph.ContextMenu
+        LiteGraph.ContextMenu = mockContextMenu as Partial<
+          typeof LiteGraph.ContextMenu
+        > as typeof LiteGraph.ContextMenu
 
         widget.onClick({ e: mockEvent, node, canvas: mockCanvas })
 
@@ -964,8 +973,9 @@ describe('ComboWidget', () => {
           .mockImplementation(function () {
             this.addItem = mockAddItem
           })
-        LiteGraph.ContextMenu =
-          mockContextMenu as unknown as typeof LiteGraph.ContextMenu
+        LiteGraph.ContextMenu = mockContextMenu as Partial<
+          typeof LiteGraph.ContextMenu
+        > as typeof LiteGraph.ContextMenu
 
         widget.onClick({ e: mockEvent, node, canvas: mockCanvas })
 
@@ -1012,8 +1022,9 @@ describe('ComboWidget', () => {
         node.size = [200, 30]
 
         const mockContextMenu = vi.fn<typeof LiteGraph.ContextMenu>()
-        LiteGraph.ContextMenu =
-          mockContextMenu as unknown as typeof LiteGraph.ContextMenu
+        LiteGraph.ContextMenu = mockContextMenu as Partial<
+          typeof LiteGraph.ContextMenu
+        > as typeof LiteGraph.ContextMenu
 
         widget.onClick({ e: mockEvent, node, canvas: mockCanvas })
 
@@ -1051,7 +1062,8 @@ describe('ComboWidget', () => {
         createMockWidgetConfig({
           name: 'mode',
           value: 'test',
-          options: { values: null as any }
+          // @ts-expect-error - Testing with intentionally invalid null value
+          options: { values: null }
         }),
         node
       )
diff --git a/src/locales/ar/main.json b/src/locales/ar/main.json
index 122883cd9..615787903 100644
--- a/src/locales/ar/main.json
+++ b/src/locales/ar/main.json
@@ -24,6 +24,7 @@
     "assets": "الأصول",
     "baseModels": "النماذج الأساسية",
     "browseAssets": "تصفح الأصول",
+    "byType": "حسب النوع",
     "checkpoints": "نقاط التحقق",
     "civitaiLinkExample": "{example} {link}",
     "civitaiLinkExampleStrong": "مثال:",
@@ -45,6 +46,10 @@
       "failed": "فشل التنزيل",
       "inProgress": "جاري تنزيل {assetName}..."
     },
+    "emptyImported": {
+      "canImport": "لا توجد نماذج مستوردة بعد. انقر على \"استيراد نموذج\" لإضافة نموذجك الخاص.",
+      "restricted": "النماذج الشخصية متاحة فقط لمستوى Creator وما فوق."
+    },
     "errorFileTooLarge": "الملف يتجاوز الحد الأقصى المسموح به للحجم",
     "errorFormatNotAllowed": "يسمح فقط بصيغة SafeTensor",
     "errorModelTypeNotSupported": "نوع النموذج هذا غير مدعوم",
@@ -61,6 +66,7 @@
     "finish": "إنهاء",
     "genericLinkPlaceholder": "الصق الرابط هنا",
     "importAnother": "استيراد آخر",
+    "imported": "مستوردة",
     "jobId": "معرّف المهمة",
     "loadingModels": "جارٍ تحميل {type}...",
     "maxFileSize": "الحد الأقصى لحجم الملف: {size}",
@@ -70,6 +76,30 @@
       "threeDModelPlaceholder": "نموذج ثلاثي الأبعاد"
     },
     "modelAssociatedWithLink": "النموذج المرتبط بالرابط الذي قدمته:",
+    "modelInfo": {
+      "addBaseModel": "أضف نموذجًا أساسيًا...",
+      "addTag": "أضف وسمًا...",
+      "additionalTags": "وسوم إضافية",
+      "baseModelUnknown": "النموذج الأساسي غير معروف",
+      "basicInfo": "معلومات أساسية",
+      "compatibleBaseModels": "نماذج أساسية متوافقة",
+      "description": "الوصف",
+      "descriptionNotSet": "لم يتم تعيين وصف",
+      "descriptionPlaceholder": "أضف وصفًا لهذا النموذج...",
+      "displayName": "اسم العرض",
+      "editDisplayName": "تعديل اسم العرض",
+      "fileName": "اسم الملف",
+      "modelDescription": "وصف النموذج",
+      "modelTagging": "تصنيف النموذج",
+      "modelType": "نوع النموذج",
+      "noAdditionalTags": "لا توجد وسوم إضافية",
+      "selectModelPrompt": "اختر نموذجًا لعرض معلوماته",
+      "selectModelType": "اختر نوع النموذج...",
+      "source": "المصدر",
+      "title": "معلومات النموذج",
+      "triggerPhrases": "عبارات التفعيل",
+      "viewOnSource": "عرض على {source}"
+    },
     "modelName": "اسم النموذج",
     "modelNamePlaceholder": "أدخل اسمًا لهذا النموذج",
     "modelTypeSelectorLabel": "ما نوع هذا النموذج؟",
@@ -684,6 +714,7 @@
     "clearAll": "مسح الكل",
     "clearFilters": "مسح الفلاتر",
     "close": "إغلاق",
+    "closeDialog": "إغلاق الحوار",
     "color": "اللون",
     "comfy": "Comfy",
     "comfyOrgLogoAlt": "شعار ComfyOrg",
@@ -700,6 +731,7 @@
     "control_before_generate": "التحكم قبل التوليد",
     "copied": "تم النسخ",
     "copy": "نسخ",
+    "copyAll": "نسخ الكل",
     "copyJobId": "نسخ معرف المهمة",
     "copyToClipboard": "نسخ إلى الحافظة",
     "copyURL": "نسخ الرابط",
@@ -762,6 +794,8 @@
     "goToNode": "الانتقال إلى العقدة",
     "graphNavigation": "التنقل في الرسم البياني",
     "halfSpeed": "0.5x",
+    "hideLeftPanel": "إخفاء اللوحة اليسرى",
+    "hideRightPanel": "إخفاء اللوحة اليمنى",
     "icon": "أيقونة",
     "imageFailedToLoad": "فشل تحميل الصورة",
     "imagePreview": "معاينة الصورة - استخدم مفاتيح الأسهم للتنقل بين الصور",
@@ -803,6 +837,7 @@
     "name": "الاسم",
     "newFolder": "مجلد جديد",
     "next": "التالي",
+    "nightly": "NIGHTLY",
     "no": "لا",
     "noAudioRecorded": "لم يتم تسجيل أي صوت",
     "noItems": "لا توجد عناصر",
@@ -817,6 +852,7 @@
     "nodeSlotsError": "خطأ في فتحات العقدة",
     "nodeWidgetsError": "خطأ في عناصر واجهة العقدة",
     "nodes": "العُقَد",
+    "nodesCount": "{count} عقدة | {count} عقدة | {count} عقدة",
     "nodesRunning": "العُقَد قيد التشغيل",
     "none": "لا شيء",
     "nothingToCopy": "لا يوجد ما يمكن نسخه",
@@ -891,7 +927,9 @@
     "selectedFile": "الملف المحدد",
     "setAsBackground": "تعيين كخلفية",
     "settings": "الإعدادات",
+    "showLeftPanel": "إظهار اللوحة اليسرى",
     "showReport": "عرض التقرير",
+    "showRightPanel": "إظهار اللوحة اليمنى",
     "singleSelectDropdown": "قائمة منسدلة اختيار واحد",
     "sort": "فرز",
     "source": "المصدر",
@@ -914,6 +952,7 @@
     "updating": "جارٍ التحديث",
     "upload": "رفع",
     "usageHint": "تلميح الاستخدام",
+    "use": "استخدم",
     "user": "المستخدم",
     "versionMismatchWarning": "تحذير توافق الإصدارات",
     "versionMismatchWarningMessage": "{warning}: {detail} زر https://docs.comfy.org/installation/update_comfyui#common-update-issues للحصول على تعليمات التحديث.",
@@ -921,11 +960,10 @@
     "videoPreview": "معاينة الفيديو - استخدم مفاتيح الأسهم للتنقل بين الفيديوهات",
     "viewImageOfTotal": "عرض الصورة {index} من {total}",
     "viewVideoOfTotal": "عرض الفيديو {index} من {total}",
-    "vitePreloadErrorMessage": "تم إصدار نسخة جديدة من التطبيق. هل ترغب في إعادة التحميل؟\nإذا لم تفعل، قد لا تعمل بعض أجزاء التطبيق كما هو متوقع.\nيمكنك رفض وحفظ تقدمك قبل إعادة التحميل.",
-    "vitePreloadErrorTitle": "إصدار جديد متاح",
     "volume": "مستوى الصوت",
     "warning": "تحذير",
-    "workflow": "سير العمل"
+    "workflow": "سير العمل",
+    "you": "أنت"
   },
   "graphCanvasMenu": {
     "fitView": "ملائمة العرض",
@@ -1617,17 +1655,25 @@
       "title": "سير العمل هذا يحتوي على عقد مفقودة"
     }
   },
+  "nightly": {
+    "badge": {
+      "label": "إصدار معاينة",
+      "tooltip": "أنت تستخدم إصدارًا ليليًا من ComfyUI. يرجى استخدام زر الملاحظات لمشاركة آرائك حول هذه الميزات."
+    }
+  },
   "nodeCategories": {
     "": "",
     "3d": "ثلاثي الأبعاد",
     "3d_models": "نماذج ثلاثية الأبعاد",
     "BFL": "BFL",
+    "Bria": "Bria",
     "ByteDance": "بايت دانس",
     "Gemini": "جيميني",
     "Ideogram": "إيديوغرام",
     "Kling": "Kling",
     "LTXV": "LTXV",
     "Luma": "Luma",
+    "Magnific": "Magnific",
     "Meshy": "Meshy",
     "MiniMax": "MiniMax",
     "Moonvalley Marey": "مون فالي ماري",
@@ -1638,11 +1684,13 @@
     "Runway": "رن واي",
     "Sora": "سورا",
     "Stability AI": "Stability AI",
+    "Tencent": "Tencent",
     "Topaz": "Topaz",
     "Tripo": "تريبو",
     "Veo": "Veo",
     "Vidu": "فيدو",
     "Wan": "وان",
+    "WaveSpeed": "WaveSpeed",
     "_for_testing": "_للاختبار",
     "advanced": "متقدم",
     "animation": "الرسوم المتحركة",
@@ -1852,6 +1900,7 @@
     },
     "groupSettings": "إعدادات المجموعة",
     "groups": "المجموعات",
+    "hideAdvancedInputsButton": "إخفاء المدخلات المتقدمة",
     "hideInput": "إخفاء المدخل",
     "info": "معلومات",
     "inputs": "المدخلات",
@@ -2084,6 +2133,7 @@
     "NodeLibrary": "مكتبة العقد",
     "Nodes 2_0": "Nodes 2.0",
     "Notification Preferences": "تفضيلات الإشعارات",
+    "Other": "أخرى",
     "PLY": "PLY",
     "PlanCredits": "الخطة والاعتمادات",
     "Pointer": "المؤشر",
@@ -2103,7 +2153,8 @@
     "Vue Nodes": "عقد Vue",
     "VueNodes": "عقد Vue",
     "Window": "النافذة",
-    "Workflow": "سير العمل"
+    "Workflow": "سير العمل",
+    "Workspace": "مساحة العمل"
   },
   "shape": {
     "CARD": "بطاقة",
@@ -2129,12 +2180,14 @@
     "viewControls": "عناصر تحكم العرض"
   },
   "sideToolbar": {
+    "activeJobStatus": "المهمة النشطة: {status}",
     "assets": "الأصول",
     "backToAssets": "العودة إلى جميع الأصول",
     "browseTemplates": "تصفح القوالب المثال",
     "downloads": "التنزيلات",
     "generatedAssetsHeader": "الأصول المُولدة",
     "helpCenter": "مركز المساعدة",
+    "importedAssetsHeader": "الأصول المستوردة",
     "labels": {
       "assets": "الأصول",
       "console": "وحدة التحكم",
@@ -2179,6 +2232,7 @@
     "queue": "قائمة الانتظار",
     "queueProgressOverlay": {
       "activeJobs": "{count} مهمة نشطة | {count} مهام نشطة",
+      "activeJobsShort": "{count} نشط | {count} نشط",
       "activeJobsSuffix": "مهام نشطة",
       "cancelJobTooltip": "إلغاء المهمة",
       "clearHistory": "مسح سجل قائمة الانتظار",
@@ -2267,9 +2321,15 @@
     "beta": "نسخة تجريبية",
     "billedMonthly": "يتم الفوترة شهريًا",
     "billedYearly": "{total} يتم الفوترة سنويًا",
+    "billingComingSoon": {
+      "message": "سيتم إطلاق الفوترة الجماعية قريباً. ستتمكن من الاشتراك في خطة لمساحة العمل الخاصة بك مع تسعير لكل مستخدم. ترقبوا التحديثات.",
+      "title": "قريباً"
+    },
+    "cancelSubscription": "إلغاء الاشتراك",
     "changeTo": "تغيير إلى {plan}",
     "comfyCloud": "Comfy Cloud",
     "comfyCloudLogo": "شعار Comfy Cloud",
+    "contactOwnerToSubscribe": "يرجى التواصل مع مالك مساحة العمل للاشتراك",
     "contactUs": "تواصل معنا",
     "creditsRemainingThisMonth": "الرصيد المتبقي لهذا الشهر",
     "creditsRemainingThisYear": "الرصيد المتبقي لهذا العام",
@@ -2282,6 +2342,7 @@
     "haveQuestions": "هل لديك أسئلة أو ترغب في معرفة المزيد عن المؤسسات؟",
     "invoiceHistory": "سجل الفواتير",
     "learnMore": "معرفة المزيد",
+    "managePayment": "إدارة الدفع",
     "managePlan": "إدارة الخطة",
     "manageSubscription": "إدارة الاشتراك",
     "maxDuration": {
@@ -2317,6 +2378,7 @@
     "subscribeToComfyCloud": "الاشتراك في Comfy Cloud",
     "subscribeToRun": "اشتراك",
     "subscribeToRunFull": "الاشتراك للتشغيل",
+    "subscriptionRequiredMessage": "الاشتراك مطلوب للأعضاء لتشغيل سير العمل على السحابة",
     "tierNameYearly": "{name} سنوي",
     "tiers": {
       "creator": {
@@ -2348,6 +2410,7 @@
     "viewMoreDetails": "عرض المزيد من التفاصيل",
     "viewMoreDetailsPlans": "عرض المزيد من التفاصيل حول الخطط والأسعار",
     "viewUsageHistory": "عرض سجل الاستخدام",
+    "workspaceNotSubscribed": "هذه مساحة العمل ليست مشتركة",
     "yearly": "سنوي",
     "yearlyCreditsLabel": "إجمالي الرصيد السنوي",
     "yearlyDiscount": "خصم 20%",
@@ -2449,6 +2512,7 @@
     "failedToLoadModel": "فشل في تحميل النموذج ثلاثي الأبعاد",
     "failedToPurchaseCredits": "فشل في شراء الرصيد: {error}",
     "failedToQueue": "فشل في الإضافة إلى قائمة الانتظار",
+    "failedToSaveDraft": "فشل في حفظ مسودة سير العمل",
     "failedToToggleCamera": "فشل في تبديل الكاميرا",
     "failedToToggleGrid": "فشل في تبديل الشبكة",
     "failedToUpdateBackgroundColor": "فشل في تحديث لون الخلفية",
@@ -2497,7 +2561,8 @@
     "notSet": "غير محدد",
     "provider": "مزود تسجيل الدخول",
     "title": "إعدادات المستخدم",
-    "updatePassword": "تحديث كلمة المرور"
+    "updatePassword": "تحديث كلمة المرور",
+    "workspaceSettings": "إعدادات مساحة العمل"
   },
   "validation": {
     "descriptionRequired": "الوصف مطلوب",
@@ -2588,6 +2653,9 @@
     "saveWorkflow": "حفظ سير العمل"
   },
   "workspace": {
+    "addedToWorkspace": "تمت إضافتك إلى {workspaceName}",
+    "inviteAccepted": "تم قبول الدعوة",
+    "inviteFailed": "فشل في قبول الدعوة",
     "unsavedChanges": {
       "message": "لديك تغييرات غير محفوظة. هل تريد تجاهلها والانتقال إلى مساحة عمل أخرى؟",
       "title": "تغييرات غير محفوظة"
@@ -2602,6 +2670,128 @@
       "workspaceNotFound": "لم يتم العثور على مساحة العمل"
     }
   },
+  "workspacePanel": {
+    "createWorkspaceDialog": {
+      "create": "إنشاء",
+      "message": "تتيح مساحات العمل للأعضاء مشاركة رصيد واحد. ستصبح المالك بعد الإنشاء.",
+      "nameLabel": "اسم مساحة العمل*",
+      "namePlaceholder": "أدخل اسم مساحة العمل",
+      "title": "إنشاء مساحة عمل جديدة"
+    },
+    "dashboard": {
+      "placeholder": "إعدادات مساحة عمل لوحة التحكم"
+    },
+    "deleteDialog": {
+      "message": "سيتم فقدان أي أرصدة غير مستخدمة أو أصول غير محفوظة. لا يمكن التراجع عن هذا الإجراء.",
+      "messageWithName": "حذف \"{name}\"؟ سيتم فقدان أي أرصدة غير مستخدمة أو أصول غير محفوظة. لا يمكن التراجع عن هذا الإجراء.",
+      "title": "حذف هذه المساحة؟"
+    },
+    "editWorkspaceDialog": {
+      "nameLabel": "اسم مساحة العمل",
+      "save": "حفظ",
+      "title": "تعديل تفاصيل مساحة العمل"
+    },
+    "invite": "دعوة",
+    "inviteLimitReached": "لقد وصلت إلى الحد الأقصى وهو ٥٠ عضواً",
+    "inviteMember": "دعوة عضو",
+    "inviteMemberDialog": {
+      "createLink": "إنشاء الرابط",
+      "linkCopied": "تم النسخ",
+      "linkCopyFailed": "فشل في نسخ الرابط",
+      "linkStep": {
+        "copyLink": "نسخ الرابط",
+        "done": "تم",
+        "message": "تأكد من أن حسابه يستخدم هذا البريد الإلكتروني.",
+        "title": "أرسل هذا الرابط إلى الشخص"
+      },
+      "message": "أنشئ رابط دعوة قابل للمشاركة لإرساله إلى شخص ما",
+      "placeholder": "أدخل بريد الشخص الإلكتروني",
+      "title": "دعوة شخص إلى هذه المساحة"
+    },
+    "leaveDialog": {
+      "leave": "مغادرة",
+      "message": "لن تتمكن من الانضمام مرة أخرى إلا إذا تواصلت مع مالك مساحة العمل.",
+      "title": "مغادرة هذه المساحة؟"
+    },
+    "members": {
+      "actions": {
+        "copyLink": "نسخ رابط الدعوة",
+        "removeMember": "إزالة العضو",
+        "revokeInvite": "إلغاء الدعوة"
+      },
+      "columns": {
+        "expiryDate": "تاريخ الانتهاء",
+        "inviteDate": "تاريخ الدعوة",
+        "joinDate": "تاريخ الانضمام"
+      },
+      "createNewWorkspace": "أنشئ واحدة جديدة.",
+      "membersCount": "{count}/٥٠ عضواً",
+      "noInvites": "لا توجد دعوات معلقة",
+      "noMembers": "لا يوجد أعضاء",
+      "pendingInvitesCount": "{count} دعوة معلقة | {count} دعوات معلقة",
+      "personalWorkspaceMessage": "لا يمكنك دعوة أعضاء آخرين إلى مساحة العمل الشخصية حالياً. لإضافة أعضاء إلى مساحة عمل،",
+      "tabs": {
+        "active": "نشط",
+        "pendingCount": "معلق ({count})"
+      }
+    },
+    "menu": {
+      "deleteWorkspace": "حذف مساحة العمل",
+      "deleteWorkspaceDisabledTooltip": "يرجى إلغاء الاشتراك النشط لمساحة العمل أولاً",
+      "editWorkspace": "تعديل تفاصيل مساحة العمل",
+      "leaveWorkspace": "مغادرة مساحة العمل"
+    },
+    "removeMemberDialog": {
+      "error": "فشل في إزالة العضو",
+      "message": "سيتم إزالة هذا العضو من مساحة العمل الخاصة بك. لن يتم استرداد الأرصدة التي استخدمها.",
+      "remove": "إزالة العضو",
+      "success": "تمت إزالة العضو",
+      "title": "إزالة هذا العضو؟"
+    },
+    "revokeInviteDialog": {
+      "message": "لن يتمكن هذا العضو من الانضمام إلى مساحة العمل الخاصة بك بعد الآن. سيتم إبطال رابط الدعوة الخاص به.",
+      "revoke": "إلغاء الدعوة",
+      "title": "إلغاء دعوة هذا الشخص؟"
+    },
+    "tabs": {
+      "dashboard": "لوحة التحكم",
+      "membersCount": "الأعضاء ({count})",
+      "planCredits": "الخطة والأرصدة"
+    },
+    "toast": {
+      "failedToCreateWorkspace": "فشل في إنشاء مساحة العمل",
+      "failedToDeleteWorkspace": "فشل في حذف مساحة العمل",
+      "failedToFetchWorkspaces": "فشل في تحميل مساحات العمل",
+      "failedToLeaveWorkspace": "فشل في مغادرة مساحة العمل",
+      "failedToUpdateWorkspace": "فشل في تحديث مساحة العمل",
+      "workspaceCreated": {
+        "message": "اشترك في خطة، وادعُ زملاءك، وابدأ التعاون.",
+        "subscribe": "اشترك",
+        "title": "تم إنشاء مساحة العمل"
+      },
+      "workspaceDeleted": {
+        "message": "تم حذف مساحة العمل نهائياً.",
+        "title": "تم حذف مساحة العمل"
+      },
+      "workspaceLeft": {
+        "message": "لقد غادرت مساحة العمل.",
+        "title": "تمت مغادرة مساحة العمل"
+      },
+      "workspaceUpdated": {
+        "message": "تم حفظ تفاصيل مساحة العمل.",
+        "title": "تم تحديث مساحة العمل"
+      }
+    }
+  },
+  "workspaceSwitcher": {
+    "createWorkspace": "إنشاء مساحة عمل جديدة",
+    "maxWorkspacesReached": "يمكنك امتلاك ١٠ مساحات عمل فقط. احذف واحدة لإنشاء مساحة جديدة.",
+    "personal": "شخصي",
+    "roleMember": "عضو",
+    "roleOwner": "المالك",
+    "subscribe": "اشترك",
+    "switchWorkspace": "تبديل مساحة العمل"
+  },
   "zoomControls": {
     "hideMinimap": "إخفاء الخريطة المصغرة",
     "label": "عناصر التحكم في التكبير",
diff --git a/src/locales/ar/nodeDefs.json b/src/locales/ar/nodeDefs.json
index a1d6aed86..abf75f591 100644
--- a/src/locales/ar/nodeDefs.json
+++ b/src/locales/ar/nodeDefs.json
@@ -328,6 +328,68 @@
       }
     }
   },
+  "BriaImageEditNode": {
+    "description": "حرر الصور باستخدام أحدث نموذج من Bria",
+    "display_name": "تحرير صورة Bria",
+    "inputs": {
+      "control_after_generate": {
+        "name": "التحكم بعد التوليد"
+      },
+      "guidance_scale": {
+        "name": "مقياس التوجيه",
+        "tooltip": "القيمة الأعلى تجعل الصورة تتبع التوجيه بشكل أدق."
+      },
+      "image": {
+        "name": "الصورة"
+      },
+      "mask": {
+        "name": "القناع",
+        "tooltip": "إذا لم يتم تحديده، سيتم تطبيق التحرير على الصورة بالكامل."
+      },
+      "model": {
+        "name": "النموذج"
+      },
+      "moderation": {
+        "name": "الإشراف",
+        "tooltip": "إعدادات الإشراف"
+      },
+      "moderation_prompt_content_moderation": {
+        "name": "إشراف محتوى التوجيه"
+      },
+      "moderation_visual_input_moderation": {
+        "name": "إشراف الإدخال البصري"
+      },
+      "moderation_visual_output_moderation": {
+        "name": "إشراف الإخراج البصري"
+      },
+      "negative_prompt": {
+        "name": "توجيه سلبي"
+      },
+      "prompt": {
+        "name": "التوجيه",
+        "tooltip": "تعليمات لتحرير الصورة"
+      },
+      "seed": {
+        "name": "البذرة"
+      },
+      "steps": {
+        "name": "الخطوات"
+      },
+      "structured_prompt": {
+        "name": "توجيه منظم",
+        "tooltip": "سلسلة نصية تحتوي على توجيه التحرير المنظم بصيغة JSON. استخدم هذا بدلاً من التوجيه المعتاد للتحكم الدقيق والبرمجي."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      },
+      "1": {
+        "name": "توجيه منظم",
+        "tooltip": null
+      }
+    }
+  },
   "ByteDanceFirstLastFrameNode": {
     "description": "إنشاء فيديو باستخدام المطالبة النصية والإطار الأول والأخير.",
     "display_name": "تحويل الإطار الأول-الأخير من ByteDance إلى فيديو",
@@ -385,43 +447,6 @@
       }
     }
   },
-  "ByteDanceImageEditNode": {
-    "description": "تحرير الصور باستخدام نماذج ByteDance عبر واجهة برمجة التطبيقات بناءً على المطالبة النصية",
-    "display_name": "تحرير الصور من ByteDance",
-    "inputs": {
-      "control_after_generate": {
-        "name": "التحكم بعد التوليد"
-      },
-      "guidance_scale": {
-        "name": "مقياس التوجيه",
-        "tooltip": "القيمة الأعلى تجعل الصورة تتبع النص الموجه بشكل أكبر"
-      },
-      "image": {
-        "name": "الصورة",
-        "tooltip": "الصورة الأساسية للتحرير"
-      },
-      "model": {
-        "name": "النموذج"
-      },
-      "prompt": {
-        "name": "المطالبة النصية",
-        "tooltip": "تعليمات لتحرير الصورة"
-      },
-      "seed": {
-        "name": "البذرة",
-        "tooltip": "البذرة المستخدمة في التوليد"
-      },
-      "watermark": {
-        "name": "علامة مائية",
-        "tooltip": "ما إذا كان سيتم إضافة علامة مائية \"تم إنشاؤها بالذكاء الاصطناعي\" إلى الصورة"
-      }
-    },
-    "outputs": {
-      "0": {
-        "tooltip": null
-      }
-    }
-  },
   "ByteDanceImageNode": {
     "description": "إنشاء الصور باستخدام نماذج ByteDance عبر API استنادًا إلى النص الموجه",
     "display_name": "صورة ByteDance",
@@ -2031,14 +2056,18 @@
       "choice": {
         "name": "اختيار"
       },
-      "option0": {
+      "index": {
+      },
+      "option1": {
       }
     },
-    "outputs": {
-      "0": {
+    "outputs": [
+      null,
+      {
+        "name": "الفهرس",
         "tooltip": null
       }
-    }
+    ]
   },
   "DiffControlNetLoader": {
     "display_name": "تحميل نموذج ControlNet (فرق)",
@@ -6390,6 +6419,60 @@
       }
     }
   },
+  "LoraLoaderBypass": {
+    "description": "تطبيق LoRA في وضع التجاوز. على عكس LoRA العادي، لا يقوم هذا بتعديل أوزان النموذج - بل يحقن حساب LoRA أثناء التمرير الأمامي. مفيد في سيناريوهات التدريب.",
+    "display_name": "تحميل LoRA (تجاوز) (لأغراض التصحيح)",
+    "inputs": {
+      "clip": {
+        "name": "clip",
+        "tooltip": "نموذج CLIP الذي سيتم تطبيق LoRA عليه."
+      },
+      "lora_name": {
+        "name": "اسم LoRA",
+        "tooltip": "اسم LoRA."
+      },
+      "model": {
+        "name": "النموذج",
+        "tooltip": "نموذج الانتشار الذي سيتم تطبيق LoRA عليه."
+      },
+      "strength_clip": {
+        "name": "قوة التعديل على CLIP",
+        "tooltip": "مدى قوة تعديل نموذج CLIP. يمكن أن تكون هذه القيمة سالبة."
+      },
+      "strength_model": {
+        "name": "قوة التعديل على النموذج",
+        "tooltip": "مدى قوة تعديل نموذج الانتشار. يمكن أن تكون هذه القيمة سالبة."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": "نموذج الانتشار المعدل."
+      },
+      "1": {
+        "tooltip": "نموذج CLIP المعدل."
+      }
+    }
+  },
+  "LoraLoaderBypassModelOnly": {
+    "description": "تطبيق LoRA في وضع التجاوز. على عكس LoRA العادي، لا يقوم هذا بتعديل أوزان النموذج - بل يحقن حساب LoRA أثناء التمرير الأمامي. مفيد في سيناريوهات التدريب.",
+    "display_name": "تحميل LoRA (تجاوز، النموذج فقط) (لأغراض التصحيح)",
+    "inputs": {
+      "lora_name": {
+        "name": "اسم LoRA"
+      },
+      "model": {
+        "name": "النموذج"
+      },
+      "strength_model": {
+        "name": "قوة التعديل على النموذج"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": "نموذج الانتشار المعدل."
+      }
+    }
+  },
   "LoraLoaderModelOnly": {
     "description": "يُستخدم LoRA لتعديل نماذج الانتشار و CLIP، وتغيير طريقة إزالة الضجيج من الكامن مثل تطبيق الأنماط. يمكن ربط عدة عقد LoRA معاً.",
     "display_name": "تحميل LoRA (نموذج فقط)",
@@ -6757,6 +6840,126 @@
       }
     }
   },
+  "MagnificImageRelightNode": {
+    "description": "إعادة إضاءة صورة مع تعديلات الإضاءة وخيار نقل الإضاءة من مرجع.",
+    "display_name": "إعادة إضاءة الصورة Magnific",
+    "inputs": {
+      "advanced_settings": {
+        "name": "إعدادات متقدمة",
+        "tooltip": "خيارات ضبط دقيق للتحكم المتقدم في الإضاءة."
+      },
+      "change_background": {
+        "name": "تغيير الخلفية",
+        "tooltip": "يعدل الخلفية بناءً على التوجيه/المرجع."
+      },
+      "image": {
+        "name": "الصورة",
+        "tooltip": "الصورة التي سيتم إعادة إضاءتها."
+      },
+      "interpolate_from_original": {
+        "name": "التقريب من الأصل",
+        "tooltip": "يقيّد حرية التوليد لمطابقة الأصل بشكل أكبر."
+      },
+      "light_transfer_strength": {
+        "name": "شدة نقل الإضاءة",
+        "tooltip": "شدة تطبيق نقل الإضاءة."
+      },
+      "preserve_details": {
+        "name": "الحفاظ على التفاصيل",
+        "tooltip": "يحافظ على النسيج والتفاصيل الدقيقة من الأصل."
+      },
+      "prompt": {
+        "name": "التوجيه",
+        "tooltip": "إرشادات وصفية للإضاءة. يدعم تدوين التأكيد (١-١.٤)."
+      },
+      "reference_image": {
+        "name": "صورة مرجعية",
+        "tooltip": "صورة مرجعية اختيارية لنقل الإضاءة منها."
+      },
+      "style": {
+        "name": "النمط",
+        "tooltip": "تفضيل النتيجة الأسلوبية."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "MagnificImageSkinEnhancerNode": {
+    "description": "تحسين البشرة للصور الشخصية مع أوضاع معالجة متعددة.",
+    "display_name": "محسّن البشرة للصورة Magnific",
+    "inputs": {
+      "image": {
+        "name": "الصورة",
+        "tooltip": "صورة البورتريه التي سيتم تحسينها."
+      },
+      "mode": {
+        "name": "الوضع",
+        "tooltip": "وضع المعالجة: إبداعي للتعزيز الفني، واقعي للحفاظ على المظهر الأصلي، مرن للتحسين المستهدف."
+      },
+      "sharpen": {
+        "name": "حدة التوضيح",
+        "tooltip": "مستوى شدة التوضيح."
+      },
+      "smart_grain": {
+        "name": "الحبيبات الذكية",
+        "tooltip": "مستوى شدة الحبيبات الذكية."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "MagnificImageStyleTransferNode": {
+    "description": "نقل النمط من صورة مرجعية إلى صورتك المدخلة.",
+    "display_name": "نقل نمط الصورة Magnific",
+    "inputs": {
+      "engine": {
+        "name": "engine",
+        "tooltip": "اختيار محرك المعالجة."
+      },
+      "fixed_generation": {
+        "name": "fixed_generation",
+        "tooltip": "عند التعطيل، توقع أن تقدم كل عملية توليد درجة من العشوائية، مما يؤدي إلى نتائج أكثر تنوعًا."
+      },
+      "flavor": {
+        "name": "flavor",
+        "tooltip": "نوع نقل النمط."
+      },
+      "image": {
+        "name": "image",
+        "tooltip": "الصورة التي سيتم تطبيق نقل النمط عليها."
+      },
+      "portrait_mode": {
+        "name": "portrait_mode",
+        "tooltip": "تفعيل وضع البورتريه لتحسينات الوجه."
+      },
+      "prompt": {
+        "name": "prompt"
+      },
+      "reference_image": {
+        "name": "reference_image",
+        "tooltip": "الصورة المرجعية لاستخلاص النمط منها."
+      },
+      "structure_strength": {
+        "name": "structure_strength",
+        "tooltip": "يحافظ على بنية الصورة الأصلية."
+      },
+      "style_strength": {
+        "name": "style_strength",
+        "tooltip": "نسبة قوة النمط."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "Mahiro": {
     "description": "تعديل التوجيه للتركيز أكثر على 'اتجاه' النص الإيجابي بدلاً من الفرق بين النص السلبي.",
     "display_name": "ماهيرو لطيفة جداً وتستحق دالة توجيه أفضل!! (。・ω・。)",
@@ -11209,19 +11412,28 @@
     }
   },
   "ResizeImageMaskNode": {
+    "description": "تغيير حجم صورة أو قناع باستخدام طرق تحجيم مختلفة.",
     "display_name": "تغيير حجم الصورة/القناع",
     "inputs": {
       "input": {
         "name": "الإدخال"
       },
       "resize_type": {
-        "name": "نوع تغيير الحجم"
+        "name": "نوع تغيير الحجم",
+        "tooltip": "اختر طريقة تغيير الحجم: حسب الأبعاد الدقيقة، عامل التحجيم، مطابقة صورة أخرى، إلخ."
       },
-      "resize_type_multiplier": {
-        "name": "المضاعف"
+      "resize_type_crop": {
+        "name": "قص"
+      },
+      "resize_type_height": {
+        "name": "الارتفاع"
+      },
+      "resize_type_width": {
+        "name": "العرض"
       },
       "scale_method": {
-        "name": "طريقة التحجيم"
+        "name": "طريقة التحجيم",
+        "tooltip": "خوارزمية الاستيفاء. 'area' هي الأفضل لتصغير الحجم، و'lanczos' لتكبير الحجم، و'nearest-exact' لفن البكسل."
       }
     },
     "outputs": {
@@ -13355,6 +13567,84 @@
       }
     }
   },
+  "TencentImageToModelNode": {
+    "display_name": "Hunyuan3D: من صورة إلى نموذج (احترافي)",
+    "inputs": {
+      "control_after_generate": {
+        "name": "التحكم بعد التوليد"
+      },
+      "face_count": {
+        "name": "عدد الأوجه"
+      },
+      "generate_type": {
+        "name": "نوع التوليد"
+      },
+      "generate_type_pbr": {
+        "name": "PBR"
+      },
+      "image": {
+        "name": "الصورة"
+      },
+      "image_back": {
+        "name": "الصورة الخلفية"
+      },
+      "image_left": {
+        "name": "الصورة اليسرى"
+      },
+      "image_right": {
+        "name": "الصورة اليمنى"
+      },
+      "model": {
+        "name": "النموذج",
+        "tooltip": "خيار LowPoly غير متوفر لنموذج `3.1`."
+      },
+      "seed": {
+        "name": "البذرة",
+        "tooltip": "البذرة تتحكم فيما إذا كان يجب إعادة تشغيل العقدة؛ النتائج غير حتمية بغض النظر عن البذرة."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "ملف النموذج",
+        "tooltip": null
+      }
+    }
+  },
+  "TencentTextToModelNode": {
+    "display_name": "Hunyuan3D: من نص إلى نموذج (احترافي)",
+    "inputs": {
+      "control_after_generate": {
+        "name": "التحكم بعد التوليد"
+      },
+      "face_count": {
+        "name": "عدد الأوجه"
+      },
+      "generate_type": {
+        "name": "نوع التوليد"
+      },
+      "generate_type_pbr": {
+        "name": "PBR"
+      },
+      "model": {
+        "name": "النموذج",
+        "tooltip": "خيار LowPoly غير متوفر لنموذج `3.1`."
+      },
+      "prompt": {
+        "name": "الموجه",
+        "tooltip": "يدعم حتى ١٠٢٤ حرفاً."
+      },
+      "seed": {
+        "name": "البذرة",
+        "tooltip": "البذرة تتحكم فيما إذا كان يجب إعادة تشغيل العقدة؛ النتائج غير حتمية بغض النظر عن البذرة."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "ملف النموذج",
+        "tooltip": null
+      }
+    }
+  },
   "TextEncodeAceStepAudio": {
     "display_name": "TextEncodeAceStepAudio",
     "inputs": {
@@ -13450,6 +13740,40 @@
       }
     }
   },
+  "TextEncodeZImageOmni": {
+    "display_name": "TextEncodeZImageOmni",
+    "inputs": {
+      "auto_resize_images": {
+        "name": "تغيير حجم الصور تلقائياً"
+      },
+      "clip": {
+        "name": "clip"
+      },
+      "image1": {
+        "name": "الصورة ١"
+      },
+      "image2": {
+        "name": "الصورة ٢"
+      },
+      "image3": {
+        "name": "الصورة ٣"
+      },
+      "image_encoder": {
+        "name": "مُرمّز الصورة"
+      },
+      "prompt": {
+        "name": "التوجيه"
+      },
+      "vae": {
+        "name": "vae"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "TextToLowercase": {
     "display_name": "تحويل النص إلى أحرف صغيرة",
     "inputs": {
@@ -13655,6 +13979,10 @@
         "name": "وضع الدلو",
         "tooltip": "تمكين وضع دلو الدقة. عند التمكين، يتوقع وجود بيانات كامنة مجمعة مسبقًا من عقدة ResolutionBucket."
       },
+      "bypass_mode": {
+        "name": "bypass_mode",
+        "tooltip": "تفعيل وضع التجاوز أثناء التدريب. عند التفعيل، يتم تطبيق المحولات عبر forward hooks بدلاً من تعديل الأوزان. مفيد للنماذج المحوّلة حيث لا يمكن تعديل الأوزان مباشرة."
+      },
       "control_after_generate": {
         "name": "التحكم بعد التوليد"
       },
@@ -15621,6 +15949,79 @@
       }
     }
   },
+  "WanInfiniteTalkToVideo": {
+    "display_name": "WanInfiniteTalkToVideo",
+    "inputs": {
+      "audio_encoder_output_1": {
+        "name": "مخرجات ترميز الصوت ١"
+      },
+      "audio_scale": {
+        "name": "مقياس الصوت"
+      },
+      "clip_vision_output": {
+        "name": "مخرجات clip للرؤية"
+      },
+      "height": {
+        "name": "الارتفاع"
+      },
+      "length": {
+        "name": "الطول"
+      },
+      "mode": {
+        "name": "الوضع"
+      },
+      "model": {
+        "name": "النموذج"
+      },
+      "model_patch": {
+        "name": "تصحيح النموذج"
+      },
+      "motion_frame_count": {
+        "name": "عدد إطارات الحركة",
+        "tooltip": "عدد الإطارات السابقة المستخدمة كسياق للحركة."
+      },
+      "negative": {
+        "name": "سلبي"
+      },
+      "positive": {
+        "name": "إيجابي"
+      },
+      "previous_frames": {
+        "name": "الإطارات السابقة"
+      },
+      "start_image": {
+        "name": "صورة البداية"
+      },
+      "vae": {
+        "name": "vae"
+      },
+      "width": {
+        "name": "العرض"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "النموذج",
+        "tooltip": null
+      },
+      "1": {
+        "name": "إيجابي",
+        "tooltip": null
+      },
+      "2": {
+        "name": "سلبي",
+        "tooltip": null
+      },
+      "3": {
+        "name": "الفضاء الكامن",
+        "tooltip": null
+      },
+      "4": {
+        "name": "قص الصورة",
+        "tooltip": null
+      }
+    }
+  },
   "WanMoveConcatTrack": {
     "display_name": "WanMoveConcatTrack",
     "inputs": {
@@ -16137,6 +16538,43 @@
       }
     }
   },
+  "WavespeedFlashVSRNode": {
+    "description": "مُرقّي فيديو سريع وعالي الجودة يعزز الدقة ويعيد الوضوح للمقاطع منخفضة الدقة أو الضبابية.",
+    "display_name": "ترقية فيديو FlashVSR",
+    "inputs": {
+      "target_resolution": {
+        "name": "الدقة المستهدفة"
+      },
+      "video": {
+        "name": "الفيديو"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "WavespeedImageUpscaleNode": {
+    "description": "عزز دقة وجودة الصورة، وارفع الصور إلى دقة 4K أو 8K للحصول على نتائج حادة ومفصلة.",
+    "display_name": "ترقية صورة WaveSpeed",
+    "inputs": {
+      "image": {
+        "name": "الصورة"
+      },
+      "model": {
+        "name": "النموذج"
+      },
+      "target_resolution": {
+        "name": "الدقة المستهدفة"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "WebcamCapture": {
     "display_name": "التقاط كاميرا ويب",
     "inputs": {
diff --git a/src/locales/ar/settings.json b/src/locales/ar/settings.json
index edc90fde5..20e285dbc 100644
--- a/src/locales/ar/settings.json
+++ b/src/locales/ar/settings.json
@@ -52,7 +52,8 @@
     }
   },
   "Comfy_Canvas_SelectionToolbox": {
-    "name": "عرض صندوق أدوات التحديد"
+    "name": "عرض صندوق أدوات التحديد",
+    "tooltip": "عرض شريط أدوات عائم عند تحديد العقد، لتوفير وصول سريع إلى الإجراءات الشائعة."
   },
   "Comfy_ConfirmClear": {
     "name": "طلب التأكيد عند مسح سير العمل"
@@ -147,7 +148,8 @@
       "Linear": "خطي",
       "Spline": "منحنى",
       "Straight": "مستقيم"
-    }
+    },
+    "tooltip": "يتحكم في مظهر ووضوح الروابط بين العقد على اللوحة."
   },
   "Comfy_Load3D_3DViewerEnable": {
     "name": "تمكين عارض ثلاثي الأبعاد (تجريبي)",
@@ -272,6 +274,10 @@
   "Comfy_Node_AllowImageSizeDraw": {
     "name": "عرض العرض × الارتفاع تحت معاينة الصورة"
   },
+  "Comfy_Node_AlwaysShowAdvancedWidgets": {
+    "name": "عرض الأدوات المتقدمة دائمًا في جميع العقد",
+    "tooltip": "عند التفعيل، ستظهر الأدوات المتقدمة دائمًا في جميع العقد دون الحاجة لتوسيعها بشكل فردي."
+  },
   "Comfy_Node_AutoSnapLinkToSlot": {
     "name": "التثبيت التلقائي للرابط إلى فتحة العقدة",
     "tooltip": "عند سحب رابط فوق عقدة، يتم تثبيت الرابط تلقائيًا على فتحة إدخال صالحة في العقدة"
@@ -470,6 +476,7 @@
     "tooltip": "إزاحة نقطة تحكم بيزير من نقطة مركز إعادة التوجيه"
   },
   "pysssss_SnapToGrid": {
-    "name": "الالتصاق بالشبكة دائمًا"
+    "name": "الالتصاق بالشبكة دائمًا",
+    "tooltip": "عند التفعيل، ستتم محاذاة العقد تلقائيًا إلى الشبكة عند تحريكها أو تغيير حجمها."
   }
 }
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index fa557ee96..dfb182957 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -1,6 +1,7 @@
 {
   "g": {
     "user": "User",
+    "you": "You",
     "currentUser": "Current user",
     "empty": "Empty",
     "noWorkflowsFound": "No workflows found.",
@@ -43,8 +44,6 @@
     "comfy": "Comfy",
     "refresh": "Refresh",
     "refreshNode": "Refresh Node",
-    "vitePreloadErrorTitle": "New Version Available",
-    "vitePreloadErrorMessage": "A new version of the app has been released. Would you like to reload?\nIf not, some parts of the app might not work as expected.\nFeel free to decline and save your progress before reloading.",
     "terminal": "Terminal",
     "logs": "Logs",
     "videoFailedToLoad": "Video failed to load",
@@ -88,6 +87,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",
@@ -100,6 +100,11 @@
     "no": "No",
     "cancel": "Cancel",
     "close": "Close",
+    "closeDialog": "Close dialog",
+    "showLeftPanel": "Show left panel",
+    "hideLeftPanel": "Hide left panel",
+    "showRightPanel": "Show right panel",
+    "hideRightPanel": "Hide right panel",
     "or": "or",
     "pressKeysForNewBinding": "Press keys for new binding",
     "defaultBanner": "default banner",
@@ -158,6 +163,7 @@
     "choose_file_to_upload": "choose file to upload",
     "capture": "capture",
     "nodes": "Nodes",
+    "nodesCount": "{count} nodes | {count} node | {count} nodes",
     "community": "Community",
     "all": "All",
     "versionMismatchWarning": "Version Compatibility Warning",
@@ -178,6 +184,7 @@
     "source": "Source",
     "filter": "Filter",
     "apply": "Apply",
+    "use": "Use",
     "enabled": "Enabled",
     "installed": "Installed",
     "restart": "Restart",
@@ -269,6 +276,7 @@
     "1x": "1x",
     "2x": "2x",
     "beta": "BETA",
+    "nightly": "NIGHTLY",
     "profile": "Profile",
     "noItems": "No items"
   },
@@ -702,6 +710,8 @@
     "noImportedFiles": "No imported files found",
     "noGeneratedFiles": "No generated files found",
     "generatedAssetsHeader": "Generated assets",
+    "importedAssetsHeader": "Imported assets",
+    "activeJobStatus": "Active job: {status}",
     "noFilesFoundMessage": "Upload files or generate content to see them here",
     "browseTemplates": "Browse example templates",
     "openWorkflow": "Open workflow in local file system",
@@ -751,6 +761,7 @@
       "sortJobs": "Sort jobs",
       "sortBy": "Sort by",
       "activeJobs": "{count} active job | {count} active jobs",
+      "activeJobsShort": "{count} active | {count} active",
       "activeJobsSuffix": "active jobs",
       "jobQueue": "Job Queue",
       "expandCollapsedQueue": "Expand job queue",
@@ -1275,7 +1286,9 @@
     "VueNodes": "Nodes 2.0",
     "Nodes 2_0": "Nodes 2.0",
     "Execution": "Execution",
-    "PLY": "PLY"
+    "PLY": "PLY",
+    "Workspace": "Workspace",
+    "Other": "Other"
   },
   "serverConfigItems": {
     "listen": {
@@ -1426,6 +1439,7 @@
     "latent": "latent",
     "mask": "mask",
     "api node": "api node",
+    "Bria": "Bria",
     "video": "video",
     "ByteDance": "ByteDance",
     "preprocessors": "preprocessors",
@@ -1476,6 +1490,7 @@
     "lotus": "lotus",
     "LTXV": "LTXV",
     "Luma": "Luma",
+    "Magnific": "Magnific",
     "Meshy": "Meshy",
     "MiniMax": "MiniMax",
     "model_specific": "model_specific",
@@ -1499,6 +1514,7 @@
     "stable_cascade": "stable_cascade",
     "3d_models": "3d_models",
     "style_model": "style_model",
+    "Tencent": "Tencent",
     "Topaz": "Topaz",
     "Tripo": "Tripo",
     "Veo": "Veo",
@@ -1506,6 +1522,7 @@
     "": "",
     "camera": "camera",
     "Wan": "Wan",
+    "WaveSpeed": "WaveSpeed",
     "zimage": "zimage"
   },
   "dataTypes": {
@@ -1733,6 +1750,7 @@
     "nothingToQueue": "Nothing to queue",
     "pleaseSelectOutputNodes": "Please select output nodes",
     "failedToQueue": "Failed to queue",
+    "failedToSaveDraft": "Failed to save workflow draft",
     "failedExecutionPathResolution": "Could not resolve path to selected nodes",
     "no3dScene": "No 3D scene to apply texture",
     "failedToApplyTexture": "Failed to apply texture",
@@ -1997,6 +2015,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",
@@ -2051,6 +2071,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",
@@ -2081,17 +2104,144 @@
       "creator": "30 min",
       "pro": "1 hr",
       "founder": "30 min"
+    },
+    "billingComingSoon": {
+      "title": "Coming Soon",
+      "message": "Team billing is coming soon. You'll be able to subscribe to a plan for your workspace with per-seat pricing. Stay tuned for updates."
     }
   },
   "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": {
+    "invite": "Invite",
+    "inviteMember": "Invite member",
+    "inviteLimitReached": "You've reached the maximum of 50 members",
+    "tabs": {
+      "dashboard": "Dashboard",
+      "planCredits": "Plan & Credits",
+      "membersCount": "Members ({count})"
+    },
+    "dashboard": {
+      "placeholder": "Dashboard workspace settings"
+    },
+    "members": {
+      "membersCount": "{count}/50 Members",
+      "pendingInvitesCount": "{count} pending invite | {count} pending invites",
+      "tabs": {
+        "active": "Active",
+        "pendingCount": "Pending ({count})"
+      },
+      "columns": {
+        "inviteDate": "Invite date",
+        "expiryDate": "Expiry date",
+        "joinDate": "Join date"
+      },
+      "actions": {
+        "copyLink": "Copy invite link",
+        "revokeInvite": "Revoke invite",
+        "removeMember": "Remove member"
+      },
+      "noInvites": "No pending invites",
+      "noMembers": "No members",
+      "personalWorkspaceMessage": "You can't invite other members to your personal workspace right now. To add members to a workspace,",
+      "createNewWorkspace": "create a new one."
+    },
+    "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."
+    },
+    "removeMemberDialog": {
+      "title": "Remove this member?",
+      "message": "This member will be removed from your workspace. Credits they've used will not be refunded.",
+      "remove": "Remove member",
+      "success": "Member removed",
+      "error": "Failed to remove member"
+    },
+    "revokeInviteDialog": {
+      "title": "Uninvite this person?",
+      "message": "This member won't be able to join your workspace anymore. Their invite link will be invalidated.",
+      "revoke": "Uninvite"
+    },
+    "inviteMemberDialog": {
+      "title": "Invite a person to this workspace",
+      "message": "Create a shareable invite link to send to someone",
+      "placeholder": "Enter the person's email",
+      "createLink": "Create link",
+      "linkStep": {
+        "title": "Send this link to the person",
+        "message": "Make sure their account uses this email.",
+        "copyLink": "Copy Link",
+        "done": "Done"
+      },
+      "linkCopied": "Copied",
+      "linkCopyFailed": "Failed to copy link"
+    },
+    "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": {
+      "workspaceCreated": {
+        "title": "Workspace created",
+        "message": "Subscribe to a plan, invite teammates, and start collaborating.",
+        "subscribe": "Subscribe"
+      },
+      "workspaceUpdated": {
+        "title": "Workspace updated",
+        "message": "Workspace details have been saved."
+      },
+      "workspaceDeleted": {
+        "title": "Workspace deleted",
+        "message": "The workspace has been permanently deleted."
+      },
+      "workspaceLeft": {
+        "title": "Left workspace",
+        "message": "You have left the workspace."
+      },
+      "failedToUpdateWorkspace": "Failed to update workspace",
+      "failedToCreateWorkspace": "Failed to create workspace",
+      "failedToDeleteWorkspace": "Failed to delete workspace",
+      "failedToLeaveWorkspace": "Failed to leave workspace",
+      "failedToFetchWorkspaces": "Failed to load workspaces"
+    }
+  },
+  "workspaceSwitcher": {
+    "switchWorkspace": "Switch workspace",
+    "subscribe": "Subscribe",
+    "personal": "Personal",
+    "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)",
@@ -2306,6 +2456,12 @@
   "assetBrowser": {
     "allCategory": "All {category}",
     "allModels": "All Models",
+    "byType": "By type",
+    "emptyImported": {
+      "canImport": "No imported models yet. Click \"Import Model\" to add your own.",
+      "restricted": "Personal models are only available at Creator tier and above."
+    },
+    "imported": "Imported",
     "assetCollection": "Asset collection",
     "assets": "Assets",
     "baseModels": "Base models",
@@ -2396,6 +2552,30 @@
       "assetCard": "{name} - {type} asset",
       "loadingAsset": "Loading asset"
     },
+    "modelInfo": {
+      "title": "Model Info",
+      "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}",
+      "modelTagging": "Model Tagging",
+      "modelType": "Model Type",
+      "selectModelType": "Select model type...",
+      "compatibleBaseModels": "Compatible Base Models",
+      "addBaseModel": "Add base model...",
+      "baseModelUnknown": "Base model unknown",
+      "additionalTags": "Additional Tags",
+      "addTag": "Add tag...",
+      "noAdditionalTags": "No additional tags",
+      "modelDescription": "Model Description",
+      "triggerPhrases": "Trigger Phrases",
+      "description": "Description",
+      "descriptionNotSet": "No description set",
+      "descriptionPlaceholder": "Add a description for this model..."
+    },
     "media": {
       "threeDModelPlaceholder": "3D Model",
       "audioPlaceholder": "Audio"
@@ -2582,7 +2762,8 @@
     "noneSearchDesc": "No items match your search",
     "nodesNoneDesc": "NO NODES",
     "fallbackGroupTitle": "Group",
-    "fallbackNodeTitle": "Node"
+    "fallbackNodeTitle": "Node",
+    "hideAdvancedInputsButton": "Hide advanced inputs"
   },
   "help": {
     "recentReleases": "Recent releases",
@@ -2608,7 +2789,10 @@
     "unsavedChanges": {
       "title": "Unsaved Changes",
       "message": "You have unsaved changes. Do you want to discard them and switch workspaces?"
-    }
+    },
+    "inviteAccepted": "Invite Accepted",
+    "addedToWorkspace": "You have been added to {workspaceName}",
+    "inviteFailed": "Failed to Accept Invite"
   },
   "workspaceAuth": {
     "errors": {
@@ -2618,5 +2802,11 @@
       "workspaceNotFound": "Workspace not found",
       "tokenExchangeFailed": "Failed to authenticate with workspace: {error}"
     }
+  },
+  "nightly": {
+    "badge": {
+      "label": "Preview Version",
+      "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/locales/en/nodeDefs.json b/src/locales/en/nodeDefs.json
index c745a0db0..ae628e627 100644
--- a/src/locales/en/nodeDefs.json
+++ b/src/locales/en/nodeDefs.json
@@ -328,6 +328,68 @@
       }
     }
   },
+  "BriaImageEditNode": {
+    "display_name": "Bria FIBO Image Edit",
+    "description": "Edit images using Bria latest model",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "image": {
+        "name": "image"
+      },
+      "prompt": {
+        "name": "prompt",
+        "tooltip": "Instruction to edit image"
+      },
+      "negative_prompt": {
+        "name": "negative_prompt"
+      },
+      "structured_prompt": {
+        "name": "structured_prompt",
+        "tooltip": "A string containing the structured edit prompt in JSON format. Use this instead of usual prompt for precise, programmatic control."
+      },
+      "seed": {
+        "name": "seed"
+      },
+      "guidance_scale": {
+        "name": "guidance_scale",
+        "tooltip": "Higher value makes the image follow the prompt more closely."
+      },
+      "steps": {
+        "name": "steps"
+      },
+      "moderation": {
+        "name": "moderation",
+        "tooltip": "Moderation settings"
+      },
+      "mask": {
+        "name": "mask",
+        "tooltip": "If omitted, the edit applies to the entire image."
+      },
+      "control_after_generate": {
+        "name": "control after generate"
+      },
+      "moderation_prompt_content_moderation": {
+        "name": "prompt_content_moderation"
+      },
+      "moderation_visual_input_moderation": {
+        "name": "visual_input_moderation"
+      },
+      "moderation_visual_output_moderation": {
+        "name": "visual_output_moderation"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      },
+      "1": {
+        "name": "structured_prompt",
+        "tooltip": null
+      }
+    }
+  },
   "ByteDanceFirstLastFrameNode": {
     "display_name": "ByteDance First-Last-Frame to Video",
     "description": "Generate video using prompt and first and last frames.",
@@ -385,43 +447,6 @@
       }
     }
   },
-  "ByteDanceImageEditNode": {
-    "display_name": "ByteDance Image Edit",
-    "description": "Edit images using ByteDance models via api based on prompt",
-    "inputs": {
-      "model": {
-        "name": "model"
-      },
-      "image": {
-        "name": "image",
-        "tooltip": "The base image to edit"
-      },
-      "prompt": {
-        "name": "prompt",
-        "tooltip": "Instruction to edit image"
-      },
-      "seed": {
-        "name": "seed",
-        "tooltip": "Seed to use for generation"
-      },
-      "guidance_scale": {
-        "name": "guidance_scale",
-        "tooltip": "Higher value makes the image follow the prompt more closely"
-      },
-      "watermark": {
-        "name": "watermark",
-        "tooltip": "Whether to add an \"AI generated\" watermark to the image"
-      },
-      "control_after_generate": {
-        "name": "control after generate"
-      }
-    },
-    "outputs": {
-      "0": {
-        "tooltip": null
-      }
-    }
-  },
   "ByteDanceImageNode": {
     "display_name": "ByteDance Image",
     "description": "Generate images using ByteDance models via api based on prompt",
@@ -2033,11 +2058,16 @@
       "choice": {
         "name": "choice"
       },
-      "option0": {}
+      "index": {},
+      "option1": {}
     },
     "outputs": {
       "0": {
         "tooltip": null
+      },
+      "1": {
+        "name": "INDEX",
+        "tooltip": null
       }
     }
   },
@@ -6001,7 +6031,7 @@
     }
   },
   "LoraLoader": {
-    "display_name": "Load LoRA",
+    "display_name": "Load LoRA (Model and CLIP)",
     "description": "LoRAs are used to modify diffusion and CLIP models, altering the way in which latents are denoised such as applying styles. Multiple LoRA nodes can be linked together.",
     "inputs": {
       "model": {
@@ -6034,8 +6064,62 @@
       }
     }
   },
+  "LoraLoaderBypass": {
+    "display_name": "Load LoRA (Bypass) (For debugging)",
+    "description": "Apply LoRA in bypass mode. Unlike regular LoRA, this doesn't modify model weights - instead it injects the LoRA computation during forward pass. Useful for training scenarios.",
+    "inputs": {
+      "model": {
+        "name": "model",
+        "tooltip": "The diffusion model the LoRA will be applied to."
+      },
+      "clip": {
+        "name": "clip",
+        "tooltip": "The CLIP model the LoRA will be applied to."
+      },
+      "lora_name": {
+        "name": "lora_name",
+        "tooltip": "The name of the LoRA."
+      },
+      "strength_model": {
+        "name": "strength_model",
+        "tooltip": "How strongly to modify the diffusion model. This value can be negative."
+      },
+      "strength_clip": {
+        "name": "strength_clip",
+        "tooltip": "How strongly to modify the CLIP model. This value can be negative."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": "The modified diffusion model."
+      },
+      "1": {
+        "tooltip": "The modified CLIP model."
+      }
+    }
+  },
+  "LoraLoaderBypassModelOnly": {
+    "display_name": "Load LoRA (Bypass, Model Only) (for debugging)",
+    "description": "Apply LoRA in bypass mode. Unlike regular LoRA, this doesn't modify model weights - instead it injects the LoRA computation during forward pass. Useful for training scenarios.",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "lora_name": {
+        "name": "lora_name"
+      },
+      "strength_model": {
+        "name": "strength_model"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": "The modified diffusion model."
+      }
+    }
+  },
   "LoraLoaderModelOnly": {
-    "display_name": "LoraLoaderModelOnly",
+    "display_name": "Load LoRA",
     "description": "LoRAs are used to modify diffusion and CLIP models, altering the way in which latents are denoised such as applying styles. Multiple LoRA nodes can be linked together.",
     "inputs": {
       "model": {
@@ -6767,6 +6851,126 @@
       }
     }
   },
+  "MagnificImageRelightNode": {
+    "display_name": "Magnific Image Relight",
+    "description": "Relight an image with lighting adjustments and optional reference-based light transfer.",
+    "inputs": {
+      "image": {
+        "name": "image",
+        "tooltip": "The image to relight."
+      },
+      "prompt": {
+        "name": "prompt",
+        "tooltip": "Descriptive guidance for lighting. Supports emphasis notation (1-1.4)."
+      },
+      "light_transfer_strength": {
+        "name": "light_transfer_strength",
+        "tooltip": "Intensity of light transfer application."
+      },
+      "style": {
+        "name": "style",
+        "tooltip": "Stylistic output preference."
+      },
+      "interpolate_from_original": {
+        "name": "interpolate_from_original",
+        "tooltip": "Restricts generation freedom to match original more closely."
+      },
+      "change_background": {
+        "name": "change_background",
+        "tooltip": "Modifies background based on prompt/reference."
+      },
+      "preserve_details": {
+        "name": "preserve_details",
+        "tooltip": "Maintains texture and fine details from original."
+      },
+      "advanced_settings": {
+        "name": "advanced_settings",
+        "tooltip": "Fine-tuning options for advanced lighting control."
+      },
+      "reference_image": {
+        "name": "reference_image",
+        "tooltip": "Optional reference image to transfer lighting from."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "MagnificImageSkinEnhancerNode": {
+    "display_name": "Magnific Image Skin Enhancer",
+    "description": "Skin enhancement for portraits with multiple processing modes.",
+    "inputs": {
+      "image": {
+        "name": "image",
+        "tooltip": "The portrait image to enhance."
+      },
+      "sharpen": {
+        "name": "sharpen",
+        "tooltip": "Sharpening intensity level."
+      },
+      "smart_grain": {
+        "name": "smart_grain",
+        "tooltip": "Smart grain intensity level."
+      },
+      "mode": {
+        "name": "mode",
+        "tooltip": "Processing mode: creative for artistic enhancement, faithful for preserving original appearance, flexible for targeted optimization."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "MagnificImageStyleTransferNode": {
+    "display_name": "Magnific Image Style Transfer",
+    "description": "Transfer the style from a reference image to your input image.",
+    "inputs": {
+      "image": {
+        "name": "image",
+        "tooltip": "The image to apply style transfer to."
+      },
+      "reference_image": {
+        "name": "reference_image",
+        "tooltip": "The reference image to extract style from."
+      },
+      "prompt": {
+        "name": "prompt"
+      },
+      "style_strength": {
+        "name": "style_strength",
+        "tooltip": "Percentage of style strength."
+      },
+      "structure_strength": {
+        "name": "structure_strength",
+        "tooltip": "Maintains the structure of the original image."
+      },
+      "flavor": {
+        "name": "flavor",
+        "tooltip": "Style transfer flavor."
+      },
+      "engine": {
+        "name": "engine",
+        "tooltip": "Processing engine selection."
+      },
+      "portrait_mode": {
+        "name": "portrait_mode",
+        "tooltip": "Enable portrait mode for facial enhancements."
+      },
+      "fixed_generation": {
+        "name": "fixed_generation",
+        "tooltip": "When disabled, expect each generation to introduce a degree of randomness, leading to more diverse outcomes."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "Mahiro": {
     "display_name": "Mahiro CFG",
     "description": "Modify the guidance to scale more on the 'direction' of the positive prompt rather than the difference between the negative prompt.",
@@ -9795,8 +9999,8 @@
     }
   },
   "OpenAIGPTImage1": {
-    "display_name": "OpenAI GPT Image 1",
-    "description": "Generates images synchronously via OpenAI's GPT Image 1 endpoint.",
+    "display_name": "OpenAI GPT Image 1.5",
+    "description": "Generates images synchronously via OpenAI's GPT Image endpoint.",
     "inputs": {
       "prompt": {
         "name": "prompt",
@@ -11218,18 +11422,27 @@
   },
   "ResizeImageMaskNode": {
     "display_name": "Resize Image/Mask",
+    "description": "Resize an image or mask using various scaling methods.",
     "inputs": {
       "input": {
         "name": "input"
       },
       "resize_type": {
-        "name": "resize_type"
+        "name": "resize_type",
+        "tooltip": "Select how to resize: by exact dimensions, scale factor, matching another image, etc."
       },
       "scale_method": {
-        "name": "scale_method"
+        "name": "scale_method",
+        "tooltip": "Interpolation algorithm. 'area' is best for downscaling, 'lanczos' for upscaling, 'nearest-exact' for pixel art."
       },
-      "resize_type_multiplier": {
-        "name": "multiplier"
+      "resize_type_crop": {
+        "name": "crop"
+      },
+      "resize_type_height": {
+        "name": "height"
+      },
+      "resize_type_width": {
+        "name": "width"
       }
     },
     "outputs": {
@@ -13374,6 +13587,84 @@
       }
     }
   },
+  "TencentImageToModelNode": {
+    "display_name": "Hunyuan3D: Image(s) to Model (Pro)",
+    "inputs": {
+      "model": {
+        "name": "model",
+        "tooltip": "The LowPoly option is unavailable for the `3.1` model."
+      },
+      "image": {
+        "name": "image"
+      },
+      "face_count": {
+        "name": "face_count"
+      },
+      "generate_type": {
+        "name": "generate_type"
+      },
+      "seed": {
+        "name": "seed",
+        "tooltip": "Seed controls whether the node should re-run; results are non-deterministic regardless of seed."
+      },
+      "image_left": {
+        "name": "image_left"
+      },
+      "image_right": {
+        "name": "image_right"
+      },
+      "image_back": {
+        "name": "image_back"
+      },
+      "control_after_generate": {
+        "name": "control after generate"
+      },
+      "generate_type_pbr": {
+        "name": "pbr"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "model_file",
+        "tooltip": null
+      }
+    }
+  },
+  "TencentTextToModelNode": {
+    "display_name": "Hunyuan3D: Text to Model (Pro)",
+    "inputs": {
+      "model": {
+        "name": "model",
+        "tooltip": "The LowPoly option is unavailable for the `3.1` model."
+      },
+      "prompt": {
+        "name": "prompt",
+        "tooltip": "Supports up to 1024 characters."
+      },
+      "face_count": {
+        "name": "face_count"
+      },
+      "generate_type": {
+        "name": "generate_type"
+      },
+      "seed": {
+        "name": "seed",
+        "tooltip": "Seed controls whether the node should re-run; results are non-deterministic regardless of seed."
+      },
+      "control_after_generate": {
+        "name": "control after generate"
+      },
+      "generate_type_pbr": {
+        "name": "pbr"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "model_file",
+        "tooltip": null
+      }
+    }
+  },
   "TextEncodeAceStepAudio": {
     "display_name": "TextEncodeAceStepAudio",
     "inputs": {
@@ -13469,6 +13760,40 @@
       }
     }
   },
+  "TextEncodeZImageOmni": {
+    "display_name": "TextEncodeZImageOmni",
+    "inputs": {
+      "clip": {
+        "name": "clip"
+      },
+      "prompt": {
+        "name": "prompt"
+      },
+      "auto_resize_images": {
+        "name": "auto_resize_images"
+      },
+      "image_encoder": {
+        "name": "image_encoder"
+      },
+      "vae": {
+        "name": "vae"
+      },
+      "image1": {
+        "name": "image1"
+      },
+      "image2": {
+        "name": "image2"
+      },
+      "image3": {
+        "name": "image3"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "TextToLowercase": {
     "display_name": "Text to Lowercase",
     "inputs": {
@@ -13730,24 +14055,24 @@
         "name": "bucket_mode",
         "tooltip": "Enable resolution bucket mode. When enabled, expects pre-bucketed latents from ResolutionBucket node."
       },
+      "bypass_mode": {
+        "name": "bypass_mode",
+        "tooltip": "Enable bypass mode for training. When enabled, adapters are applied via forward hooks instead of weight modification. Useful for quantized models where weights cannot be directly modified."
+      },
       "control_after_generate": {
         "name": "control after generate"
       }
     },
     "outputs": {
       "0": {
-        "name": "model",
-        "tooltip": "Model with LoRA applied"
-      },
-      "1": {
         "name": "lora",
         "tooltip": "LoRA weights"
       },
-      "2": {
+      "1": {
         "name": "loss_map",
         "tooltip": "Loss history"
       },
-      "3": {
+      "2": {
         "name": "steps",
         "tooltip": "Total training steps"
       }
@@ -15683,6 +16008,79 @@
       }
     }
   },
+  "WanInfiniteTalkToVideo": {
+    "display_name": "WanInfiniteTalkToVideo",
+    "inputs": {
+      "mode": {
+        "name": "mode"
+      },
+      "model": {
+        "name": "model"
+      },
+      "model_patch": {
+        "name": "model_patch"
+      },
+      "positive": {
+        "name": "positive"
+      },
+      "negative": {
+        "name": "negative"
+      },
+      "vae": {
+        "name": "vae"
+      },
+      "width": {
+        "name": "width"
+      },
+      "height": {
+        "name": "height"
+      },
+      "length": {
+        "name": "length"
+      },
+      "audio_encoder_output_1": {
+        "name": "audio_encoder_output_1"
+      },
+      "motion_frame_count": {
+        "name": "motion_frame_count",
+        "tooltip": "Number of previous frames to use as motion context."
+      },
+      "audio_scale": {
+        "name": "audio_scale"
+      },
+      "clip_vision_output": {
+        "name": "clip_vision_output"
+      },
+      "start_image": {
+        "name": "start_image"
+      },
+      "previous_frames": {
+        "name": "previous_frames"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "model",
+        "tooltip": null
+      },
+      "1": {
+        "name": "positive",
+        "tooltip": null
+      },
+      "2": {
+        "name": "negative",
+        "tooltip": null
+      },
+      "3": {
+        "name": "latent",
+        "tooltip": null
+      },
+      "4": {
+        "name": "trim_image",
+        "tooltip": null
+      }
+    }
+  },
   "WanMoveConcatTrack": {
     "display_name": "WanMoveConcatTrack",
     "inputs": {
@@ -16199,6 +16597,43 @@
       }
     }
   },
+  "WavespeedFlashVSRNode": {
+    "display_name": "FlashVSR Video Upscale",
+    "description": "Fast, high-quality video upscaler that boosts resolution and restores clarity for low-resolution or blurry footage.",
+    "inputs": {
+      "video": {
+        "name": "video"
+      },
+      "target_resolution": {
+        "name": "target_resolution"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "WavespeedImageUpscaleNode": {
+    "display_name": "WaveSpeed Image Upscale",
+    "description": "Boost image resolution and quality, upscaling photos to 4K or 8K for sharp, detailed results.",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "image": {
+        "name": "image"
+      },
+      "target_resolution": {
+        "name": "target_resolution"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "WebcamCapture": {
     "display_name": "Webcam Capture",
     "inputs": {
diff --git a/src/locales/en/settings.json b/src/locales/en/settings.json
index 6fbb8e105..64e674d50 100644
--- a/src/locales/en/settings.json
+++ b/src/locales/en/settings.json
@@ -52,7 +52,8 @@
     }
   },
   "Comfy_Canvas_SelectionToolbox": {
-    "name": "Show selection toolbox"
+    "name": "Show selection toolbox",
+    "tooltip": "Display a floating toolbar when nodes are selected, providing quick access to common actions."
   },
   "Comfy_ConfirmClear": {
     "name": "Require confirmation when clearing workflow"
@@ -142,6 +143,7 @@
   },
   "Comfy_LinkRenderMode": {
     "name": "Link Render Mode",
+    "tooltip": "Controls the appearance and visibility of connection links between nodes on the canvas.",
     "options": {
       "Straight": "Straight",
       "Linear": "Linear",
@@ -220,6 +222,10 @@
   "Comfy_Node_AllowImageSizeDraw": {
     "name": "Show width × height below the image preview"
   },
+  "Comfy_Node_AlwaysShowAdvancedWidgets": {
+    "name": "Always show advanced widgets on all nodes",
+    "tooltip": "When enabled, advanced widgets are always visible on all nodes without needing to expand them individually."
+  },
   "Comfy_Node_AutoSnapLinkToSlot": {
     "name": "Auto snap link to node slot",
     "tooltip": "When dragging a link over a node, the link automatically snap to a viable input slot on the node"
@@ -470,6 +476,7 @@
     "tooltip": "The bezier control point offset from the reroute centre point"
   },
   "pysssss_SnapToGrid": {
-    "name": "Always snap to grid"
+    "name": "Always snap to grid",
+    "tooltip": "When enabled, nodes will automatically align to the grid when moved or resized."
   }
 }
\ No newline at end of file
diff --git a/src/locales/es/main.json b/src/locales/es/main.json
index cbbb1770b..7ac9b7de1 100644
--- a/src/locales/es/main.json
+++ b/src/locales/es/main.json
@@ -24,6 +24,7 @@
     "assets": "Recursos",
     "baseModels": "Modelos base",
     "browseAssets": "Explorar recursos",
+    "byType": "Por tipo",
     "checkpoints": "Checkpoints",
     "civitaiLinkExample": "{example} {link}",
     "civitaiLinkExampleStrong": "Ejemplo:",
@@ -45,6 +46,10 @@
       "failed": "La descarga falló",
       "inProgress": "Descargando {assetName}..."
     },
+    "emptyImported": {
+      "canImport": "Aún no hay modelos importados. Haz clic en \"Importar modelo\" para añadir el tuyo.",
+      "restricted": "Los modelos personales solo están disponibles en el nivel Creador o superior."
+    },
     "errorFileTooLarge": "El archivo excede el tamaño máximo permitido",
     "errorFormatNotAllowed": "Solo se permite el formato SafeTensor",
     "errorModelTypeNotSupported": "Este tipo de modelo no es compatible",
@@ -61,6 +66,7 @@
     "finish": "Finalizar",
     "genericLinkPlaceholder": "Pega el enlace aquí",
     "importAnother": "Importar otro",
+    "imported": "Importado",
     "jobId": "ID de tarea",
     "loadingModels": "Cargando {type}...",
     "maxFileSize": "Tamaño máximo de archivo: {size}",
@@ -70,6 +76,30 @@
       "threeDModelPlaceholder": "Modelo 3D"
     },
     "modelAssociatedWithLink": "El modelo asociado con el enlace que proporcionaste:",
+    "modelInfo": {
+      "addBaseModel": "Agregar modelo base...",
+      "addTag": "Agregar etiqueta...",
+      "additionalTags": "Etiquetas adicionales",
+      "baseModelUnknown": "Modelo base desconocido",
+      "basicInfo": "Información básica",
+      "compatibleBaseModels": "Modelos base compatibles",
+      "description": "Descripción",
+      "descriptionNotSet": "Sin descripción",
+      "descriptionPlaceholder": "Agrega una descripción para este modelo...",
+      "displayName": "Nombre para mostrar",
+      "editDisplayName": "Editar nombre para mostrar",
+      "fileName": "Nombre de archivo",
+      "modelDescription": "Descripción del modelo",
+      "modelTagging": "Etiquetado del modelo",
+      "modelType": "Tipo de modelo",
+      "noAdditionalTags": "Sin etiquetas adicionales",
+      "selectModelPrompt": "Selecciona un modelo para ver su información",
+      "selectModelType": "Selecciona el tipo de modelo...",
+      "source": "Fuente",
+      "title": "Información del modelo",
+      "triggerPhrases": "Frases de activación",
+      "viewOnSource": "Ver en {source}"
+    },
     "modelName": "Nombre del modelo",
     "modelNamePlaceholder": "Introduce un nombre para este modelo",
     "modelTypeSelectorLabel": "¿Qué tipo de modelo es este?",
@@ -684,6 +714,7 @@
     "clearAll": "Borrar todo",
     "clearFilters": "Borrar filtros",
     "close": "Cerrar",
+    "closeDialog": "Cerrar diálogo",
     "color": "Color",
     "comfy": "Comfy",
     "comfyOrgLogoAlt": "Logo de ComfyOrg",
@@ -700,6 +731,7 @@
     "control_before_generate": "control antes de generar",
     "copied": "Copiado",
     "copy": "Copiar",
+    "copyAll": "Copiar todo",
     "copyJobId": "Copiar ID de trabajo",
     "copyToClipboard": "Copiar al portapapeles",
     "copyURL": "Copiar URL",
@@ -762,6 +794,8 @@
     "goToNode": "Ir al nodo",
     "graphNavigation": "Navegación de gráficos",
     "halfSpeed": "0.5x",
+    "hideLeftPanel": "Ocultar panel izquierdo",
+    "hideRightPanel": "Ocultar panel derecho",
     "icon": "Icono",
     "imageFailedToLoad": "Falló la carga de la imagen",
     "imagePreview": "Vista previa de imagen - Usa las teclas de flecha para navegar entre imágenes",
@@ -803,6 +837,7 @@
     "name": "Nombre",
     "newFolder": "Nueva carpeta",
     "next": "Siguiente",
+    "nightly": "NIGHTLY",
     "no": "No",
     "noAudioRecorded": "No se grabó audio",
     "noItems": "Sin elementos",
@@ -817,6 +852,7 @@
     "nodeSlotsError": "Error de Ranuras del Nodo",
     "nodeWidgetsError": "Error de Widgets del Nodo",
     "nodes": "Nodos",
+    "nodesCount": "{count} nodos | {count} nodo | {count} nodos",
     "nodesRunning": "nodos en ejecución",
     "none": "Ninguno",
     "nothingToCopy": "Nada para copiar",
@@ -891,7 +927,9 @@
     "selectedFile": "Archivo seleccionado",
     "setAsBackground": "Establecer como fondo",
     "settings": "Configuraciones",
+    "showLeftPanel": "Mostrar panel izquierdo",
     "showReport": "Mostrar informe",
+    "showRightPanel": "Mostrar panel derecho",
     "singleSelectDropdown": "Menú desplegable de selección única",
     "sort": "Ordenar",
     "source": "Fuente",
@@ -914,6 +952,7 @@
     "updating": "Actualizando",
     "upload": "Subir",
     "usageHint": "Sugerencia de uso",
+    "use": "Usar",
     "user": "Usuario",
     "versionMismatchWarning": "Advertencia de compatibilidad de versión",
     "versionMismatchWarningMessage": "{warning}: {detail} Visita https://docs.comfy.org/installation/update_comfyui#common-update-issues para obtener instrucciones de actualización.",
@@ -921,11 +960,10 @@
     "videoPreview": "Vista previa de video - Usa las teclas de flecha para navegar entre videos",
     "viewImageOfTotal": "Ver imagen {index} de {total}",
     "viewVideoOfTotal": "Ver video {index} de {total}",
-    "vitePreloadErrorMessage": "Se ha lanzado una nueva versión de la aplicación. ¿Deseas recargar?\nSi no lo haces, algunas partes de la aplicación podrían no funcionar correctamente.\nPuedes rechazar y guardar tu progreso antes de recargar.",
-    "vitePreloadErrorTitle": "Nueva versión disponible",
     "volume": "Volumen",
     "warning": "Advertencia",
-    "workflow": "Flujo de trabajo"
+    "workflow": "Flujo de trabajo",
+    "you": "Tú"
   },
   "graphCanvasMenu": {
     "fitView": "Ajustar vista",
@@ -1617,17 +1655,25 @@
       "title": "Este flujo de trabajo tiene nodos faltantes"
     }
   },
+  "nightly": {
+    "badge": {
+      "label": "Versión preliminar",
+      "tooltip": "Estás usando una versión nightly de ComfyUI. Por favor, utiliza el botón de comentarios para compartir tus opiniones sobre estas funciones."
+    }
+  },
   "nodeCategories": {
     "": "",
     "3d": "3d",
     "3d_models": "modelos_3d",
     "BFL": "BFL",
+    "Bria": "Bria",
     "ByteDance": "ByteDance",
     "Gemini": "Gemini",
     "Ideogram": "Ideogram",
     "Kling": "Kling",
     "LTXV": "LTXV",
     "Luma": "Luma",
+    "Magnific": "Magnific",
     "Meshy": "Meshy",
     "MiniMax": "MiniMax",
     "Moonvalley Marey": "Moonvalley Marey",
@@ -1638,11 +1684,13 @@
     "Runway": "Runway",
     "Sora": "Sora",
     "Stability AI": "Stability AI",
+    "Tencent": "Tencent",
     "Topaz": "Topaz",
     "Tripo": "Tripo",
     "Veo": "Veo",
     "Vidu": "Vidu",
     "Wan": "Wan",
+    "WaveSpeed": "WaveSpeed",
     "_for_testing": "_para_pruebas",
     "advanced": "avanzado",
     "animation": "animación",
@@ -1852,6 +1900,7 @@
     },
     "groupSettings": "Configuración de grupo",
     "groups": "Grupos",
+    "hideAdvancedInputsButton": "Ocultar entradas avanzadas",
     "hideInput": "Ocultar entrada",
     "info": "Información",
     "inputs": "ENTRADAS",
@@ -2084,6 +2133,7 @@
     "NodeLibrary": "Biblioteca de Nodos",
     "Nodes 2_0": "Nodes 2.0",
     "Notification Preferences": "Preferencias de notificación",
+    "Other": "Otros",
     "PLY": "PLY",
     "PlanCredits": "Plan y créditos",
     "Pointer": "Puntero",
@@ -2103,7 +2153,8 @@
     "Vue Nodes": "Nodos Vue",
     "VueNodes": "Nodos Vue",
     "Window": "Ventana",
-    "Workflow": "Flujo de Trabajo"
+    "Workflow": "Flujo de Trabajo",
+    "Workspace": "Espacio de trabajo"
   },
   "shape": {
     "CARD": "Card",
@@ -2129,12 +2180,14 @@
     "viewControls": "Controles de vista"
   },
   "sideToolbar": {
+    "activeJobStatus": "Trabajo activo: {status}",
     "assets": "Recursos",
     "backToAssets": "Volver a todos los recursos",
     "browseTemplates": "Explorar plantillas de ejemplo",
     "downloads": "Descargas",
     "generatedAssetsHeader": "Recursos generados",
     "helpCenter": "Centro de ayuda",
+    "importedAssetsHeader": "Recursos importados",
     "labels": {
       "assets": "Recursos",
       "console": "Consola",
@@ -2179,6 +2232,7 @@
     "queue": "Cola",
     "queueProgressOverlay": {
       "activeJobs": "{count} trabajo activo | {count} trabajos activos",
+      "activeJobsShort": "{count} activo(s) | {count} activo(s)",
       "activeJobsSuffix": "trabajos activos",
       "cancelJobTooltip": "Cancelar trabajo",
       "clearHistory": "Limpiar historial de la cola de trabajos",
@@ -2267,9 +2321,15 @@
     "beta": "BETA",
     "billedMonthly": "Facturado mensualmente",
     "billedYearly": "{total} facturado anualmente",
+    "billingComingSoon": {
+      "message": "La facturación para equipos estará disponible pronto. Podrás suscribirte a un plan para tu espacio de trabajo con precios por usuario. Mantente atento para más actualizaciones.",
+      "title": "Próximamente"
+    },
+    "cancelSubscription": "Cancelar suscripción",
     "changeTo": "Cambiar a {plan}",
     "comfyCloud": "Comfy Cloud",
     "comfyCloudLogo": "Logo de Comfy Cloud",
+    "contactOwnerToSubscribe": "Contacta al propietario del espacio de trabajo para suscribirte",
     "contactUs": "Contáctanos",
     "creditsRemainingThisMonth": "Créditos restantes este mes",
     "creditsRemainingThisYear": "Créditos restantes este año",
@@ -2282,6 +2342,7 @@
     "haveQuestions": "¿Tienes preguntas o buscas soluciones empresariales?",
     "invoiceHistory": "Historial de facturas",
     "learnMore": "Más información",
+    "managePayment": "Gestionar pago",
     "managePlan": "Gestionar plan",
     "manageSubscription": "Gestionar suscripción",
     "maxDuration": {
@@ -2317,6 +2378,7 @@
     "subscribeToComfyCloud": "Suscribirse a Comfy Cloud",
     "subscribeToRun": "Suscribirse",
     "subscribeToRunFull": "Suscribirse a Ejecutar",
+    "subscriptionRequiredMessage": "Se requiere una suscripción para que los miembros ejecuten flujos de trabajo en la nube",
     "tierNameYearly": "{name} Anual",
     "tiers": {
       "creator": {
@@ -2348,6 +2410,7 @@
     "viewMoreDetails": "Ver más detalles",
     "viewMoreDetailsPlans": "Ver más detalles sobre planes y precios",
     "viewUsageHistory": "Ver historial de uso",
+    "workspaceNotSubscribed": "Este espacio de trabajo no tiene una suscripción",
     "yearly": "Anual",
     "yearlyCreditsLabel": "Total de créditos anuales",
     "yearlyDiscount": "20% DESCUENTO",
@@ -2449,6 +2512,7 @@
     "failedToLoadModel": "Error al cargar el modelo 3D",
     "failedToPurchaseCredits": "No se pudo comprar créditos: {error}",
     "failedToQueue": "Error al encolar",
+    "failedToSaveDraft": "No se pudo guardar el borrador del flujo de trabajo",
     "failedToToggleCamera": "No se pudo alternar la cámara",
     "failedToToggleGrid": "No se pudo alternar la cuadrícula",
     "failedToUpdateBackgroundColor": "No se pudo actualizar el color de fondo",
@@ -2497,7 +2561,8 @@
     "notSet": "No establecido",
     "provider": "Método de inicio de sesión",
     "title": "Configuración de usuario",
-    "updatePassword": "Actualizar contraseña"
+    "updatePassword": "Actualizar contraseña",
+    "workspaceSettings": "Configuración del espacio de trabajo"
   },
   "validation": {
     "descriptionRequired": "Descripción es requerida",
@@ -2588,6 +2653,9 @@
     "saveWorkflow": "Guardar flujo de trabajo"
   },
   "workspace": {
+    "addedToWorkspace": "Has sido añadido a {workspaceName}",
+    "inviteAccepted": "Invitación aceptada",
+    "inviteFailed": "No se pudo aceptar la invitación",
     "unsavedChanges": {
       "message": "Tienes cambios no guardados. ¿Quieres descartarlos y cambiar de espacio de trabajo?",
       "title": "Cambios no guardados"
@@ -2602,6 +2670,128 @@
       "workspaceNotFound": "Espacio de trabajo no encontrado"
     }
   },
+  "workspacePanel": {
+    "createWorkspaceDialog": {
+      "create": "Crear",
+      "message": "Los espacios de trabajo permiten a los miembros compartir un único fondo de créditos. Te convertirás en el propietario después de crearlo.",
+      "nameLabel": "Nombre del espacio de trabajo*",
+      "namePlaceholder": "Introduce el nombre del espacio de trabajo",
+      "title": "Crear un nuevo espacio de trabajo"
+    },
+    "dashboard": {
+      "placeholder": "Configuración del panel del espacio de trabajo"
+    },
+    "deleteDialog": {
+      "message": "Cualquier crédito no utilizado o recurso no guardado se perderá. Esta acción no se puede deshacer.",
+      "messageWithName": "¿Eliminar \"{name}\"? Cualquier crédito no utilizado o recurso no guardado se perderá. Esta acción no se puede deshacer.",
+      "title": "¿Eliminar este espacio de trabajo?"
+    },
+    "editWorkspaceDialog": {
+      "nameLabel": "Nombre del espacio de trabajo",
+      "save": "Guardar",
+      "title": "Editar detalles del espacio de trabajo"
+    },
+    "invite": "Invitar",
+    "inviteLimitReached": "Has alcanzado el máximo de 50 miembros",
+    "inviteMember": "Invitar miembro",
+    "inviteMemberDialog": {
+      "createLink": "Crear enlace",
+      "linkCopied": "Copiado",
+      "linkCopyFailed": "No se pudo copiar el enlace",
+      "linkStep": {
+        "copyLink": "Copiar enlace",
+        "done": "Listo",
+        "message": "Asegúrate de que su cuenta use este correo electrónico.",
+        "title": "Envía este enlace a la persona"
+      },
+      "message": "Crea un enlace de invitación para compartir y envíalo a alguien",
+      "placeholder": "Introduce el correo electrónico de la persona",
+      "title": "Invitar a una persona a este espacio de trabajo"
+    },
+    "leaveDialog": {
+      "leave": "Abandonar",
+      "message": "No podrás unirte de nuevo a menos que contactes al propietario del espacio de trabajo.",
+      "title": "¿Abandonar este espacio de trabajo?"
+    },
+    "members": {
+      "actions": {
+        "copyLink": "Copiar enlace de invitación",
+        "removeMember": "Eliminar miembro",
+        "revokeInvite": "Revocar invitación"
+      },
+      "columns": {
+        "expiryDate": "Fecha de vencimiento",
+        "inviteDate": "Fecha de invitación",
+        "joinDate": "Fecha de ingreso"
+      },
+      "createNewWorkspace": "crea uno nuevo.",
+      "membersCount": "{count}/50 Miembros",
+      "noInvites": "No hay invitaciones pendientes",
+      "noMembers": "No hay miembros",
+      "pendingInvitesCount": "{count} invitación pendiente | {count} invitaciones pendientes",
+      "personalWorkspaceMessage": "No puedes invitar a otros miembros a tu espacio de trabajo personal en este momento. Para agregar miembros a un espacio de trabajo,",
+      "tabs": {
+        "active": "Activo",
+        "pendingCount": "Pendientes ({count})"
+      }
+    },
+    "menu": {
+      "deleteWorkspace": "Eliminar espacio de trabajo",
+      "deleteWorkspaceDisabledTooltip": "Primero cancela la suscripción activa de tu espacio de trabajo",
+      "editWorkspace": "Editar detalles del espacio de trabajo",
+      "leaveWorkspace": "Abandonar espacio de trabajo"
+    },
+    "removeMemberDialog": {
+      "error": "No se pudo eliminar al miembro",
+      "message": "Este miembro será eliminado de tu espacio de trabajo. Los créditos que haya utilizado no serán reembolsados.",
+      "remove": "Eliminar miembro",
+      "success": "Miembro eliminado",
+      "title": "¿Eliminar a este miembro?"
+    },
+    "revokeInviteDialog": {
+      "message": "Este miembro ya no podrá unirse a tu espacio de trabajo. Su enlace de invitación será invalidado.",
+      "revoke": "Desinvitar",
+      "title": "¿Desinvitar a esta persona?"
+    },
+    "tabs": {
+      "dashboard": "Panel",
+      "membersCount": "Miembros ({count})",
+      "planCredits": "Plan y créditos"
+    },
+    "toast": {
+      "failedToCreateWorkspace": "No se pudo crear el espacio de trabajo",
+      "failedToDeleteWorkspace": "No se pudo eliminar el espacio de trabajo",
+      "failedToFetchWorkspaces": "No se pudieron cargar los espacios de trabajo",
+      "failedToLeaveWorkspace": "No se pudo abandonar el espacio de trabajo",
+      "failedToUpdateWorkspace": "No se pudo actualizar el espacio de trabajo",
+      "workspaceCreated": {
+        "message": "Suscríbete a un plan, invita a compañeros y comienza a colaborar.",
+        "subscribe": "Suscribirse",
+        "title": "Espacio de trabajo creado"
+      },
+      "workspaceDeleted": {
+        "message": "El espacio de trabajo ha sido eliminado permanentemente.",
+        "title": "Espacio de trabajo eliminado"
+      },
+      "workspaceLeft": {
+        "message": "Has salido del espacio de trabajo.",
+        "title": "Saliste del espacio de trabajo"
+      },
+      "workspaceUpdated": {
+        "message": "Los detalles del espacio de trabajo se han guardado.",
+        "title": "Espacio de trabajo actualizado"
+      }
+    }
+  },
+  "workspaceSwitcher": {
+    "createWorkspace": "Crear nuevo espacio de trabajo",
+    "maxWorkspacesReached": "Solo puedes ser propietario de 10 espacios de trabajo. Elimina uno para crear uno nuevo.",
+    "personal": "Personal",
+    "roleMember": "Miembro",
+    "roleOwner": "Propietario",
+    "subscribe": "Suscribirse",
+    "switchWorkspace": "Cambiar espacio de trabajo"
+  },
   "zoomControls": {
     "hideMinimap": "Ocultar minimapa",
     "label": "Controles de zoom",
diff --git a/src/locales/es/nodeDefs.json b/src/locales/es/nodeDefs.json
index 88b814044..03ceaeb6a 100644
--- a/src/locales/es/nodeDefs.json
+++ b/src/locales/es/nodeDefs.json
@@ -328,6 +328,68 @@
       }
     }
   },
+  "BriaImageEditNode": {
+    "description": "Edita imágenes usando el modelo más reciente de Bria",
+    "display_name": "Edición de Imagen Bria",
+    "inputs": {
+      "control_after_generate": {
+        "name": "control después de generar"
+      },
+      "guidance_scale": {
+        "name": "escala_de_guía",
+        "tooltip": "Un valor más alto hace que la imagen siga la instrucción más de cerca."
+      },
+      "image": {
+        "name": "imagen"
+      },
+      "mask": {
+        "name": "máscara",
+        "tooltip": "Si se omite, la edición se aplica a toda la imagen."
+      },
+      "model": {
+        "name": "modelo"
+      },
+      "moderation": {
+        "name": "moderación",
+        "tooltip": "Configuración de moderación"
+      },
+      "moderation_prompt_content_moderation": {
+        "name": "moderación_de_contenido_de_instrucción"
+      },
+      "moderation_visual_input_moderation": {
+        "name": "moderación_visual_de_entrada"
+      },
+      "moderation_visual_output_moderation": {
+        "name": "moderación_visual_de_salida"
+      },
+      "negative_prompt": {
+        "name": "instrucción_negativa"
+      },
+      "prompt": {
+        "name": "instrucción",
+        "tooltip": "Instrucción para editar la imagen"
+      },
+      "seed": {
+        "name": "semilla"
+      },
+      "steps": {
+        "name": "pasos"
+      },
+      "structured_prompt": {
+        "name": "instrucción_estructurada",
+        "tooltip": "Una cadena que contiene la instrucción de edición estructurada en formato JSON. Usa esto en lugar de la instrucción habitual para un control preciso y programático."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      },
+      "1": {
+        "name": "instrucción_estructurada",
+        "tooltip": null
+      }
+    }
+  },
   "ByteDanceFirstLastFrameNode": {
     "description": "Generar video usando prompt y primer y último fotograma.",
     "display_name": "ByteDance Primer-Último-Fotograma a Video",
@@ -385,43 +447,6 @@
       }
     }
   },
-  "ByteDanceImageEditNode": {
-    "description": "Editar imágenes usando modelos ByteDance a través de API basado en prompt",
-    "display_name": "Edición de Imágenes ByteDance",
-    "inputs": {
-      "control_after_generate": {
-        "name": "controlar después de generar"
-      },
-      "guidance_scale": {
-        "name": "escala_de_guía",
-        "tooltip": "Un valor más alto hace que la imagen siga más de cerca el prompt"
-      },
-      "image": {
-        "name": "imagen",
-        "tooltip": "La imagen base para editar"
-      },
-      "model": {
-        "name": "modelo"
-      },
-      "prompt": {
-        "name": "prompt",
-        "tooltip": "Instrucción para editar la imagen"
-      },
-      "seed": {
-        "name": "semilla",
-        "tooltip": "Semilla a utilizar para la generación"
-      },
-      "watermark": {
-        "name": "marca_de_agua",
-        "tooltip": "Si se debe añadir una marca de agua \"Generado por IA\" a la imagen"
-      }
-    },
-    "outputs": {
-      "0": {
-        "tooltip": null
-      }
-    }
-  },
   "ByteDanceImageNode": {
     "description": "Generar imágenes usando modelos ByteDance a través de API basado en prompt",
     "display_name": "Imagen ByteDance",
@@ -2031,14 +2056,18 @@
       "choice": {
         "name": "elección"
       },
-      "option0": {
+      "index": {
+      },
+      "option1": {
       }
     },
-    "outputs": {
-      "0": {
+    "outputs": [
+      null,
+      {
+        "name": "ÍNDICE",
         "tooltip": null
       }
-    }
+    ]
   },
   "DiffControlNetLoader": {
     "display_name": "Cargar Modelo ControlNet (diff)",
@@ -6390,6 +6419,60 @@
       }
     }
   },
+  "LoraLoaderBypass": {
+    "description": "Aplica LoRA en modo bypass. A diferencia de LoRA regular, esto no modifica los pesos del modelo, sino que inyecta el cálculo de LoRA durante la pasada hacia adelante. Útil para escenarios de entrenamiento.",
+    "display_name": "Cargar LoRA (Bypass) (Para depuración)",
+    "inputs": {
+      "clip": {
+        "name": "clip",
+        "tooltip": "El modelo CLIP al que se aplicará LoRA."
+      },
+      "lora_name": {
+        "name": "lora_name",
+        "tooltip": "El nombre de la LoRA."
+      },
+      "model": {
+        "name": "model",
+        "tooltip": "El modelo de difusión al que se aplicará LoRA."
+      },
+      "strength_clip": {
+        "name": "strength_clip",
+        "tooltip": "Qué tanto modificar el modelo CLIP. Este valor puede ser negativo."
+      },
+      "strength_model": {
+        "name": "strength_model",
+        "tooltip": "Qué tanto modificar el modelo de difusión. Este valor puede ser negativo."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": "El modelo de difusión modificado."
+      },
+      "1": {
+        "tooltip": "El modelo CLIP modificado."
+      }
+    }
+  },
+  "LoraLoaderBypassModelOnly": {
+    "description": "Aplica LoRA en modo bypass. A diferencia de LoRA regular, esto no modifica los pesos del modelo, sino que inyecta el cálculo de LoRA durante la pasada hacia adelante. Útil para escenarios de entrenamiento.",
+    "display_name": "Cargar LoRA (Bypass, Solo Modelo) (para depuración)",
+    "inputs": {
+      "lora_name": {
+        "name": "lora_name"
+      },
+      "model": {
+        "name": "model"
+      },
+      "strength_model": {
+        "name": "strength_model"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": "El modelo de difusión modificado."
+      }
+    }
+  },
   "LoraLoaderModelOnly": {
     "description": "Las LoRAs se utilizan para modificar los modelos de difusión y CLIP, alterando la forma en que se desruidan los latentes, como la aplicación de estilos. Se pueden vincular varios nodos de LoRA.",
     "display_name": "CargadorLoRAModeloSolo",
@@ -6757,6 +6840,126 @@
       }
     }
   },
+  "MagnificImageRelightNode": {
+    "description": "Ilumina una imagen con ajustes de luz y transferencia de luz basada en referencia opcional.",
+    "display_name": "Magnific Relight de Imagen",
+    "inputs": {
+      "advanced_settings": {
+        "name": "advanced_settings",
+        "tooltip": "Opciones de ajuste fino para control avanzado de la iluminación."
+      },
+      "change_background": {
+        "name": "change_background",
+        "tooltip": "Modifica el fondo según el prompt o la referencia."
+      },
+      "image": {
+        "name": "image",
+        "tooltip": "La imagen a iluminar."
+      },
+      "interpolate_from_original": {
+        "name": "interpolate_from_original",
+        "tooltip": "Restringe la libertad de generación para que coincida más con el original."
+      },
+      "light_transfer_strength": {
+        "name": "light_transfer_strength",
+        "tooltip": "Intensidad de la aplicación de transferencia de luz."
+      },
+      "preserve_details": {
+        "name": "preserve_details",
+        "tooltip": "Mantiene la textura y los detalles finos del original."
+      },
+      "prompt": {
+        "name": "prompt",
+        "tooltip": "Guía descriptiva para la iluminación. Soporta notación de énfasis (1-1.4)."
+      },
+      "reference_image": {
+        "name": "reference_image",
+        "tooltip": "Imagen de referencia opcional de la cual transferir la iluminación."
+      },
+      "style": {
+        "name": "style",
+        "tooltip": "Preferencia de estilo de salida."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "MagnificImageSkinEnhancerNode": {
+    "description": "Mejora de piel para retratos con múltiples modos de procesamiento.",
+    "display_name": "Magnific Mejorador de Piel en Imagen",
+    "inputs": {
+      "image": {
+        "name": "image",
+        "tooltip": "La imagen de retrato a mejorar."
+      },
+      "mode": {
+        "name": "mode",
+        "tooltip": "Modo de procesamiento: creativo para mejora artística, fiel para preservar la apariencia original, flexible para optimización dirigida."
+      },
+      "sharpen": {
+        "name": "sharpen",
+        "tooltip": "Nivel de intensidad de enfoque."
+      },
+      "smart_grain": {
+        "name": "smart_grain",
+        "tooltip": "Nivel de intensidad de grano inteligente."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "MagnificImageStyleTransferNode": {
+    "description": "Transfiere el estilo de una imagen de referencia a tu imagen de entrada.",
+    "display_name": "Transferencia de Estilo de Imagen Magnific",
+    "inputs": {
+      "engine": {
+        "name": "engine",
+        "tooltip": "Selección del motor de procesamiento."
+      },
+      "fixed_generation": {
+        "name": "fixed_generation",
+        "tooltip": "Si está desactivado, cada generación introducirá cierto grado de aleatoriedad, lo que dará lugar a resultados más diversos."
+      },
+      "flavor": {
+        "name": "flavor",
+        "tooltip": "Tipo de transferencia de estilo."
+      },
+      "image": {
+        "name": "image",
+        "tooltip": "La imagen a la que se aplicará la transferencia de estilo."
+      },
+      "portrait_mode": {
+        "name": "portrait_mode",
+        "tooltip": "Activa el modo retrato para mejoras faciales."
+      },
+      "prompt": {
+        "name": "prompt"
+      },
+      "reference_image": {
+        "name": "reference_image",
+        "tooltip": "La imagen de referencia de la que se extraerá el estilo."
+      },
+      "structure_strength": {
+        "name": "structure_strength",
+        "tooltip": "Mantiene la estructura de la imagen original."
+      },
+      "style_strength": {
+        "name": "style_strength",
+        "tooltip": "Porcentaje de intensidad del estilo."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "Mahiro": {
     "description": "Modifica la guía para escalar más en la 'dirección' del indicador positivo en lugar de la diferencia entre el indicador negativo.",
     "display_name": "¡Mahiro es tan linda que merece una mejor función de guía!! (。・ω・。)",
@@ -11209,19 +11412,28 @@
     }
   },
   "ResizeImageMaskNode": {
+    "description": "Redimensiona una imagen o máscara utilizando varios métodos de escalado.",
     "display_name": "Redimensionar Imagen/Máscara",
     "inputs": {
       "input": {
         "name": "input"
       },
       "resize_type": {
-        "name": "resize_type"
+        "name": "resize_type",
+        "tooltip": "Selecciona cómo redimensionar: por dimensiones exactas, factor de escala, igualando otra imagen, etc."
       },
-      "resize_type_multiplier": {
-        "name": "multiplier"
+      "resize_type_crop": {
+        "name": "recortar"
+      },
+      "resize_type_height": {
+        "name": "altura"
+      },
+      "resize_type_width": {
+        "name": "anchura"
       },
       "scale_method": {
-        "name": "scale_method"
+        "name": "scale_method",
+        "tooltip": "Algoritmo de interpolación. 'area' es mejor para reducir tamaño, 'lanczos' para aumentar tamaño, 'nearest-exact' para pixel art."
       }
     },
     "outputs": {
@@ -13355,6 +13567,84 @@
       }
     }
   },
+  "TencentImageToModelNode": {
+    "display_name": "Hunyuan3D: Imagen(es) a Modelo (Pro)",
+    "inputs": {
+      "control_after_generate": {
+        "name": "controlar_tras_generar"
+      },
+      "face_count": {
+        "name": "número_de_caras"
+      },
+      "generate_type": {
+        "name": "tipo_de_generación"
+      },
+      "generate_type_pbr": {
+        "name": "pbr"
+      },
+      "image": {
+        "name": "imagen"
+      },
+      "image_back": {
+        "name": "imagen_trasera"
+      },
+      "image_left": {
+        "name": "imagen_izquierda"
+      },
+      "image_right": {
+        "name": "imagen_derecha"
+      },
+      "model": {
+        "name": "modelo",
+        "tooltip": "La opción LowPoly no está disponible para el modelo `3.1`."
+      },
+      "seed": {
+        "name": "semilla",
+        "tooltip": "La semilla controla si el nodo debe volver a ejecutarse; los resultados son no deterministas independientemente de la semilla."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "archivo_modelo",
+        "tooltip": null
+      }
+    }
+  },
+  "TencentTextToModelNode": {
+    "display_name": "Hunyuan3D: Texto a Modelo (Pro)",
+    "inputs": {
+      "control_after_generate": {
+        "name": "controlar_tras_generar"
+      },
+      "face_count": {
+        "name": "número_de_caras"
+      },
+      "generate_type": {
+        "name": "tipo_de_generación"
+      },
+      "generate_type_pbr": {
+        "name": "pbr"
+      },
+      "model": {
+        "name": "modelo",
+        "tooltip": "La opción LowPoly no está disponible para el modelo `3.1`."
+      },
+      "prompt": {
+        "name": "prompt",
+        "tooltip": "Admite hasta 1024 caracteres."
+      },
+      "seed": {
+        "name": "semilla",
+        "tooltip": "La semilla controla si el nodo debe volver a ejecutarse; los resultados son no deterministas independientemente de la semilla."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "archivo_modelo",
+        "tooltip": null
+      }
+    }
+  },
   "TextEncodeAceStepAudio": {
     "display_name": "TextEncodeAceStepAudio",
     "inputs": {
@@ -13450,6 +13740,40 @@
       }
     }
   },
+  "TextEncodeZImageOmni": {
+    "display_name": "TextEncodeZImageOmni",
+    "inputs": {
+      "auto_resize_images": {
+        "name": "auto_redimensionar_imágenes"
+      },
+      "clip": {
+        "name": "clip"
+      },
+      "image1": {
+        "name": "imagen1"
+      },
+      "image2": {
+        "name": "imagen2"
+      },
+      "image3": {
+        "name": "imagen3"
+      },
+      "image_encoder": {
+        "name": "codificador_de_imagen"
+      },
+      "prompt": {
+        "name": "instrucción"
+      },
+      "vae": {
+        "name": "vae"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "TextToLowercase": {
     "display_name": "Convertir texto a minúsculas",
     "inputs": {
@@ -13655,6 +13979,10 @@
         "name": "bucket_mode",
         "tooltip": "Habilita el modo de resolución por grupos. Cuando está habilitado, espera latentes preagrupados del nodo ResolutionBucket."
       },
+      "bypass_mode": {
+        "name": "bypass_mode",
+        "tooltip": "Activa el modo bypass para el entrenamiento. Cuando está activado, los adaptadores se aplican mediante hooks directos en vez de modificar los pesos. Útil para modelos cuantizados donde los pesos no pueden modificarse directamente."
+      },
       "control_after_generate": {
         "name": "controlar después de generar"
       },
@@ -15621,6 +15949,79 @@
       }
     }
   },
+  "WanInfiniteTalkToVideo": {
+    "display_name": "WanInfiniteTalkToVideo",
+    "inputs": {
+      "audio_encoder_output_1": {
+        "name": "salida codificador de audio 1"
+      },
+      "audio_scale": {
+        "name": "escala de audio"
+      },
+      "clip_vision_output": {
+        "name": "salida de clip visión"
+      },
+      "height": {
+        "name": "alto"
+      },
+      "length": {
+        "name": "longitud"
+      },
+      "mode": {
+        "name": "modo"
+      },
+      "model": {
+        "name": "modelo"
+      },
+      "model_patch": {
+        "name": "parche de modelo"
+      },
+      "motion_frame_count": {
+        "name": "número de fotogramas de movimiento",
+        "tooltip": "Número de fotogramas anteriores a usar como contexto de movimiento."
+      },
+      "negative": {
+        "name": "negativo"
+      },
+      "positive": {
+        "name": "positivo"
+      },
+      "previous_frames": {
+        "name": "fotogramas anteriores"
+      },
+      "start_image": {
+        "name": "imagen inicial"
+      },
+      "vae": {
+        "name": "vae"
+      },
+      "width": {
+        "name": "ancho"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "modelo",
+        "tooltip": null
+      },
+      "1": {
+        "name": "positivo",
+        "tooltip": null
+      },
+      "2": {
+        "name": "negativo",
+        "tooltip": null
+      },
+      "3": {
+        "name": "latente",
+        "tooltip": null
+      },
+      "4": {
+        "name": "imagen recortada",
+        "tooltip": null
+      }
+    }
+  },
   "WanMoveConcatTrack": {
     "display_name": "WanMoveConcatTrack",
     "inputs": {
@@ -16137,6 +16538,43 @@
       }
     }
   },
+  "WavespeedFlashVSRNode": {
+    "description": "Escalador de video rápido y de alta calidad que aumenta la resolución y restaura la claridad de videos de baja resolución o borrosos.",
+    "display_name": "FlashVSR Escalado de Video",
+    "inputs": {
+      "target_resolution": {
+        "name": "resolución_objetivo"
+      },
+      "video": {
+        "name": "video"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "WavespeedImageUpscaleNode": {
+    "description": "Aumenta la resolución y calidad de la imagen, escalando fotos a 4K u 8K para obtener resultados nítidos y detallados.",
+    "display_name": "WaveSpeed Escalado de Imagen",
+    "inputs": {
+      "image": {
+        "name": "imagen"
+      },
+      "model": {
+        "name": "modelo"
+      },
+      "target_resolution": {
+        "name": "resolución_objetivo"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "WebcamCapture": {
     "display_name": "Captura de Webcam",
     "inputs": {
diff --git a/src/locales/es/settings.json b/src/locales/es/settings.json
index c4126c0bb..68a482f7b 100644
--- a/src/locales/es/settings.json
+++ b/src/locales/es/settings.json
@@ -52,7 +52,8 @@
     }
   },
   "Comfy_Canvas_SelectionToolbox": {
-    "name": "Mostrar caja de herramientas de selección"
+    "name": "Mostrar caja de herramientas de selección",
+    "tooltip": "Muestra una barra de herramientas flotante cuando se seleccionan nodos, proporcionando acceso rápido a acciones comunes."
   },
   "Comfy_ConfirmClear": {
     "name": "Requerir confirmación al borrar el flujo de trabajo"
@@ -147,7 +148,8 @@
       "Linear": "Lineal",
       "Spline": "Spline",
       "Straight": "Recto"
-    }
+    },
+    "tooltip": "Controla la apariencia y visibilidad de los enlaces de conexión entre nodos en el lienzo."
   },
   "Comfy_Load3D_3DViewerEnable": {
     "name": "Habilitar visor 3D (Beta)",
@@ -272,6 +274,10 @@
   "Comfy_Node_AllowImageSizeDraw": {
     "name": "Mostrar ancho × altura debajo de la vista previa de la imagen"
   },
+  "Comfy_Node_AlwaysShowAdvancedWidgets": {
+    "name": "Mostrar siempre los widgets avanzados en todos los nodos",
+    "tooltip": "Cuando está activado, los widgets avanzados siempre son visibles en todos los nodos sin necesidad de expandirlos individualmente."
+  },
   "Comfy_Node_AutoSnapLinkToSlot": {
     "name": "Enlace de ajuste automático a la ranura del nodo",
     "tooltip": "Al arrastrar un enlace sobre un nodo, el enlace se ajustará automáticamente a una ranura de entrada viable en el nodo"
@@ -470,6 +476,7 @@
     "tooltip": "El punto de control bezier desplazado desde el punto central de reenrutamiento"
   },
   "pysssss_SnapToGrid": {
-    "name": "Siempre ajustar a la cuadrícula"
+    "name": "Siempre ajustar a la cuadrícula",
+    "tooltip": "Cuando está activado, los nodos se alinearán automáticamente a la cuadrícula al moverlos o cambiar su tamaño."
   }
 }
diff --git a/src/locales/fa/main.json b/src/locales/fa/main.json
index 9d48620d5..ffa846a76 100644
--- a/src/locales/fa/main.json
+++ b/src/locales/fa/main.json
@@ -24,6 +24,7 @@
     "assets": "دارایی‌ها",
     "baseModels": "مدل‌های پایه",
     "browseAssets": "مرور دارایی‌ها",
+    "byType": "بر اساس نوع",
     "checkpoints": "چک‌پوینت‌ها",
     "civitaiLinkExample": "{example} {link}",
     "civitaiLinkExampleStrong": "مثال:",
@@ -45,6 +46,10 @@
       "failed": "دانلود ناموفق بود",
       "inProgress": "در حال دانلود {assetName}..."
     },
+    "emptyImported": {
+      "canImport": "هنوز مدلی وارد نشده است. برای افزودن مدل خود، روی «وارد کردن مدل» کلیک کنید.",
+      "restricted": "مدل‌های شخصی فقط برای سطح Creator و بالاتر در دسترس هستند."
+    },
     "errorFileTooLarge": "فایل از حداکثر اندازه مجاز بزرگ‌تر است",
     "errorFormatNotAllowed": "فقط فرمت SafeTensor مجاز است",
     "errorModelTypeNotSupported": "این نوع مدل پشتیبانی نمی‌شود",
@@ -61,6 +66,7 @@
     "finish": "پایان",
     "genericLinkPlaceholder": "لینک را اینجا وارد کنید",
     "importAnother": "وارد کردن مورد دیگر",
+    "imported": "وارد شده",
     "jobId": "شناسه کار: {jobId}",
     "loadingModels": "در حال بارگذاری {type}...",
     "maxFileSize": "حداکثر اندازه فایل: {size}",
@@ -70,6 +76,30 @@
       "threeDModelPlaceholder": "مدل سه‌بعدی"
     },
     "modelAssociatedWithLink": "مدل مرتبط با لینکی که وارد کردید:",
+    "modelInfo": {
+      "addBaseModel": "افزودن مدل پایه...",
+      "addTag": "افزودن برچسب...",
+      "additionalTags": "برچسب‌های اضافی",
+      "baseModelUnknown": "مدل پایه نامشخص",
+      "basicInfo": "اطلاعات پایه",
+      "compatibleBaseModels": "مدل‌های پایه سازگار",
+      "description": "توضیحات",
+      "descriptionNotSet": "توضیحی تنظیم نشده است",
+      "descriptionPlaceholder": "یک توضیح برای این مدل اضافه کنید...",
+      "displayName": "نام نمایشی",
+      "editDisplayName": "ویرایش نام نمایشی",
+      "fileName": "نام فایل",
+      "modelDescription": "توضیحات مدل",
+      "modelTagging": "برچسب‌گذاری مدل",
+      "modelType": "نوع مدل",
+      "noAdditionalTags": "برچسب اضافی وجود ندارد",
+      "selectModelPrompt": "یک مدل را برای مشاهده اطلاعات آن انتخاب کنید",
+      "selectModelType": "انتخاب نوع مدل...",
+      "source": "منبع",
+      "title": "اطلاعات مدل",
+      "triggerPhrases": "عبارات فعال‌ساز",
+      "viewOnSource": "مشاهده در {source}"
+    },
     "modelName": "نام مدل",
     "modelNamePlaceholder": "یک نام برای این مدل وارد کنید",
     "modelTypeSelectorLabel": "نوع مدل چیست؟",
@@ -684,6 +714,7 @@
     "clearAll": "پاک‌سازی همه",
     "clearFilters": "پاک‌سازی فیلترها",
     "close": "بستن",
+    "closeDialog": "بستن پنجره",
     "color": "رنگ",
     "comfy": "Comfy",
     "comfyOrgLogoAlt": "لوگوی ComfyOrg",
@@ -700,6 +731,7 @@
     "control_before_generate": "کنترل پیش از تولید",
     "copied": "کپی شد",
     "copy": "کپی",
+    "copyAll": "کپی همه",
     "copyJobId": "کپی شناسه وظیفه",
     "copyToClipboard": "کپی در کلیپ‌بورد",
     "copyURL": "کپی آدرس",
@@ -762,6 +794,8 @@
     "goToNode": "رفتن به node",
     "graphNavigation": "ناوبری گراف",
     "halfSpeed": "۰.۵x",
+    "hideLeftPanel": "پنهان کردن پنل چپ",
+    "hideRightPanel": "پنهان کردن پنل راست",
     "icon": "آیکون",
     "imageFailedToLoad": "بارگذاری تصویر ناموفق بود",
     "imagePreview": "پیش‌نمایش تصویر - برای جابجایی بین تصاویر از کلیدهای جهت‌دار استفاده کنید",
@@ -803,6 +837,7 @@
     "name": "نام",
     "newFolder": "پوشه جدید",
     "next": "بعدی",
+    "nightly": "نسخه شبانه",
     "no": "خیر",
     "noAudioRecorded": "هیچ صدایی ضبط نشد",
     "noItems": "هیچ موردی وجود ندارد",
@@ -817,6 +852,7 @@
     "nodeSlotsError": "خطا در slotهای node",
     "nodeWidgetsError": "خطا در ابزارک‌های node",
     "nodes": "nodeها",
+    "nodesCount": "{count} نود | {count} نود | {count} نود",
     "nodesRunning": "nodeها در حال اجرا هستند",
     "none": "هیچ‌کدام",
     "nothingToCopy": "موردی برای کپی وجود ندارد",
@@ -891,7 +927,9 @@
     "selectedFile": "فایل انتخاب‌شده",
     "setAsBackground": "تنظیم به عنوان پس‌زمینه",
     "settings": "تنظیمات",
+    "showLeftPanel": "نمایش پنل چپ",
     "showReport": "نمایش گزارش",
+    "showRightPanel": "نمایش پنل راست",
     "singleSelectDropdown": "لیست کشویی تک‌انتخابی",
     "sort": "مرتب‌سازی",
     "source": "منبع",
@@ -914,6 +952,7 @@
     "updating": "در حال به‌روزرسانی {id}",
     "upload": "بارگذاری",
     "usageHint": "راهنمای استفاده",
+    "use": "استفاده",
     "user": "کاربر",
     "versionMismatchWarning": "هشدار ناسازگاری نسخه",
     "versionMismatchWarningMessage": "{warning}: {detail} برای راهنمای به‌روزرسانی به https://docs.comfy.org/installation/update_comfyui#common-update-issues مراجعه کنید.",
@@ -921,11 +960,10 @@
     "videoPreview": "پیش‌نمایش ویدیو - برای جابجایی بین ویدیوها از کلیدهای جهت‌دار استفاده کنید",
     "viewImageOfTotal": "مشاهده تصویر {index} از {total}",
     "viewVideoOfTotal": "مشاهده ویدیو {index} از {total}",
-    "vitePreloadErrorMessage": "نسخه جدیدی از برنامه منتشر شده است. آیا مایل به بارگذاری مجدد هستید؟\nدر غیر این صورت، برخی بخش‌های برنامه ممکن است به درستی کار نکنند.\nمی‌توانید رد کنید و قبل از بارگذاری مجدد، پیشرفت خود را ذخیره کنید.",
-    "vitePreloadErrorTitle": "نسخه جدید موجود است",
     "volume": "حجم صدا",
     "warning": "هشدار",
-    "workflow": "workflow"
+    "workflow": "workflow",
+    "you": "شما"
   },
   "graphCanvasMenu": {
     "fitView": "تطبیق با نما",
@@ -1617,17 +1655,25 @@
       "title": "این workflow دارای nodeهای مفقود است"
     }
   },
+  "nightly": {
+    "badge": {
+      "label": "نسخه پیش‌نمایش",
+      "tooltip": "شما در حال استفاده از نسخه شبانه ComfyUI هستید. لطفاً با استفاده از دکمه بازخورد، نظرات خود را درباره این قابلیت‌ها به اشتراک بگذارید."
+    }
+  },
   "nodeCategories": {
     "": "",
     "3d": "سه‌بعدی",
     "3d_models": "مدل‌های سه‌بعدی",
     "BFL": "BFL",
+    "Bria": "Bria",
     "ByteDance": "ByteDance",
     "Gemini": "Gemini",
     "Ideogram": "Ideogram",
     "Kling": "Kling",
     "LTXV": "LTXV",
     "Luma": "Luma",
+    "Magnific": "Magnific",
     "Meshy": "Meshy",
     "MiniMax": "MiniMax",
     "Moonvalley Marey": "Moonvalley Marey",
@@ -1638,11 +1684,13 @@
     "Runway": "Runway",
     "Sora": "Sora",
     "Stability AI": "Stability AI",
+    "Tencent": "Tencent",
     "Topaz": "Topaz",
     "Tripo": "Tripo",
     "Veo": "Veo",
     "Vidu": "Vidu",
     "Wan": "Wan",
+    "WaveSpeed": "WaveSpeed",
     "_for_testing": "_for_testing",
     "advanced": "پیشرفته",
     "animation": "انیمیشن",
@@ -1852,6 +1900,7 @@
     },
     "groupSettings": "تنظیمات گروه",
     "groups": "گروه‌ها",
+    "hideAdvancedInputsButton": "مخفی کردن ورودی‌های پیشرفته",
     "hideInput": "مخفی کردن ورودی",
     "info": "اطلاعات",
     "inputs": "ورودی‌ها",
@@ -2084,6 +2133,7 @@
     "NodeLibrary": "کتابخانه Node",
     "Nodes 2_0": "Nodes 2.0",
     "Notification Preferences": "تنظیمات اعلان",
+    "Other": "سایر",
     "PLY": "PLY",
     "PlanCredits": "طرح و اعتبارات",
     "Pointer": "اشاره‌گر",
@@ -2103,7 +2153,8 @@
     "Vue Nodes": "Nodes 2.0",
     "VueNodes": "Nodes 2.0",
     "Window": "پنجره",
-    "Workflow": "Workflow"
+    "Workflow": "Workflow",
+    "Workspace": "محیط کاری"
   },
   "shape": {
     "CARD": "کارت",
@@ -2129,12 +2180,14 @@
     "viewControls": "کنترل‌های نمایش"
   },
   "sideToolbar": {
+    "activeJobStatus": "وضعیت کار فعال: {status}",
     "assets": "دارایی‌ها",
     "backToAssets": "بازگشت به همه دارایی‌ها",
     "browseTemplates": "مرور قالب‌های نمونه",
     "downloads": "دانلودها",
     "generatedAssetsHeader": "دارایی‌های تولیدشده",
     "helpCenter": "مرکز راهنما",
+    "importedAssetsHeader": "دارایی‌های واردشده",
     "labels": {
       "assets": "دارایی‌ها",
       "console": "کنسول",
@@ -2190,6 +2243,7 @@
     "queue": "صف",
     "queueProgressOverlay": {
       "activeJobs": "{count} کار فعال",
+      "activeJobsShort": "{count} فعال | {count} فعال",
       "activeJobsSuffix": "کار فعال",
       "cancelJobTooltip": "لغو کار",
       "clearHistory": "پاک‌سازی تاریخچه صف کار",
@@ -2278,9 +2332,15 @@
     "beta": "بتا",
     "billedMonthly": "صورتحساب ماهانه",
     "billedYearly": "{total} صورتحساب سالانه",
+    "billingComingSoon": {
+      "message": "صورت‌حساب تیمی به‌زودی ارائه می‌شود. به‌زودی می‌توانید برای فضای کاری خود با قیمت هر نفر اشتراک تهیه کنید. برای به‌روزرسانی‌ها همراه ما باشید.",
+      "title": "به‌زودی"
+    },
+    "cancelSubscription": "لغو اشتراک",
     "changeTo": "تغییر به {plan}",
     "comfyCloud": "Comfy Cloud",
     "comfyCloudLogo": "لوگوی Comfy Cloud",
+    "contactOwnerToSubscribe": "برای فعال‌سازی اشتراک با مالک محیط کاری تماس بگیرید",
     "contactUs": "تماس با ما",
     "creditsRemainingThisMonth": "شامل شده (شارژ مجدد {date})",
     "creditsRemainingThisYear": "شامل شده (شارژ مجدد {date})",
@@ -2293,6 +2353,7 @@
     "haveQuestions": "سوالی دارید یا به دنبال راهکار سازمانی هستید؟",
     "invoiceHistory": "تاریخچه فاکتورها",
     "learnMore": "اطلاعات بیشتر",
+    "managePayment": "مدیریت پرداخت",
     "managePlan": "مدیریت طرح",
     "manageSubscription": "مدیریت اشتراک",
     "maxDuration": {
@@ -2328,6 +2389,7 @@
     "subscribeToComfyCloud": "اشتراک در Comfy Cloud",
     "subscribeToRun": "اشتراک",
     "subscribeToRunFull": "اشتراک برای اجرا",
+    "subscriptionRequiredMessage": "برای اجرای workflowها در Cloud، اشتراک لازم است.",
     "tierNameYearly": "{name} سالانه",
     "tiers": {
       "creator": {
@@ -2359,6 +2421,7 @@
     "viewMoreDetails": "مشاهده جزئیات بیشتر",
     "viewMoreDetailsPlans": "مشاهده جزئیات بیشتر درباره طرح‌ها و قیمت‌ها",
     "viewUsageHistory": "مشاهده تاریخچه استفاده",
+    "workspaceNotSubscribed": "این محیط کاری اشتراک فعال ندارد",
     "yearly": "سالانه",
     "yearlyCreditsLabel": "کل اعتبار سالانه",
     "yearlyDiscount": "٪۲۰ تخفیف",
@@ -2460,6 +2523,7 @@
     "failedToLoadModel": "بارگذاری مدل سه‌بعدی انجام نشد",
     "failedToPurchaseCredits": "خرید اعتبار انجام نشد: {error}",
     "failedToQueue": "صف‌بندی انجام نشد",
+    "failedToSaveDraft": "ذخیره پیش‌نویس workflow ناموفق بود",
     "failedToToggleCamera": "تغییر وضعیت دوربین انجام نشد",
     "failedToToggleGrid": "تغییر وضعیت شبکه انجام نشد",
     "failedToUpdateBackgroundColor": "به‌روزرسانی رنگ پس‌زمینه انجام نشد",
@@ -2508,7 +2572,8 @@
     "notSet": "تنظیم نشده",
     "provider": "ارائه‌دهنده ورود",
     "title": "تنظیمات حساب کاربری من",
-    "updatePassword": "به‌روزرسانی گذرواژه"
+    "updatePassword": "به‌روزرسانی گذرواژه",
+    "workspaceSettings": "تنظیمات محیط کاری"
   },
   "validation": {
     "descriptionRequired": "توضیحات الزامی است",
@@ -2599,6 +2664,9 @@
     "saveWorkflow": "ذخیره workflow"
   },
   "workspace": {
+    "addedToWorkspace": "شما به {workspaceName} اضافه شدید",
+    "inviteAccepted": "دعوت پذیرفته شد",
+    "inviteFailed": "پذیرش دعوت ناموفق بود",
     "unsavedChanges": {
       "message": "شما تغییرات ذخیره‌نشده دارید. آیا می‌خواهید آن‌ها را رها کرده و فضای کاری را تغییر دهید؟",
       "title": "تغییرات ذخیره‌نشده"
@@ -2613,6 +2681,128 @@
       "workspaceNotFound": "فضای کاری پیدا نشد."
     }
   },
+  "workspacePanel": {
+    "createWorkspaceDialog": {
+      "create": "ایجاد",
+      "message": "محیط‌های کاری به اعضا اجازه می‌دهند از یک اعتبار مشترک استفاده کنند. پس از ایجاد، شما مالک خواهید بود.",
+      "nameLabel": "نام محیط کاری*",
+      "namePlaceholder": "نام محیط کاری را وارد کنید",
+      "title": "ایجاد محیط کاری جدید"
+    },
+    "dashboard": {
+      "placeholder": "تنظیمات داشبورد فضای کاری"
+    },
+    "deleteDialog": {
+      "message": "هرگونه اعتبار یا دارایی ذخیره‌نشده از بین خواهد رفت. این عملیات قابل بازگشت نیست.",
+      "messageWithName": "حذف «{name}»؟ هرگونه اعتبار یا دارایی ذخیره‌نشده از بین خواهد رفت. این عملیات قابل بازگشت نیست.",
+      "title": "حذف این محیط کاری؟"
+    },
+    "editWorkspaceDialog": {
+      "nameLabel": "نام محیط کاری",
+      "save": "ذخیره",
+      "title": "ویرایش جزئیات محیط کاری"
+    },
+    "invite": "دعوت",
+    "inviteLimitReached": "شما به حداکثر تعداد ۵۰ عضو رسیده‌اید",
+    "inviteMember": "دعوت عضو",
+    "inviteMemberDialog": {
+      "createLink": "ایجاد لینک",
+      "linkCopied": "کپی شد",
+      "linkCopyFailed": "کپی لینک ناموفق بود",
+      "linkStep": {
+        "copyLink": "کپی لینک",
+        "done": "انجام شد",
+        "message": "اطمینان حاصل کنید که حساب کاربری او از این ایمیل استفاده می‌کند.",
+        "title": "این لینک را برای شخص ارسال کنید"
+      },
+      "message": "یک لینک دعوت قابل اشتراک‌گذاری برای ارسال به شخص ایجاد کنید",
+      "placeholder": "ایمیل شخص را وارد کنید",
+      "title": "دعوت یک نفر به این فضای کاری"
+    },
+    "leaveDialog": {
+      "leave": "خروج",
+      "message": "تا زمانی که با مالک محیط کاری تماس نگیرید، امکان پیوستن مجدد نخواهید داشت.",
+      "title": "خروج از این محیط کاری؟"
+    },
+    "members": {
+      "actions": {
+        "copyLink": "کپی لینک دعوت",
+        "removeMember": "حذف عضو",
+        "revokeInvite": "لغو دعوت"
+      },
+      "columns": {
+        "expiryDate": "تاریخ انقضا",
+        "inviteDate": "تاریخ دعوت",
+        "joinDate": "تاریخ پیوستن"
+      },
+      "createNewWorkspace": "یک فضای کاری جدید ایجاد کنید.",
+      "membersCount": "{count}/۵۰ عضو",
+      "noInvites": "هیچ دعوت‌نامه‌ای در انتظار نیست",
+      "noMembers": "هیچ عضوی وجود ندارد",
+      "pendingInvitesCount": "{count} دعوت‌نامه در انتظار | {count} دعوت‌نامه در انتظار",
+      "personalWorkspaceMessage": "در حال حاضر نمی‌توانید اعضای دیگری به فضای کاری شخصی خود دعوت کنید. برای افزودن اعضا به یک فضای کاری،",
+      "tabs": {
+        "active": "فعال",
+        "pendingCount": "در انتظار ({count})"
+      }
+    },
+    "menu": {
+      "deleteWorkspace": "حذف محیط کاری",
+      "deleteWorkspaceDisabledTooltip": "ابتدا اشتراک فعال محیط کاری خود را لغو کنید",
+      "editWorkspace": "ویرایش جزئیات محیط کاری",
+      "leaveWorkspace": "خروج از محیط کاری"
+    },
+    "removeMemberDialog": {
+      "error": "حذف عضو ناموفق بود",
+      "message": "این عضو از فضای کاری شما حذف خواهد شد. اعتباراتی که استفاده کرده‌اند بازگردانده نخواهد شد.",
+      "remove": "حذف عضو",
+      "success": "عضو حذف شد",
+      "title": "این عضو حذف شود؟"
+    },
+    "revokeInviteDialog": {
+      "message": "این عضو دیگر نمی‌تواند به فضای کاری شما بپیوندد. لینک دعوت او نامعتبر خواهد شد.",
+      "revoke": "لغو دعوت",
+      "title": "دعوت این شخص لغو شود؟"
+    },
+    "tabs": {
+      "dashboard": "داشبورد",
+      "membersCount": "اعضا ({count})",
+      "planCredits": "پلن و اعتبارها"
+    },
+    "toast": {
+      "failedToCreateWorkspace": "ایجاد محیط کاری ناموفق بود",
+      "failedToDeleteWorkspace": "حذف محیط کاری ناموفق بود",
+      "failedToFetchWorkspaces": "بارگذاری فضاهای کاری ناموفق بود",
+      "failedToLeaveWorkspace": "خروج از محیط کاری ناموفق بود",
+      "failedToUpdateWorkspace": "به‌روزرسانی محیط کاری ناموفق بود",
+      "workspaceCreated": {
+        "message": "برای یک طرح اشتراک ثبت‌نام کنید، هم‌تیمی‌ها را دعوت کنید و همکاری را آغاز نمایید.",
+        "subscribe": "اشتراک",
+        "title": "فضای کاری ایجاد شد"
+      },
+      "workspaceDeleted": {
+        "message": "فضای کاری به طور دائمی حذف شد.",
+        "title": "فضای کاری حذف شد"
+      },
+      "workspaceLeft": {
+        "message": "شما فضای کاری را ترک کردید.",
+        "title": "ترک فضای کاری"
+      },
+      "workspaceUpdated": {
+        "message": "جزئیات محیط کاری ذخیره شد.",
+        "title": "محیط کاری به‌روزرسانی شد"
+      }
+    }
+  },
+  "workspaceSwitcher": {
+    "createWorkspace": "ایجاد محیط کاری جدید",
+    "maxWorkspacesReached": "شما فقط می‌توانید مالک ۱۰ محیط کاری باشید. برای ایجاد محیط کاری جدید، یکی را حذف کنید.",
+    "personal": "شخصی",
+    "roleMember": "عضو",
+    "roleOwner": "مالک",
+    "subscribe": "اشتراک",
+    "switchWorkspace": "تغییر محیط کاری"
+  },
   "zoomControls": {
     "hideMinimap": "مخفی‌سازی نقشه کوچک",
     "label": "کنترل‌های بزرگ‌نمایی",
diff --git a/src/locales/fa/nodeDefs.json b/src/locales/fa/nodeDefs.json
index fb3914db2..5002b08be 100644
--- a/src/locales/fa/nodeDefs.json
+++ b/src/locales/fa/nodeDefs.json
@@ -328,6 +328,68 @@
       }
     }
   },
+  "BriaImageEditNode": {
+    "description": "ویرایش تصاویر با استفاده از جدیدترین مدل Bria",
+    "display_name": "ویرایش تصویر Bria",
+    "inputs": {
+      "control_after_generate": {
+        "name": "کنترل پس از تولید"
+      },
+      "guidance_scale": {
+        "name": "مقیاس راهنما",
+        "tooltip": "مقدار بالاتر باعث می‌شود تصویر بیشتر از پرامپت پیروی کند."
+      },
+      "image": {
+        "name": "تصویر"
+      },
+      "mask": {
+        "name": "ماسک",
+        "tooltip": "در صورت عدم انتخاب، ویرایش بر کل تصویر اعمال می‌شود."
+      },
+      "model": {
+        "name": "مدل"
+      },
+      "moderation": {
+        "name": "تنظیمات نظارت",
+        "tooltip": "تنظیمات نظارت"
+      },
+      "moderation_prompt_content_moderation": {
+        "name": "نظارت بر محتوای پرامپت"
+      },
+      "moderation_visual_input_moderation": {
+        "name": "نظارت بر ورودی تصویری"
+      },
+      "moderation_visual_output_moderation": {
+        "name": "نظارت بر خروجی تصویری"
+      },
+      "negative_prompt": {
+        "name": "پرامپت منفی"
+      },
+      "prompt": {
+        "name": "پرامپت",
+        "tooltip": "دستورالعمل برای ویرایش تصویر"
+      },
+      "seed": {
+        "name": "بذر"
+      },
+      "steps": {
+        "name": "گام‌ها"
+      },
+      "structured_prompt": {
+        "name": "پرامپت ساختاریافته",
+        "tooltip": "یک رشته شامل پرامپت ویرایش ساختاریافته در قالب JSON. برای کنترل دقیق و برنامه‌نویسی شده، به جای پرامپت معمولی از این گزینه استفاده کنید."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      },
+      "1": {
+        "name": "پرامپت ساختاریافته",
+        "tooltip": null
+      }
+    }
+  },
   "ByteDanceFirstLastFrameNode": {
     "description": "تولید ویدیو با استفاده از پرامپت و اولین و آخرین فریم.",
     "display_name": "تبدیل اولین و آخرین فریم به ویدیو ByteDance",
@@ -385,43 +447,6 @@
       }
     }
   },
-  "ByteDanceImageEditNode": {
-    "description": "ویرایش تصاویر با استفاده از مدل‌های ByteDance از طریق API بر اساس پرامپت",
-    "display_name": "ویرایش تصویر ByteDance",
-    "inputs": {
-      "control_after_generate": {
-        "name": "کنترل پس از تولید"
-      },
-      "guidance_scale": {
-        "name": "guidance_scale",
-        "tooltip": "مقدار بالاتر باعث می‌شود تصویر بیشتر از پرامپت پیروی کند"
-      },
-      "image": {
-        "name": "تصویر",
-        "tooltip": "تصویر پایه برای ویرایش"
-      },
-      "model": {
-        "name": "مدل"
-      },
-      "prompt": {
-        "name": "پرامپت",
-        "tooltip": "دستورالعمل ویرایش تصویر"
-      },
-      "seed": {
-        "name": "seed",
-        "tooltip": "seed مورد استفاده برای تولید"
-      },
-      "watermark": {
-        "name": "واترمارک",
-        "tooltip": "آیا واترمارک «تولید شده توسط هوش مصنوعی» به تصویر اضافه شود یا خیر"
-      }
-    },
-    "outputs": {
-      "0": {
-        "tooltip": null
-      }
-    }
-  },
   "ByteDanceImageNode": {
     "description": "تولید تصویر با استفاده از مدل‌های ByteDance از طریق API بر اساس پرامپت",
     "display_name": "تصویر ByteDance",
@@ -2033,14 +2058,18 @@
       "choice": {
         "name": "انتخاب"
       },
-      "option0": {
+      "index": {
+      },
+      "option1": {
       }
     },
-    "outputs": {
-      "0": {
+    "outputs": [
+      null,
+      {
+        "name": "INDEX",
         "tooltip": null
       }
-    }
+    ]
   },
   "DiffControlNetLoader": {
     "display_name": "بارگذاری مدل ControlNet (diff)",
@@ -6405,6 +6434,60 @@
       }
     }
   },
+  "LoraLoaderBypass": {
+    "description": "اعمال LoRA در حالت bypass. برخلاف LoRA معمولی، این روش وزن‌های مدل را تغییر نمی‌دهد بلکه محاسبات LoRA را در طول عبور رو به جلو تزریق می‌کند. مناسب برای سناریوهای آموزش.",
+    "display_name": "بارگذاری LoRA (حالت Bypass) (برای اشکال‌زدایی)",
+    "inputs": {
+      "clip": {
+        "name": "clip",
+        "tooltip": "مدل CLIP که LoRA بر روی آن اعمال می‌شود."
+      },
+      "lora_name": {
+        "name": "lora_name",
+        "tooltip": "نام LoRA."
+      },
+      "model": {
+        "name": "مدل",
+        "tooltip": "مدل diffusion که LoRA بر روی آن اعمال می‌شود."
+      },
+      "strength_clip": {
+        "name": "قدرت_clip",
+        "tooltip": "میزان شدت تغییر مدل CLIP. این مقدار می‌تواند منفی باشد."
+      },
+      "strength_model": {
+        "name": "قدرت_مدل",
+        "tooltip": "میزان شدت تغییر مدل diffusion. این مقدار می‌تواند منفی باشد."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": "مدل diffusion تغییر یافته."
+      },
+      "1": {
+        "tooltip": "مدل CLIP تغییر یافته."
+      }
+    }
+  },
+  "LoraLoaderBypassModelOnly": {
+    "description": "اعمال LoRA در حالت bypass. برخلاف LoRA معمولی، این روش وزن‌های مدل را تغییر نمی‌دهد بلکه محاسبات LoRA را در طول عبور رو به جلو تزریق می‌کند. مناسب برای سناریوهای آموزش.",
+    "display_name": "بارگذاری LoRA (حالت Bypass، فقط مدل) (برای اشکال‌زدایی)",
+    "inputs": {
+      "lora_name": {
+        "name": "lora_name"
+      },
+      "model": {
+        "name": "مدل"
+      },
+      "strength_model": {
+        "name": "قدرت_مدل"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": "مدل diffusion تغییر یافته."
+      }
+    }
+  },
   "LoraLoaderModelOnly": {
     "description": "LoRAها برای تغییر مدل‌های diffusion و CLIP استفاده می‌شوند و نحوه حذف نویز از latents را تغییر می‌دهند، مانند اعمال سبک‌ها. چندین node LoRA می‌توانند به هم متصل شوند.",
     "display_name": "LoraLoaderModelOnly",
@@ -6773,6 +6856,126 @@
       }
     }
   },
+  "MagnificImageRelightNode": {
+    "description": "بازنورپردازی تصویر با تنظیمات نور و انتقال نور مبتنی بر مرجع (اختیاری).",
+    "display_name": "بازنورپردازی تصویر Magnific",
+    "inputs": {
+      "advanced_settings": {
+        "name": "تنظیمات_پیشرفته",
+        "tooltip": "گزینه‌های تنظیم دقیق برای کنترل پیشرفته نورپردازی."
+      },
+      "change_background": {
+        "name": "تغییر_پس‌زمینه",
+        "tooltip": "پس‌زمینه را بر اساس پرامپت/مرجع تغییر می‌دهد."
+      },
+      "image": {
+        "name": "تصویر",
+        "tooltip": "تصویری که قرار است بازنورپردازی شود."
+      },
+      "interpolate_from_original": {
+        "name": "درون‌یابی_از_مبدأ",
+        "tooltip": "آزادی تولید را محدود می‌کند تا با تصویر اصلی بیشتر مطابقت داشته باشد."
+      },
+      "light_transfer_strength": {
+        "name": "شدت_انتقال_نور",
+        "tooltip": "شدت اعمال انتقال نور."
+      },
+      "preserve_details": {
+        "name": "حفظ_جزئیات",
+        "tooltip": "بافت و جزئیات ریز تصویر اصلی را حفظ می‌کند."
+      },
+      "prompt": {
+        "name": "پرامپت",
+        "tooltip": "راهنمای توصیفی برای نورپردازی. از نشانه‌گذاری تأکید (۱-۱.۴) پشتیبانی می‌کند."
+      },
+      "reference_image": {
+        "name": "تصویر_مرجع",
+        "tooltip": "تصویر مرجع اختیاری برای انتقال نور از آن."
+      },
+      "style": {
+        "name": "سبک",
+        "tooltip": "ترجیح خروجی از نظر سبک."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "MagnificImageSkinEnhancerNode": {
+    "description": "بهبود پوست برای پرتره‌ها با حالت‌های پردازشی مختلف.",
+    "display_name": "بهبود پوست تصویر Magnific",
+    "inputs": {
+      "image": {
+        "name": "تصویر",
+        "tooltip": "تصویر پرتره‌ای که باید بهبود یابد."
+      },
+      "mode": {
+        "name": "حالت",
+        "tooltip": "حالت پردازش: creative برای بهبود هنری، faithful برای حفظ ظاهر اصلی، flexible برای بهینه‌سازی هدفمند."
+      },
+      "sharpen": {
+        "name": "شارپ‌سازی",
+        "tooltip": "سطح شدت شارپ‌سازی."
+      },
+      "smart_grain": {
+        "name": "دانه‌بندی_هوشمند",
+        "tooltip": "سطح شدت دانه‌بندی هوشمند."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "MagnificImageStyleTransferNode": {
+    "description": "سبک را از یک تصویر مرجع به تصویر ورودی خود منتقل کنید.",
+    "display_name": "انتقال سبک تصویر Magnific",
+    "inputs": {
+      "engine": {
+        "name": "engine",
+        "tooltip": "انتخاب موتور پردازش."
+      },
+      "fixed_generation": {
+        "name": "fixed_generation",
+        "tooltip": "در صورت غیرفعال بودن، هر بار تولید تصویر مقداری تصادفی بودن به همراه دارد که منجر به نتایج متنوع‌تر می‌شود."
+      },
+      "flavor": {
+        "name": "flavor",
+        "tooltip": "نوع انتقال سبک."
+      },
+      "image": {
+        "name": "image",
+        "tooltip": "تصویری که قرار است انتقال سبک روی آن اعمال شود."
+      },
+      "portrait_mode": {
+        "name": "portrait_mode",
+        "tooltip": "فعال‌سازی حالت پرتره برای بهبود چهره."
+      },
+      "prompt": {
+        "name": "prompt"
+      },
+      "reference_image": {
+        "name": "reference_image",
+        "tooltip": "تصویر مرجعی که سبک از آن استخراج می‌شود."
+      },
+      "structure_strength": {
+        "name": "structure_strength",
+        "tooltip": "ساختار تصویر اصلی را حفظ می‌کند."
+      },
+      "style_strength": {
+        "name": "style_strength",
+        "tooltip": "درصد قدرت سبک."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "Mahiro": {
     "description": "راهنمایی را به گونه‌ای تغییر می‌دهد که بیشتر بر «جهت» پرامپت مثبت تمرکز کند تا تفاوت بین پرامپت منفی.",
     "display_name": "Mahiro CFG",
@@ -11225,19 +11428,28 @@
     }
   },
   "ResizeImageMaskNode": {
+    "description": "تغییر اندازه تصویر یا mask با استفاده از روش‌های مختلف مقیاس‌گذاری.",
     "display_name": "تغییر اندازه تصویر/ماسک",
     "inputs": {
       "input": {
         "name": "ورودی"
       },
       "resize_type": {
-        "name": "نوع تغییر اندازه"
+        "name": "نوع تغییر اندازه",
+        "tooltip": "نحوه تغییر اندازه را انتخاب کنید: بر اساس ابعاد دقیق، ضریب مقیاس، تطبیق با تصویر دیگر و غیره."
       },
-      "resize_type_multiplier": {
-        "name": "ضریب"
+      "resize_type_crop": {
+        "name": "برش"
+      },
+      "resize_type_height": {
+        "name": "ارتفاع"
+      },
+      "resize_type_width": {
+        "name": "عرض"
       },
       "scale_method": {
-        "name": "روش مقیاس‌دهی"
+        "name": "روش مقیاس‌دهی",
+        "tooltip": "الگوریتم درون‌یابی. 'area' برای کاهش اندازه بهترین است، 'lanczos' برای افزایش اندازه، و 'nearest-exact' برای هنر پیکسلی مناسب است."
       }
     },
     "outputs": {
@@ -13382,6 +13594,84 @@
       }
     }
   },
+  "TencentImageToModelNode": {
+    "display_name": "Hunyuan3D: تبدیل تصویر(ها) به مدل (پیشرفته)",
+    "inputs": {
+      "control_after_generate": {
+        "name": "کنترل پس از تولید"
+      },
+      "face_count": {
+        "name": "تعداد وجه‌ها"
+      },
+      "generate_type": {
+        "name": "نوع تولید"
+      },
+      "generate_type_pbr": {
+        "name": "pbr"
+      },
+      "image": {
+        "name": "تصویر"
+      },
+      "image_back": {
+        "name": "تصویر پشت"
+      },
+      "image_left": {
+        "name": "تصویر چپ"
+      },
+      "image_right": {
+        "name": "تصویر راست"
+      },
+      "model": {
+        "name": "مدل",
+        "tooltip": "گزینه LowPoly برای مدل `۳.۱` در دسترس نیست."
+      },
+      "seed": {
+        "name": "seed",
+        "tooltip": "seed تعیین می‌کند که node باید دوباره اجرا شود یا خیر؛ نتایج صرف‌نظر از seed غیرقطعی هستند."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "فایل مدل",
+        "tooltip": null
+      }
+    }
+  },
+  "TencentTextToModelNode": {
+    "display_name": "Hunyuan3D: تبدیل متن به مدل (پیشرفته)",
+    "inputs": {
+      "control_after_generate": {
+        "name": "کنترل پس از تولید"
+      },
+      "face_count": {
+        "name": "تعداد وجه‌ها"
+      },
+      "generate_type": {
+        "name": "نوع تولید"
+      },
+      "generate_type_pbr": {
+        "name": "pbr"
+      },
+      "model": {
+        "name": "مدل",
+        "tooltip": "گزینه LowPoly برای مدل `۳.۱` در دسترس نیست."
+      },
+      "prompt": {
+        "name": "پرامپت",
+        "tooltip": "حداکثر تا ۱۰۲۴ کاراکتر پشتیبانی می‌شود."
+      },
+      "seed": {
+        "name": "seed",
+        "tooltip": "seed تعیین می‌کند که node باید دوباره اجرا شود یا خیر؛ نتایج صرف‌نظر از seed غیرقطعی هستند."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "فایل مدل",
+        "tooltip": null
+      }
+    }
+  },
   "TextEncodeAceStepAudio": {
     "display_name": "TextEncodeAceStepAudio",
     "inputs": {
@@ -13477,6 +13767,40 @@
       }
     }
   },
+  "TextEncodeZImageOmni": {
+    "display_name": "TextEncodeZImageOmni",
+    "inputs": {
+      "auto_resize_images": {
+        "name": "تغییر اندازه خودکار تصاویر"
+      },
+      "clip": {
+        "name": "clip"
+      },
+      "image1": {
+        "name": "تصویر ۱"
+      },
+      "image2": {
+        "name": "تصویر ۲"
+      },
+      "image3": {
+        "name": "تصویر ۳"
+      },
+      "image_encoder": {
+        "name": "رمزگذار تصویر"
+      },
+      "prompt": {
+        "name": "پرامپت"
+      },
+      "vae": {
+        "name": "vae"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "TextToLowercase": {
     "display_name": "تبدیل متن به حروف کوچک",
     "inputs": {
@@ -13682,6 +14006,10 @@
         "name": "حالت سطل‌بندی رزولوشن",
         "tooltip": "فعال‌سازی حالت سطل‌بندی رزولوشن. در صورت فعال بودن، انتظار می‌رود لاتنت‌های پیش‌سطل‌بندی شده از node ResolutionBucket دریافت شود."
       },
+      "bypass_mode": {
+        "name": "bypass_mode",
+        "tooltip": "فعال‌سازی حالت bypass برای آموزش. در این حالت، آداپتورها از طریق forward hookها به جای تغییر وزن‌ها اعمال می‌شوند. این روش برای مدل‌های quantized که امکان تغییر مستقیم وزن‌ها وجود ندارد، مفید است."
+      },
       "control_after_generate": {
         "name": "کنترل پس از تولید"
       },
@@ -13754,10 +14082,6 @@
       "2": {
         "name": "نقشه خطا",
         "tooltip": "تاریخچه خطا"
-      },
-      "3": {
-        "name": "مراحل",
-        "tooltip": "کل مراحل آموزش"
       }
     }
   },
@@ -15652,6 +15976,79 @@
       }
     }
   },
+  "WanInfiniteTalkToVideo": {
+    "display_name": "WanInfiniteTalkToVideo",
+    "inputs": {
+      "audio_encoder_output_1": {
+        "name": "خروجی رمزگذار صوتی ۱"
+      },
+      "audio_scale": {
+        "name": "مقیاس صوتی"
+      },
+      "clip_vision_output": {
+        "name": "خروجی بینایی clip"
+      },
+      "height": {
+        "name": "ارتفاع"
+      },
+      "length": {
+        "name": "طول"
+      },
+      "mode": {
+        "name": "حالت"
+      },
+      "model": {
+        "name": "مدل"
+      },
+      "model_patch": {
+        "name": "patch مدل"
+      },
+      "motion_frame_count": {
+        "name": "تعداد فریم‌های حرکتی",
+        "tooltip": "تعداد فریم‌های قبلی که به عنوان زمینه حرکت استفاده می‌شود."
+      },
+      "negative": {
+        "name": "منفی"
+      },
+      "positive": {
+        "name": "مثبت"
+      },
+      "previous_frames": {
+        "name": "فریم‌های قبلی"
+      },
+      "start_image": {
+        "name": "تصویر شروع"
+      },
+      "vae": {
+        "name": "vae"
+      },
+      "width": {
+        "name": "عرض"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "مدل",
+        "tooltip": null
+      },
+      "1": {
+        "name": "مثبت",
+        "tooltip": null
+      },
+      "2": {
+        "name": "منفی",
+        "tooltip": null
+      },
+      "3": {
+        "name": "latent",
+        "tooltip": null
+      },
+      "4": {
+        "name": "تصویر برش‌خورده",
+        "tooltip": null
+      }
+    }
+  },
   "WanMoveConcatTrack": {
     "display_name": "WanMoveConcatTrack",
     "inputs": {
@@ -16168,6 +16565,43 @@
       }
     }
   },
+  "WavespeedFlashVSRNode": {
+    "description": "افزایش‌دهنده سریع و با کیفیت ویدیو که وضوح را افزایش داده و شفافیت را برای ویدیوهای کم‌کیفیت یا تار بازمی‌گرداند.",
+    "display_name": "افزایش کیفیت ویدیو FlashVSR",
+    "inputs": {
+      "target_resolution": {
+        "name": "وضوح هدف"
+      },
+      "video": {
+        "name": "ویدیو"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "WavespeedImageUpscaleNode": {
+    "description": "افزایش وضوح و کیفیت تصویر، ارتقاء عکس‌ها به ۴K یا ۸K برای نتایج شفاف و با جزئیات.",
+    "display_name": "افزایش کیفیت تصویر WaveSpeed",
+    "inputs": {
+      "image": {
+        "name": "تصویر"
+      },
+      "model": {
+        "name": "مدل"
+      },
+      "target_resolution": {
+        "name": "وضوح هدف"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "WebcamCapture": {
     "display_name": "دریافت از وب‌کم",
     "inputs": {
diff --git a/src/locales/fa/settings.json b/src/locales/fa/settings.json
index 58760c376..ec3f81a53 100644
--- a/src/locales/fa/settings.json
+++ b/src/locales/fa/settings.json
@@ -52,7 +52,8 @@
     }
   },
   "Comfy_Canvas_SelectionToolbox": {
-    "name": "نمایش جعبه ابزار انتخاب"
+    "name": "نمایش جعبه ابزار انتخاب",
+    "tooltip": "نمایش یک نوار ابزار شناور هنگام انتخاب nodeها، برای دسترسی سریع به اقدامات متداول."
   },
   "Comfy_ConfirmClear": {
     "name": "نیاز به تأیید هنگام پاک‌سازی workflow"
@@ -147,7 +148,8 @@
       "Linear": "خطی",
       "Spline": "اسپلاین",
       "Straight": "مستقیم"
-    }
+    },
+    "tooltip": "ظاهر و نمایش پیوندهای ارتباطی بین nodeها روی canvas را کنترل می‌کند."
   },
   "Comfy_Load3D_3DViewerEnable": {
     "name": "فعال‌سازی نمایشگر سه‌بعدی (بتا)",
@@ -272,6 +274,10 @@
   "Comfy_Node_AllowImageSizeDraw": {
     "name": "نمایش عرض × ارتفاع زیر پیش‌نمایش تصویر"
   },
+  "Comfy_Node_AlwaysShowAdvancedWidgets": {
+    "name": "نمایش همیشگی ابزارهای پیشرفته در همه نودها",
+    "tooltip": "در صورت فعال بودن، ابزارهای پیشرفته همیشه در همه نودها قابل مشاهده هستند و نیازی به باز کردن جداگانه آن‌ها نیست."
+  },
   "Comfy_Node_AutoSnapLinkToSlot": {
     "name": "اتصال خودکار لینک به اسلات نود",
     "tooltip": "هنگام کشیدن یک لینک روی نود، لینک به طور خودکار به ورودی مناسب روی نود متصل می‌شود."
@@ -470,6 +476,7 @@
     "tooltip": "افست نقطه کنترل بزیه از نقطه مرکزی مسیر مجدد"
   },
   "pysssss_SnapToGrid": {
-    "name": "همیشه چسباندن به شبکه"
+    "name": "همیشه چسباندن به شبکه",
+    "tooltip": "در صورت فعال بودن، nodeها هنگام جابجایی یا تغییر اندازه به طور خودکار با شبکه تراز می‌شوند."
   }
 }
diff --git a/src/locales/fr/main.json b/src/locales/fr/main.json
index 04db65b9e..78a66b351 100644
--- a/src/locales/fr/main.json
+++ b/src/locales/fr/main.json
@@ -24,6 +24,7 @@
     "assets": "Ressources",
     "baseModels": "Modèles de base",
     "browseAssets": "Parcourir les ressources",
+    "byType": "Par type",
     "checkpoints": "Checkpoints",
     "civitaiLinkExample": "{example} {link}",
     "civitaiLinkExampleStrong": "Exemple :",
@@ -45,6 +46,10 @@
       "failed": "Échec du téléchargement",
       "inProgress": "Téléchargement de {assetName}..."
     },
+    "emptyImported": {
+      "canImport": "Aucun modèle importé pour le moment. Cliquez sur « Importer un modèle » pour ajouter le vôtre.",
+      "restricted": "Les modèles personnels sont disponibles uniquement à partir du niveau Creator."
+    },
     "errorFileTooLarge": "Le fichier dépasse la taille maximale autorisée",
     "errorFormatNotAllowed": "Seul le format SafeTensor est autorisé",
     "errorModelTypeNotSupported": "Ce type de modèle n'est pas pris en charge",
@@ -61,6 +66,7 @@
     "finish": "Terminer",
     "genericLinkPlaceholder": "Collez le lien ici",
     "importAnother": "Importer un autre",
+    "imported": "Importé",
     "jobId": "ID de tâche",
     "loadingModels": "Chargement de {type}...",
     "maxFileSize": "Taille maximale du fichier : {size}",
@@ -70,6 +76,30 @@
       "threeDModelPlaceholder": "Modèle 3D"
     },
     "modelAssociatedWithLink": "Le modèle associé au lien que vous avez fourni :",
+    "modelInfo": {
+      "addBaseModel": "Ajouter un modèle de base...",
+      "addTag": "Ajouter un tag...",
+      "additionalTags": "Tags supplémentaires",
+      "baseModelUnknown": "Modèle de base inconnu",
+      "basicInfo": "Informations de base",
+      "compatibleBaseModels": "Modèles de base compatibles",
+      "description": "Description",
+      "descriptionNotSet": "Aucune description définie",
+      "descriptionPlaceholder": "Ajoutez une description pour ce modèle...",
+      "displayName": "Nom d'affichage",
+      "editDisplayName": "Modifier le nom affiché",
+      "fileName": "Nom du fichier",
+      "modelDescription": "Description du modèle",
+      "modelTagging": "Étiquetage du modèle",
+      "modelType": "Type de modèle",
+      "noAdditionalTags": "Aucun tag supplémentaire",
+      "selectModelPrompt": "Sélectionnez un modèle pour voir ses informations",
+      "selectModelType": "Sélectionner le type de modèle...",
+      "source": "Source",
+      "title": "Infos du modèle",
+      "triggerPhrases": "Phrases déclencheuses",
+      "viewOnSource": "Voir sur {source}"
+    },
     "modelName": "Nom du modèle",
     "modelNamePlaceholder": "Entrez un nom pour ce modèle",
     "modelTypeSelectorLabel": "Quel type de modèle est-ce ?",
@@ -684,6 +714,7 @@
     "clearAll": "Tout effacer",
     "clearFilters": "Effacer les filtres",
     "close": "Fermer",
+    "closeDialog": "Fermer la boîte de dialogue",
     "color": "Couleur",
     "comfy": "Comfy",
     "comfyOrgLogoAlt": "Logo ComfyOrg",
@@ -700,6 +731,7 @@
     "control_before_generate": "contrôle avant génération",
     "copied": "Copié",
     "copy": "Copier",
+    "copyAll": "Tout copier",
     "copyJobId": "Copier l'ID du travail",
     "copyToClipboard": "Copier dans le presse-papiers",
     "copyURL": "Copier l’URL",
@@ -762,6 +794,8 @@
     "goToNode": "Aller au nœud",
     "graphNavigation": "Navigation dans le graphe",
     "halfSpeed": "0.5x",
+    "hideLeftPanel": "Masquer le panneau de gauche",
+    "hideRightPanel": "Masquer le panneau de droite",
     "icon": "Icône",
     "imageFailedToLoad": "Échec du chargement de l'image",
     "imagePreview": "Aperçu de l'image - Utilisez les flèches pour naviguer entre les images",
@@ -803,6 +837,7 @@
     "name": "Nom",
     "newFolder": "Nouveau dossier",
     "next": "Suivant",
+    "nightly": "NIGHTLY",
     "no": "Non",
     "noAudioRecorded": "Aucun audio enregistré",
     "noItems": "Aucun élément",
@@ -817,6 +852,7 @@
     "nodeSlotsError": "Erreur d'emplacements du nœud",
     "nodeWidgetsError": "Erreur de widgets du nœud",
     "nodes": "Nœuds",
+    "nodesCount": "{count} nœuds | {count} nœud | {count} nœuds",
     "nodesRunning": "nœuds en cours d’exécution",
     "none": "Aucun",
     "nothingToCopy": "Rien à copier",
@@ -891,7 +927,9 @@
     "selectedFile": "Fichier sélectionné",
     "setAsBackground": "Définir comme arrière-plan",
     "settings": "Paramètres",
+    "showLeftPanel": "Afficher le panneau de gauche",
     "showReport": "Afficher le rapport",
+    "showRightPanel": "Afficher le panneau de droite",
     "singleSelectDropdown": "Menu déroulant à sélection unique",
     "sort": "Trier",
     "source": "Source",
@@ -914,6 +952,7 @@
     "updating": "Mise à jour",
     "upload": "Téléverser",
     "usageHint": "Conseil d'utilisation",
+    "use": "Utiliser",
     "user": "Utilisateur",
     "versionMismatchWarning": "Avertissement de compatibilité de version",
     "versionMismatchWarningMessage": "{warning} : {detail} Consultez https://docs.comfy.org/installation/update_comfyui#common-update-issues pour les instructions de mise à jour.",
@@ -921,11 +960,10 @@
     "videoPreview": "Aperçu de la vidéo - Utilisez les flèches pour naviguer entre les vidéos",
     "viewImageOfTotal": "Voir l'image {index} sur {total}",
     "viewVideoOfTotal": "Voir la vidéo {index} sur {total}",
-    "vitePreloadErrorMessage": "Une nouvelle version de l'application a été publiée. Souhaitez-vous recharger ?\nSi vous refusez, certaines parties de l'application pourraient ne pas fonctionner correctement.\nN'hésitez pas à refuser et à sauvegarder votre progression avant de recharger.",
-    "vitePreloadErrorTitle": "Nouvelle version disponible",
     "volume": "Volume",
     "warning": "Avertissement",
-    "workflow": "Flux de travail"
+    "workflow": "Flux de travail",
+    "you": "Vous"
   },
   "graphCanvasMenu": {
     "fitView": "Adapter la vue",
@@ -1617,17 +1655,25 @@
       "title": "Ce flux de travail a des nœuds manquants"
     }
   },
+  "nightly": {
+    "badge": {
+      "label": "Version de prévisualisation",
+      "tooltip": "Vous utilisez une version nightly de ComfyUI. Veuillez utiliser le bouton de retour pour partager vos impressions sur ces fonctionnalités."
+    }
+  },
   "nodeCategories": {
     "": "",
     "3d": "3d",
     "3d_models": "modèles_3d",
     "BFL": "BFL",
+    "Bria": "Bria",
     "ByteDance": "ByteDance",
     "Gemini": "Gemini",
     "Ideogram": "Ideogram",
     "Kling": "Kling",
     "LTXV": "LTXV",
     "Luma": "Luma",
+    "Magnific": "Magnific",
     "Meshy": "Meshy",
     "MiniMax": "MiniMax",
     "Moonvalley Marey": "Moonvalley Marey",
@@ -1638,11 +1684,13 @@
     "Runway": "Runway",
     "Sora": "Sora",
     "Stability AI": "Stability AI",
+    "Tencent": "Tencent",
     "Topaz": "Topaz",
     "Tripo": "Tripo",
     "Veo": "Veo",
     "Vidu": "Vidu",
     "Wan": "Wan",
+    "WaveSpeed": "WaveSpeed",
     "_for_testing": "_pour_test",
     "advanced": "avancé",
     "animation": "animation",
@@ -1852,6 +1900,7 @@
     },
     "groupSettings": "Paramètres du groupe",
     "groups": "Groupes",
+    "hideAdvancedInputsButton": "Masquer les entrées avancées",
     "hideInput": "Masquer l’entrée",
     "info": "Infos",
     "inputs": "ENTRÉES",
@@ -2084,6 +2133,7 @@
     "NodeLibrary": "Bibliothèque de Nœuds",
     "Nodes 2_0": "Nodes 2.0",
     "Notification Preferences": "Préférences de notification",
+    "Other": "Autre",
     "PLY": "PLY",
     "PlanCredits": "Forfait et crédits",
     "Pointer": "Pointeur",
@@ -2103,7 +2153,8 @@
     "Vue Nodes": "Nœuds Vue",
     "VueNodes": "Nœuds Vue",
     "Window": "Fenêtre",
-    "Workflow": "Flux de Travail"
+    "Workflow": "Flux de Travail",
+    "Workspace": "Espace de travail"
   },
   "shape": {
     "CARD": "Carte",
@@ -2129,12 +2180,14 @@
     "viewControls": "Contrôles d'affichage"
   },
   "sideToolbar": {
+    "activeJobStatus": "Tâche active : {status}",
     "assets": "Ressources",
     "backToAssets": "Retour à toutes les ressources",
     "browseTemplates": "Parcourir les modèles d'exemple",
     "downloads": "Téléchargements",
     "generatedAssetsHeader": "Ressources générées",
     "helpCenter": "Centre d'aide",
+    "importedAssetsHeader": "Ressources importées",
     "labels": {
       "assets": "Ressources",
       "console": "Console",
@@ -2179,6 +2232,7 @@
     "queue": "File d'attente",
     "queueProgressOverlay": {
       "activeJobs": "{count} travail actif | {count} travaux actifs",
+      "activeJobsShort": "{count} actif(s) | {count} actif(s)",
       "activeJobsSuffix": "travaux actifs",
       "cancelJobTooltip": "Annuler le travail",
       "clearHistory": "Effacer l’historique de la file d’attente",
@@ -2267,9 +2321,15 @@
     "beta": "BÊTA",
     "billedMonthly": "Facturé mensuellement",
     "billedYearly": "{total} facturé annuellement",
+    "billingComingSoon": {
+      "message": "La facturation d'équipe arrive bientôt. Vous pourrez souscrire à un abonnement pour votre espace de travail avec un tarif par utilisateur. Restez à l'écoute pour les mises à jour.",
+      "title": "Bientôt disponible"
+    },
+    "cancelSubscription": "Annuler l’abonnement",
     "changeTo": "Changer pour {plan}",
     "comfyCloud": "Comfy Cloud",
     "comfyCloudLogo": "Logo Comfy Cloud",
+    "contactOwnerToSubscribe": "Contactez le propriétaire de l’espace de travail pour vous abonner",
     "contactUs": "Contactez-nous",
     "creditsRemainingThisMonth": "Crédits restants ce mois-ci",
     "creditsRemainingThisYear": "Crédits restants cette année",
@@ -2282,6 +2342,7 @@
     "haveQuestions": "Des questions ou besoin d'une offre entreprise ?",
     "invoiceHistory": "Historique des factures",
     "learnMore": "En savoir plus",
+    "managePayment": "Gérer le paiement",
     "managePlan": "Gérer le forfait",
     "manageSubscription": "Gérer l'abonnement",
     "maxDuration": {
@@ -2317,6 +2378,7 @@
     "subscribeToComfyCloud": "S'abonner à Comfy Cloud",
     "subscribeToRun": "S'abonner",
     "subscribeToRunFull": "S'abonner pour exécuter",
+    "subscriptionRequiredMessage": "Un abonnement est requis pour que les membres puissent exécuter des workflows sur le Cloud",
     "tierNameYearly": "{name} Annuel",
     "tiers": {
       "creator": {
@@ -2348,6 +2410,7 @@
     "viewMoreDetails": "Voir plus de détails",
     "viewMoreDetailsPlans": "Voir plus de détails sur les forfaits et tarifs",
     "viewUsageHistory": "Voir l'historique d'utilisation",
+    "workspaceNotSubscribed": "Cet espace de travail n’a pas d’abonnement",
     "yearly": "Annuel",
     "yearlyCreditsLabel": "Crédits annuels totaux",
     "yearlyDiscount": "20% DE RÉDUCTION",
@@ -2449,6 +2512,7 @@
     "failedToLoadModel": "Échec du chargement du modèle 3D",
     "failedToPurchaseCredits": "Échec de l'achat de crédits : {error}",
     "failedToQueue": "Échec de la mise en file d'attente",
+    "failedToSaveDraft": "Échec de l’enregistrement du brouillon du flux de travail",
     "failedToToggleCamera": "Échec de l’activation/désactivation de la caméra",
     "failedToToggleGrid": "Échec de l’activation/désactivation de la grille",
     "failedToUpdateBackgroundColor": "Échec de la mise à jour de la couleur d’arrière-plan",
@@ -2497,7 +2561,8 @@
     "notSet": "Non défini",
     "provider": "Méthode de connexion",
     "title": "Paramètres utilisateur",
-    "updatePassword": "Mettre à jour le mot de passe"
+    "updatePassword": "Mettre à jour le mot de passe",
+    "workspaceSettings": "Paramètres de l’espace de travail"
   },
   "validation": {
     "descriptionRequired": "La description est requise",
@@ -2588,6 +2653,9 @@
     "saveWorkflow": "Enregistrer le flux de travail"
   },
   "workspace": {
+    "addedToWorkspace": "Vous avez été ajouté à {workspaceName}",
+    "inviteAccepted": "Invitation acceptée",
+    "inviteFailed": "Échec de l'acceptation de l'invitation",
     "unsavedChanges": {
       "message": "Vous avez des modifications non enregistrées. Voulez-vous les abandonner et changer d’espace de travail ?",
       "title": "Modifications non enregistrées"
@@ -2602,6 +2670,128 @@
       "workspaceNotFound": "Espace de travail introuvable"
     }
   },
+  "workspacePanel": {
+    "createWorkspaceDialog": {
+      "create": "Créer",
+      "message": "Les espaces de travail permettent aux membres de partager un même pool de crédits. Vous deviendrez le propriétaire après la création.",
+      "nameLabel": "Nom de l’espace de travail*",
+      "namePlaceholder": "Saisissez le nom de l’espace de travail",
+      "title": "Créer un nouvel espace de travail"
+    },
+    "dashboard": {
+      "placeholder": "Paramètres de l'espace de travail du tableau de bord"
+    },
+    "deleteDialog": {
+      "message": "Tout crédit inutilisé ou ressource non enregistrée sera perdu. Cette action est irréversible.",
+      "messageWithName": "Supprimer « {name} » ? Tout crédit inutilisé ou ressource non enregistrée sera perdu. Cette action est irréversible.",
+      "title": "Supprimer cet espace de travail ?"
+    },
+    "editWorkspaceDialog": {
+      "nameLabel": "Nom de l’espace de travail",
+      "save": "Enregistrer",
+      "title": "Modifier les détails de l’espace de travail"
+    },
+    "invite": "Inviter",
+    "inviteLimitReached": "Vous avez atteint le maximum de 50 membres",
+    "inviteMember": "Inviter un membre",
+    "inviteMemberDialog": {
+      "createLink": "Créer le lien",
+      "linkCopied": "Copié",
+      "linkCopyFailed": "Échec de la copie du lien",
+      "linkStep": {
+        "copyLink": "Copier le lien",
+        "done": "Terminé",
+        "message": "Assurez-vous que son compte utilise cet email.",
+        "title": "Envoyez ce lien à la personne"
+      },
+      "message": "Créez un lien d'invitation partageable à envoyer à quelqu'un",
+      "placeholder": "Entrez l'email de la personne",
+      "title": "Inviter une personne dans cet espace de travail"
+    },
+    "leaveDialog": {
+      "leave": "Quitter",
+      "message": "Vous ne pourrez pas le rejoindre à nouveau sans contacter le propriétaire de l’espace de travail.",
+      "title": "Quitter cet espace de travail ?"
+    },
+    "members": {
+      "actions": {
+        "copyLink": "Copier le lien d'invitation",
+        "removeMember": "Retirer le membre",
+        "revokeInvite": "Révoquer l'invitation"
+      },
+      "columns": {
+        "expiryDate": "Date d'expiration",
+        "inviteDate": "Date d'invitation",
+        "joinDate": "Date d'adhésion"
+      },
+      "createNewWorkspace": "créez-en un nouveau.",
+      "membersCount": "{count}/50 membres",
+      "noInvites": "Aucune invitation en attente",
+      "noMembers": "Aucun membre",
+      "pendingInvitesCount": "{count} invitation en attente | {count} invitations en attente",
+      "personalWorkspaceMessage": "Vous ne pouvez pas inviter d'autres membres dans votre espace de travail personnel pour le moment. Pour ajouter des membres à un espace de travail,",
+      "tabs": {
+        "active": "Actif",
+        "pendingCount": "En attente ({count})"
+      }
+    },
+    "menu": {
+      "deleteWorkspace": "Supprimer l’espace de travail",
+      "deleteWorkspaceDisabledTooltip": "Annulez d’abord l’abonnement actif de votre espace de travail",
+      "editWorkspace": "Modifier les détails de l’espace de travail",
+      "leaveWorkspace": "Quitter l’espace de travail"
+    },
+    "removeMemberDialog": {
+      "error": "Échec du retrait du membre",
+      "message": "Ce membre sera retiré de votre espace de travail. Les crédits qu'il a utilisés ne seront pas remboursés.",
+      "remove": "Retirer le membre",
+      "success": "Membre retiré",
+      "title": "Retirer ce membre ?"
+    },
+    "revokeInviteDialog": {
+      "message": "Cette personne ne pourra plus rejoindre votre espace de travail. Son lien d'invitation sera invalidé.",
+      "revoke": "Annuler l'invitation",
+      "title": "Annuler l'invitation de cette personne ?"
+    },
+    "tabs": {
+      "dashboard": "Tableau de bord",
+      "membersCount": "Membres ({count})",
+      "planCredits": "Forfait & Crédits"
+    },
+    "toast": {
+      "failedToCreateWorkspace": "Échec de la création de l’espace de travail",
+      "failedToDeleteWorkspace": "Échec de la suppression de l’espace de travail",
+      "failedToFetchWorkspaces": "Échec du chargement des espaces de travail",
+      "failedToLeaveWorkspace": "Échec de la sortie de l’espace de travail",
+      "failedToUpdateWorkspace": "Échec de la mise à jour de l’espace de travail",
+      "workspaceCreated": {
+        "message": "Abonnez-vous à un plan, invitez des coéquipiers et commencez à collaborer.",
+        "subscribe": "S'abonner",
+        "title": "Espace de travail créé"
+      },
+      "workspaceDeleted": {
+        "message": "L'espace de travail a été définitivement supprimé.",
+        "title": "Espace de travail supprimé"
+      },
+      "workspaceLeft": {
+        "message": "Vous avez quitté l'espace de travail.",
+        "title": "Espace de travail quitté"
+      },
+      "workspaceUpdated": {
+        "message": "Les détails de l’espace de travail ont été enregistrés.",
+        "title": "Espace de travail mis à jour"
+      }
+    }
+  },
+  "workspaceSwitcher": {
+    "createWorkspace": "Créer un nouvel espace de travail",
+    "maxWorkspacesReached": "Vous ne pouvez posséder que 10 espaces de travail. Supprimez-en un pour en créer un nouveau.",
+    "personal": "Personnel",
+    "roleMember": "Membre",
+    "roleOwner": "Propriétaire",
+    "subscribe": "S’abonner",
+    "switchWorkspace": "Changer d’espace de travail"
+  },
   "zoomControls": {
     "hideMinimap": "Masquer la mini-carte",
     "label": "Contrôles de zoom",
diff --git a/src/locales/fr/nodeDefs.json b/src/locales/fr/nodeDefs.json
index fd58ab7fc..263a8f9a0 100644
--- a/src/locales/fr/nodeDefs.json
+++ b/src/locales/fr/nodeDefs.json
@@ -328,6 +328,68 @@
       }
     }
   },
+  "BriaImageEditNode": {
+    "description": "Modifiez des images en utilisant le dernier modèle Bria",
+    "display_name": "Bria Image Edit",
+    "inputs": {
+      "control_after_generate": {
+        "name": "contrôle après génération"
+      },
+      "guidance_scale": {
+        "name": "échelle de guidage",
+        "tooltip": "Une valeur plus élevée fait suivre l'image à l'invite de façon plus précise."
+      },
+      "image": {
+        "name": "image"
+      },
+      "mask": {
+        "name": "masque",
+        "tooltip": "Si omis, la modification s'applique à l'image entière."
+      },
+      "model": {
+        "name": "modèle"
+      },
+      "moderation": {
+        "name": "modération",
+        "tooltip": "Paramètres de modération"
+      },
+      "moderation_prompt_content_moderation": {
+        "name": "modération_du_contenu_de_l'invite"
+      },
+      "moderation_visual_input_moderation": {
+        "name": "modération_de_l'entrée_visuelle"
+      },
+      "moderation_visual_output_moderation": {
+        "name": "modération_de_la_sortie_visuelle"
+      },
+      "negative_prompt": {
+        "name": "invite négative"
+      },
+      "prompt": {
+        "name": "invite",
+        "tooltip": "Instruction pour modifier l'image"
+      },
+      "seed": {
+        "name": "graine"
+      },
+      "steps": {
+        "name": "étapes"
+      },
+      "structured_prompt": {
+        "name": "invite structurée",
+        "tooltip": "Une chaîne contenant l'invite d'édition structurée au format JSON. Utilisez ceci à la place de l'invite habituelle pour un contrôle précis et programmatique."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      },
+      "1": {
+        "name": "invite structurée",
+        "tooltip": null
+      }
+    }
+  },
   "ByteDanceFirstLastFrameNode": {
     "description": "Générer une vidéo en utilisant l'invite et les première et dernière images.",
     "display_name": "ByteDance Première-Dernière Image vers Vidéo",
@@ -385,43 +447,6 @@
       }
     }
   },
-  "ByteDanceImageEditNode": {
-    "description": "Modifier des images en utilisant les modèles ByteDance via l'API basée sur le prompt",
-    "display_name": "Édition d'image ByteDance",
-    "inputs": {
-      "control_after_generate": {
-        "name": "control after generate"
-      },
-      "guidance_scale": {
-        "name": "guidance_scale",
-        "tooltip": "Une valeur plus élevée fait que l'image suit plus fidèlement le prompt"
-      },
-      "image": {
-        "name": "image",
-        "tooltip": "L'image de base à modifier"
-      },
-      "model": {
-        "name": "model"
-      },
-      "prompt": {
-        "name": "prompt",
-        "tooltip": "Instruction pour modifier l'image"
-      },
-      "seed": {
-        "name": "seed",
-        "tooltip": "Graine à utiliser pour la génération."
-      },
-      "watermark": {
-        "name": "watermark",
-        "tooltip": "Indique s'il faut ajouter un filigrane \"Généré par IA\" à l'image"
-      }
-    },
-    "outputs": {
-      "0": {
-        "tooltip": null
-      }
-    }
-  },
   "ByteDanceImageNode": {
     "description": "Générer des images en utilisant les modèles ByteDance via l'API basée sur le prompt",
     "display_name": "Image ByteDance",
@@ -2031,14 +2056,18 @@
       "choice": {
         "name": "choix"
       },
-      "option0": {
+      "index": {
+      },
+      "option1": {
       }
     },
-    "outputs": {
-      "0": {
+    "outputs": [
+      null,
+      {
+        "name": "INDEX",
         "tooltip": null
       }
-    }
+    ]
   },
   "DiffControlNetLoader": {
     "display_name": "Charger le modèle ControlNet (diff)",
@@ -6390,6 +6419,60 @@
       }
     }
   },
+  "LoraLoaderBypass": {
+    "description": "Appliquer LoRA en mode bypass. Contrairement à LoRA classique, cela ne modifie pas les poids du modèle - à la place, le calcul LoRA est injecté lors du passage avant. Utile pour les scénarios d'entraînement.",
+    "display_name": "Charger LoRA (Bypass) (Pour le débogage)",
+    "inputs": {
+      "clip": {
+        "name": "clip",
+        "tooltip": "Le modèle CLIP auquel le LoRA sera appliqué."
+      },
+      "lora_name": {
+        "name": "lora_name",
+        "tooltip": "Le nom du LoRA."
+      },
+      "model": {
+        "name": "model",
+        "tooltip": "Le modèle de diffusion auquel le LoRA sera appliqué."
+      },
+      "strength_clip": {
+        "name": "strength_clip",
+        "tooltip": "Intensité de modification du modèle CLIP. Cette valeur peut être négative."
+      },
+      "strength_model": {
+        "name": "strength_model",
+        "tooltip": "Intensité de modification du modèle de diffusion. Cette valeur peut être négative."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": "Le modèle de diffusion modifié."
+      },
+      "1": {
+        "tooltip": "Le modèle CLIP modifié."
+      }
+    }
+  },
+  "LoraLoaderBypassModelOnly": {
+    "description": "Appliquer LoRA en mode bypass. Contrairement à LoRA classique, cela ne modifie pas les poids du modèle - à la place, le calcul LoRA est injecté lors du passage avant. Utile pour les scénarios d'entraînement.",
+    "display_name": "Charger LoRA (Bypass, Modèle Seulement) (pour le débogage)",
+    "inputs": {
+      "lora_name": {
+        "name": "lora_name"
+      },
+      "model": {
+        "name": "model"
+      },
+      "strength_model": {
+        "name": "strength_model"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": "Le modèle de diffusion modifié."
+      }
+    }
+  },
   "LoraLoaderModelOnly": {
     "description": "Les LoRAs sont utilisés pour modifier les modèles de diffusion et CLIP, modifiant la manière dont les latents sont débruités comme l'application de styles. Plusieurs nœuds LoRA peuvent être liés ensemble.",
     "display_name": "LoraLoaderModelOnly",
@@ -6757,6 +6840,126 @@
       }
     }
   },
+  "MagnificImageRelightNode": {
+    "description": "Reluminez une image avec des ajustements de lumière et un transfert de lumière basé sur une référence en option.",
+    "display_name": "Magnific Relumination d’Image",
+    "inputs": {
+      "advanced_settings": {
+        "name": "advanced_settings",
+        "tooltip": "Options de réglage fin pour un contrôle avancé de l’éclairage."
+      },
+      "change_background": {
+        "name": "change_background",
+        "tooltip": "Modifie l’arrière-plan selon le prompt/la référence."
+      },
+      "image": {
+        "name": "image",
+        "tooltip": "L’image à reluminer."
+      },
+      "interpolate_from_original": {
+        "name": "interpolate_from_original",
+        "tooltip": "Restreint la liberté de génération pour correspondre davantage à l’original."
+      },
+      "light_transfer_strength": {
+        "name": "light_transfer_strength",
+        "tooltip": "Intensité de l’application du transfert de lumière."
+      },
+      "preserve_details": {
+        "name": "preserve_details",
+        "tooltip": "Préserve la texture et les détails fins de l’original."
+      },
+      "prompt": {
+        "name": "prompt",
+        "tooltip": "Instructions descriptives pour l’éclairage. Prend en charge la notation d’emphase (1-1.4)."
+      },
+      "reference_image": {
+        "name": "reference_image",
+        "tooltip": "Image de référence optionnelle pour transférer la lumière."
+      },
+      "style": {
+        "name": "style",
+        "tooltip": "Préférence stylistique de sortie."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "MagnificImageSkinEnhancerNode": {
+    "description": "Amélioration de la peau pour les portraits avec plusieurs modes de traitement.",
+    "display_name": "Magnific Améliorateur de Peau d’Image",
+    "inputs": {
+      "image": {
+        "name": "image",
+        "tooltip": "Le portrait à améliorer."
+      },
+      "mode": {
+        "name": "mode",
+        "tooltip": "Mode de traitement : créatif pour une amélioration artistique, fidèle pour préserver l’apparence originale, flexible pour une optimisation ciblée."
+      },
+      "sharpen": {
+        "name": "sharpen",
+        "tooltip": "Niveau d’intensité de la netteté."
+      },
+      "smart_grain": {
+        "name": "smart_grain",
+        "tooltip": "Niveau d’intensité du grain intelligent."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "MagnificImageStyleTransferNode": {
+    "description": "Transférez le style d'une image de référence vers votre image d'entrée.",
+    "display_name": "Transfert de style d'image Magnific",
+    "inputs": {
+      "engine": {
+        "name": "engine",
+        "tooltip": "Sélection du moteur de traitement."
+      },
+      "fixed_generation": {
+        "name": "fixed_generation",
+        "tooltip": "Lorsque désactivé, chaque génération introduit un certain degré d'aléatoire, produisant des résultats plus variés."
+      },
+      "flavor": {
+        "name": "flavor",
+        "tooltip": "Type de transfert de style."
+      },
+      "image": {
+        "name": "image",
+        "tooltip": "L'image à laquelle appliquer le transfert de style."
+      },
+      "portrait_mode": {
+        "name": "portrait_mode",
+        "tooltip": "Activer le mode portrait pour les améliorations du visage."
+      },
+      "prompt": {
+        "name": "prompt"
+      },
+      "reference_image": {
+        "name": "reference_image",
+        "tooltip": "L'image de référence dont extraire le style."
+      },
+      "structure_strength": {
+        "name": "structure_strength",
+        "tooltip": "Préserve la structure de l'image originale."
+      },
+      "style_strength": {
+        "name": "style_strength",
+        "tooltip": "Pourcentage d'intensité du style."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "Mahiro": {
     "description": "Modifiez le guidage pour qu'il se concentre davantage sur la 'direction' de l'invite positive plutôt que sur la différence avec l'invite négative.",
     "display_name": "Mahiro est si mignonne qu'elle mérite une meilleure fonction de guidage!! (。・ω・。)",
@@ -11209,19 +11412,28 @@
     }
   },
   "ResizeImageMaskNode": {
+    "description": "Redimensionner une image ou un mask en utilisant différentes méthodes de mise à l'échelle.",
     "display_name": "Redimensionner image/masque",
     "inputs": {
       "input": {
         "name": "input"
       },
       "resize_type": {
-        "name": "resize_type"
+        "name": "resize_type",
+        "tooltip": "Sélectionnez la méthode de redimensionnement : par dimensions exactes, facteur d'échelle, correspondance avec une autre image, etc."
       },
-      "resize_type_multiplier": {
-        "name": "multiplier"
+      "resize_type_crop": {
+        "name": "rogner"
+      },
+      "resize_type_height": {
+        "name": "hauteur"
+      },
+      "resize_type_width": {
+        "name": "largeur"
       },
       "scale_method": {
-        "name": "scale_method"
+        "name": "scale_method",
+        "tooltip": "Algorithme d'interpolation. 'area' est optimal pour la réduction, 'lanczos' pour l'agrandissement, 'nearest-exact' pour le pixel art."
       }
     },
     "outputs": {
@@ -13355,6 +13567,84 @@
       }
     }
   },
+  "TencentImageToModelNode": {
+    "display_name": "Hunyuan3D : Image(s) vers Modèle (Pro)",
+    "inputs": {
+      "control_after_generate": {
+        "name": "contrôle après génération"
+      },
+      "face_count": {
+        "name": "nombre de faces"
+      },
+      "generate_type": {
+        "name": "type de génération"
+      },
+      "generate_type_pbr": {
+        "name": "pbr"
+      },
+      "image": {
+        "name": "image"
+      },
+      "image_back": {
+        "name": "image arrière"
+      },
+      "image_left": {
+        "name": "image gauche"
+      },
+      "image_right": {
+        "name": "image droite"
+      },
+      "model": {
+        "name": "modèle",
+        "tooltip": "L’option LowPoly n’est pas disponible pour le modèle `3.1`."
+      },
+      "seed": {
+        "name": "graine",
+        "tooltip": "La graine contrôle si le nœud doit être relancé ; les résultats restent non déterministes quelle que soit la graine."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "fichier_modèle",
+        "tooltip": null
+      }
+    }
+  },
+  "TencentTextToModelNode": {
+    "display_name": "Hunyuan3D : Texte vers Modèle (Pro)",
+    "inputs": {
+      "control_after_generate": {
+        "name": "contrôle après génération"
+      },
+      "face_count": {
+        "name": "nombre de faces"
+      },
+      "generate_type": {
+        "name": "type de génération"
+      },
+      "generate_type_pbr": {
+        "name": "pbr"
+      },
+      "model": {
+        "name": "modèle",
+        "tooltip": "L’option LowPoly n’est pas disponible pour le modèle `3.1`."
+      },
+      "prompt": {
+        "name": "invite",
+        "tooltip": "Jusqu’à 1024 caractères pris en charge."
+      },
+      "seed": {
+        "name": "graine",
+        "tooltip": "La graine contrôle si le nœud doit être relancé ; les résultats restent non déterministes quelle que soit la graine."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "fichier_modèle",
+        "tooltip": null
+      }
+    }
+  },
   "TextEncodeAceStepAudio": {
     "display_name": "TextEncodeAceStepAudio",
     "inputs": {
@@ -13450,6 +13740,40 @@
       }
     }
   },
+  "TextEncodeZImageOmni": {
+    "display_name": "TextEncodeZImageOmni",
+    "inputs": {
+      "auto_resize_images": {
+        "name": "redimensionnement automatique des images"
+      },
+      "clip": {
+        "name": "clip"
+      },
+      "image1": {
+        "name": "image1"
+      },
+      "image2": {
+        "name": "image2"
+      },
+      "image3": {
+        "name": "image3"
+      },
+      "image_encoder": {
+        "name": "encodeur d'image"
+      },
+      "prompt": {
+        "name": "invite"
+      },
+      "vae": {
+        "name": "vae"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "TextToLowercase": {
     "display_name": "Texte en minuscules",
     "inputs": {
@@ -13655,6 +13979,10 @@
         "name": "bucket_mode",
         "tooltip": "Activer le mode de résolution par compartiments. Lorsqu’il est activé, attend des latents pré-triés depuis le nœud ResolutionBucket."
       },
+      "bypass_mode": {
+        "name": "bypass_mode",
+        "tooltip": "Activer le mode bypass pour l'entraînement. Lorsqu'il est activé, les adaptateurs sont appliqués via des hooks forward au lieu de la modification des poids. Utile pour les modèles quantifiés dont les poids ne peuvent pas être modifiés directement."
+      },
       "control_after_generate": {
         "name": "contrôle après génération"
       },
@@ -15621,6 +15949,79 @@
       }
     }
   },
+  "WanInfiniteTalkToVideo": {
+    "display_name": "WanInfiniteTalkToVideo",
+    "inputs": {
+      "audio_encoder_output_1": {
+        "name": "sortie encodeur audio 1"
+      },
+      "audio_scale": {
+        "name": "échelle audio"
+      },
+      "clip_vision_output": {
+        "name": "sortie vision clip"
+      },
+      "height": {
+        "name": "hauteur"
+      },
+      "length": {
+        "name": "longueur"
+      },
+      "mode": {
+        "name": "mode"
+      },
+      "model": {
+        "name": "modèle"
+      },
+      "model_patch": {
+        "name": "correctif du modèle"
+      },
+      "motion_frame_count": {
+        "name": "nombre d’images de mouvement",
+        "tooltip": "Nombre d’images précédentes à utiliser comme contexte de mouvement."
+      },
+      "negative": {
+        "name": "négatif"
+      },
+      "positive": {
+        "name": "positif"
+      },
+      "previous_frames": {
+        "name": "images précédentes"
+      },
+      "start_image": {
+        "name": "image de départ"
+      },
+      "vae": {
+        "name": "vae"
+      },
+      "width": {
+        "name": "largeur"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "modèle",
+        "tooltip": null
+      },
+      "1": {
+        "name": "positif",
+        "tooltip": null
+      },
+      "2": {
+        "name": "négatif",
+        "tooltip": null
+      },
+      "3": {
+        "name": "latent",
+        "tooltip": null
+      },
+      "4": {
+        "name": "image rognée",
+        "tooltip": null
+      }
+    }
+  },
   "WanMoveConcatTrack": {
     "display_name": "WanMoveConcatTrack",
     "inputs": {
@@ -16137,6 +16538,43 @@
       }
     }
   },
+  "WavespeedFlashVSRNode": {
+    "description": "Upscaler vidéo rapide et de haute qualité qui augmente la résolution et restaure la clarté des séquences basse résolution ou floues.",
+    "display_name": "FlashVSR Upscale Vidéo",
+    "inputs": {
+      "target_resolution": {
+        "name": "résolution cible"
+      },
+      "video": {
+        "name": "vidéo"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "WavespeedImageUpscaleNode": {
+    "description": "Augmentez la résolution et la qualité de l'image, en upscalant les photos en 4K ou 8K pour des résultats nets et détaillés.",
+    "display_name": "WaveSpeed Upscale Image",
+    "inputs": {
+      "image": {
+        "name": "image"
+      },
+      "model": {
+        "name": "modèle"
+      },
+      "target_resolution": {
+        "name": "résolution cible"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "WebcamCapture": {
     "display_name": "Capture Webcam",
     "inputs": {
diff --git a/src/locales/fr/settings.json b/src/locales/fr/settings.json
index b69f8f20a..1847879d3 100644
--- a/src/locales/fr/settings.json
+++ b/src/locales/fr/settings.json
@@ -52,7 +52,8 @@
     }
   },
   "Comfy_Canvas_SelectionToolbox": {
-    "name": "Afficher la boîte à outils de sélection"
+    "name": "Afficher la boîte à outils de sélection",
+    "tooltip": "Affiche une barre d’outils flottante lorsque des nœuds sont sélectionnés, offrant un accès rapide aux actions courantes."
   },
   "Comfy_ConfirmClear": {
     "name": "Demander une confirmation lors de l'effacement du flux de travail"
@@ -147,7 +148,8 @@
       "Linear": "Linéaire",
       "Spline": "Spline",
       "Straight": "Droit"
-    }
+    },
+    "tooltip": "Contrôle l’apparence et la visibilité des liens de connexion entre les nœuds sur le canevas."
   },
   "Comfy_Load3D_3DViewerEnable": {
     "name": "Activer le visualiseur 3D (Bêta)",
@@ -272,6 +274,10 @@
   "Comfy_Node_AllowImageSizeDraw": {
     "name": "Afficher la largeur × la hauteur sous l'aperçu de l'image"
   },
+  "Comfy_Node_AlwaysShowAdvancedWidgets": {
+    "name": "Toujours afficher les widgets avancés sur tous les nœuds",
+    "tooltip": "Lorsque cette option est activée, les widgets avancés sont toujours visibles sur tous les nœuds sans avoir besoin de les développer individuellement."
+  },
   "Comfy_Node_AutoSnapLinkToSlot": {
     "name": "Lien d'ancrage automatique à l'emplacement du nœud",
     "tooltip": "Lorsque vous faites glisser un lien sur un nœud, le lien se fixe automatiquement à une fente d'entrée viable sur le nœud"
@@ -470,6 +476,7 @@
     "tooltip": "Le point de contrôle de Bézier est décalé par rapport au point central de réacheminement"
   },
   "pysssss_SnapToGrid": {
-    "name": "Toujours aligner sur la grille"
+    "name": "Toujours aligner sur la grille",
+    "tooltip": "Lorsque cette option est activée, les nœuds s’alignent automatiquement sur la grille lors de leur déplacement ou redimensionnement."
   }
 }
diff --git a/src/locales/ja/main.json b/src/locales/ja/main.json
index ef3a14b51..536ea7a1f 100644
--- a/src/locales/ja/main.json
+++ b/src/locales/ja/main.json
@@ -24,6 +24,7 @@
     "assets": "アセット",
     "baseModels": "ベースモデル",
     "browseAssets": "アセットを閲覧",
+    "byType": "タイプ別",
     "checkpoints": "チェックポイント",
     "civitaiLinkExample": "{example} {link}",
     "civitaiLinkExampleStrong": "例：",
@@ -45,6 +46,10 @@
       "failed": "ダウンロードに失敗しました",
       "inProgress": "{assetName}をダウンロード中..."
     },
+    "emptyImported": {
+      "canImport": "まだインポートされたモデルはありません。「モデルをインポート」をクリックして追加してください。",
+      "restricted": "パーソナルモデルはCreator以上のプランでのみ利用可能です。"
+    },
     "errorFileTooLarge": "ファイルが許可された最大サイズを超えています",
     "errorFormatNotAllowed": "SafeTensor形式のみ許可されています",
     "errorModelTypeNotSupported": "このモデルタイプはサポートされていません",
@@ -61,6 +66,7 @@
     "finish": "完了",
     "genericLinkPlaceholder": "ここにリンクを貼り付けてください",
     "importAnother": "別のファイルをインポート",
+    "imported": "インポート済み",
     "jobId": "ジョブID",
     "loadingModels": "{type}を読み込み中...",
     "maxFileSize": "最大ファイルサイズ：{size}",
@@ -70,6 +76,30 @@
       "threeDModelPlaceholder": "3Dモデル"
     },
     "modelAssociatedWithLink": "ご提供いただいたリンクに関連付けられているモデル：",
+    "modelInfo": {
+      "addBaseModel": "ベースモデルを追加...",
+      "addTag": "タグを追加...",
+      "additionalTags": "追加タグ",
+      "baseModelUnknown": "ベースモデル不明",
+      "basicInfo": "基本情報",
+      "compatibleBaseModels": "互換性のあるベースモデル",
+      "description": "説明",
+      "descriptionNotSet": "説明が設定されていません",
+      "descriptionPlaceholder": "このモデルの説明を追加...",
+      "displayName": "表示名",
+      "editDisplayName": "表示名を編集",
+      "fileName": "ファイル名",
+      "modelDescription": "モデル説明",
+      "modelTagging": "モデルタグ付け",
+      "modelType": "モデルタイプ",
+      "noAdditionalTags": "追加タグなし",
+      "selectModelPrompt": "モデルを選択して情報を表示してください",
+      "selectModelType": "モデルタイプを選択...",
+      "source": "ソース",
+      "title": "モデル情報",
+      "triggerPhrases": "トリガーフレーズ",
+      "viewOnSource": "{source} で表示"
+    },
     "modelName": "モデル名",
     "modelNamePlaceholder": "このモデルの名前を入力してください",
     "modelTypeSelectorLabel": "モデルの種類は何ですか？",
@@ -684,6 +714,7 @@
     "clearAll": "すべてクリア",
     "clearFilters": "フィルターをクリア",
     "close": "閉じる",
+    "closeDialog": "ダイアログを閉じる",
     "color": "色",
     "comfy": "Comfy",
     "comfyOrgLogoAlt": "ComfyOrgロゴ",
@@ -700,6 +731,7 @@
     "control_before_generate": "生成前の制御",
     "copied": "コピーしました",
     "copy": "コピー",
+    "copyAll": "すべてコピー",
     "copyJobId": "ジョブIDをコピー",
     "copyToClipboard": "クリップボードにコピー",
     "copyURL": "URLをコピー",
@@ -762,6 +794,8 @@
     "goToNode": "ノードに移動",
     "graphNavigation": "グラフナビゲーション",
     "halfSpeed": "0.5倍速",
+    "hideLeftPanel": "左パネルを非表示",
+    "hideRightPanel": "右パネルを非表示",
     "icon": "アイコン",
     "imageFailedToLoad": "画像の読み込みに失敗しました",
     "imagePreview": "画像プレビュー - 矢印キーで画像を切り替え",
@@ -803,6 +837,7 @@
     "name": "名前",
     "newFolder": "新しいフォルダー",
     "next": "次へ",
+    "nightly": "NIGHTLY",
     "no": "いいえ",
     "noAudioRecorded": "音声が録音されていません",
     "noItems": "項目がありません",
@@ -817,6 +852,7 @@
     "nodeSlotsError": "ノードスロットエラー",
     "nodeWidgetsError": "ノードウィジェットエラー",
     "nodes": "ノード",
+    "nodesCount": "{count} ノード | {count} ノード | {count} ノード",
     "nodesRunning": "ノードが実行中",
     "none": "なし",
     "nothingToCopy": "コピーするものがありません",
@@ -891,7 +927,9 @@
     "selectedFile": "選択されたファイル",
     "setAsBackground": "背景として設定",
     "settings": "設定",
+    "showLeftPanel": "左パネルを表示",
     "showReport": "レポートを表示",
+    "showRightPanel": "右パネルを表示",
     "singleSelectDropdown": "単一選択ドロップダウン",
     "sort": "並び替え",
     "source": "ソース",
@@ -914,6 +952,7 @@
     "updating": "更新中",
     "upload": "アップロード",
     "usageHint": "使用ヒント",
+    "use": "使用",
     "user": "ユーザー",
     "versionMismatchWarning": "バージョン互換性の警告",
     "versionMismatchWarningMessage": "{warning}: {detail} 更新手順については https://docs.comfy.org/installation/update_comfyui#common-update-issues をご覧ください。",
@@ -921,11 +960,10 @@
     "videoPreview": "ビデオプレビュー - 矢印キーでビデオを切り替え",
     "viewImageOfTotal": "画像 {index} / {total} を表示",
     "viewVideoOfTotal": "ビデオ {index} / {total} を表示",
-    "vitePreloadErrorMessage": "アプリの新しいバージョンがリリースされました。再読み込みしますか？\n再読み込みしない場合、アプリの一部が正しく動作しない可能性があります。\n再読み込み前に進行状況を保存してから拒否することもできます。",
-    "vitePreloadErrorTitle": "新しいバージョンが利用可能",
     "volume": "音量",
     "warning": "警告",
-    "workflow": "ワークフロー"
+    "workflow": "ワークフロー",
+    "you": "あなた"
   },
   "graphCanvasMenu": {
     "fitView": "ビューに合わせる",
@@ -1617,17 +1655,25 @@
       "title": "このワークフローには不足しているノードがあります"
     }
   },
+  "nightly": {
+    "badge": {
+      "label": "プレビュー版",
+      "tooltip": "現在、ComfyUI のナイトリーバージョンを使用しています。これらの機能についてご意見があれば、フィードバックボタンからお知らせください。"
+    }
+  },
   "nodeCategories": {
     "": "",
     "3d": "3d",
     "3d_models": "3Dモデル",
     "BFL": "BFL",
+    "Bria": "Bria",
     "ByteDance": "ByteDance",
     "Gemini": "Gemini",
     "Ideogram": "Ideogram",
     "Kling": "Kling",
     "LTXV": "LTXV",
     "Luma": "Luma",
+    "Magnific": "Magnific",
     "Meshy": "Meshy",
     "MiniMax": "MiniMax",
     "Moonvalley Marey": "Moonvalley Marey",
@@ -1638,11 +1684,13 @@
     "Runway": "Runway",
     "Sora": "Sora",
     "Stability AI": "Stability AI",
+    "Tencent": "Tencent",
     "Topaz": "Topaz",
     "Tripo": "Tripo",
     "Veo": "Veo",
     "Vidu": "Vidu",
     "Wan": "Wan",
+    "WaveSpeed": "WaveSpeed",
     "_for_testing": "_テスト用",
     "advanced": "高度な機能",
     "animation": "アニメーション",
@@ -1852,6 +1900,7 @@
     },
     "groupSettings": "グループ設定",
     "groups": "グループ",
+    "hideAdvancedInputsButton": "詳細入力を非表示",
     "hideInput": "入力を非表示",
     "info": "情報",
     "inputs": "入力",
@@ -2084,6 +2133,7 @@
     "NodeLibrary": "ノードライブラリ",
     "Nodes 2_0": "Nodes 2.0",
     "Notification Preferences": "通知設定",
+    "Other": "その他",
     "PLY": "PLY",
     "PlanCredits": "プランとクレジット",
     "Pointer": "ポインタ",
@@ -2103,7 +2153,8 @@
     "Vue Nodes": "Vueノード",
     "VueNodes": "Vueノード",
     "Window": "ウィンドウ",
-    "Workflow": "ワークフロー"
+    "Workflow": "ワークフロー",
+    "Workspace": "ワークスペース"
   },
   "shape": {
     "CARD": "カード",
@@ -2129,12 +2180,14 @@
     "viewControls": "ビューコントロール"
   },
   "sideToolbar": {
+    "activeJobStatus": "アクティブジョブ: {status}",
     "assets": "アセット",
     "backToAssets": "すべてのアセットに戻る",
     "browseTemplates": "サンプルテンプレートを表示",
     "downloads": "ダウンロード",
     "generatedAssetsHeader": "生成されたアセット",
     "helpCenter": "ヘルプセンター",
+    "importedAssetsHeader": "インポート済みアセット",
     "labels": {
       "assets": "アセット",
       "console": "コンソール",
@@ -2179,6 +2232,7 @@
     "queue": "キュー",
     "queueProgressOverlay": {
       "activeJobs": "{count}件のアクティブジョブ",
+      "activeJobsShort": "{count} 件のアクティブ | {count} 件のアクティブ",
       "activeJobsSuffix": "アクティブジョブ",
       "cancelJobTooltip": "ジョブをキャンセル",
       "clearHistory": "ジョブキュー履歴をクリア",
@@ -2267,9 +2321,15 @@
     "beta": "ベータ版",
     "billedMonthly": "毎月請求",
     "billedYearly": "{total} 年間請求",
+    "billingComingSoon": {
+      "message": "チーム向けの請求機能が近日中に追加されます。ワークスペースごとに席数単位でプランに加入できるようになります。今後のアップデートをお待ちください。",
+      "title": "近日公開"
+    },
+    "cancelSubscription": "サブスクリプションをキャンセル",
     "changeTo": "{plan}に変更",
     "comfyCloud": "Comfy Cloud",
     "comfyCloudLogo": "Comfy Cloud ロゴ",
+    "contactOwnerToSubscribe": "サブスクリプションのためにワークスペースのオーナーに連絡してください",
     "contactUs": "お問い合わせ",
     "creditsRemainingThisMonth": "今月残りのクレジット",
     "creditsRemainingThisYear": "今年残りのクレジット",
@@ -2282,6 +2342,7 @@
     "haveQuestions": "ご質問やエンタープライズについてのお問い合わせはこちら",
     "invoiceHistory": "請求履歴",
     "learnMore": "詳細を見る",
+    "managePayment": "支払いを管理",
     "managePlan": "プランを管理",
     "manageSubscription": "サブスクリプションを管理",
     "maxDuration": {
@@ -2317,6 +2378,7 @@
     "subscribeToComfyCloud": "Comfy Cloudを購読",
     "subscribeToRun": "購読する",
     "subscribeToRunFull": "実行を購読",
+    "subscriptionRequiredMessage": "クラウドでワークフローを実行するにはメンバーにサブスクリプションが必要です",
     "tierNameYearly": "{name} 年間",
     "tiers": {
       "creator": {
@@ -2348,6 +2410,7 @@
     "viewMoreDetails": "詳細を表示",
     "viewMoreDetailsPlans": "プランと価格の詳細を見る",
     "viewUsageHistory": "利用履歴を表示",
+    "workspaceNotSubscribed": "このワークスペースはサブスクリプションに加入していません",
     "yearly": "年額",
     "yearlyCreditsLabel": "年間合計クレジット",
     "yearlyDiscount": "20%割引",
@@ -2449,6 +2512,7 @@
     "failedToLoadModel": "3Dモデルの読み込みに失敗しました",
     "failedToPurchaseCredits": "クレジットの購入に失敗しました: {error}",
     "failedToQueue": "キューに追加できませんでした",
+    "failedToSaveDraft": "ワークフロードラフトの保存に失敗しました",
     "failedToToggleCamera": "カメラの切り替えに失敗しました",
     "failedToToggleGrid": "グリッドの切り替えに失敗しました",
     "failedToUpdateBackgroundColor": "背景色の更新に失敗しました",
@@ -2497,7 +2561,8 @@
     "notSet": "未設定",
     "provider": "サインイン方法",
     "title": "ユーザー設定",
-    "updatePassword": "パスワードを更新"
+    "updatePassword": "パスワードを更新",
+    "workspaceSettings": "ワークスペース設定"
   },
   "validation": {
     "descriptionRequired": "説明が必要です",
@@ -2588,6 +2653,9 @@
     "saveWorkflow": "ワークフローを保存"
   },
   "workspace": {
+    "addedToWorkspace": "{workspaceName}に追加されました",
+    "inviteAccepted": "招待を承諾しました",
+    "inviteFailed": "招待の承諾に失敗しました",
     "unsavedChanges": {
       "message": "未保存の変更があります。破棄してワークスペースを切り替えますか？",
       "title": "未保存の変更"
@@ -2602,6 +2670,128 @@
       "workspaceNotFound": "ワークスペースが見つかりません"
     }
   },
+  "workspacePanel": {
+    "createWorkspaceDialog": {
+      "create": "作成",
+      "message": "ワークスペースはメンバーでクレジットプールを共有できます。作成後、あなたがオーナーになります。",
+      "nameLabel": "ワークスペース名*",
+      "namePlaceholder": "ワークスペース名を入力",
+      "title": "新しいワークスペースを作成"
+    },
+    "dashboard": {
+      "placeholder": "ダッシュボードのワークスペース設定"
+    },
+    "deleteDialog": {
+      "message": "未使用のクレジットや保存されていないアセットは失われます。この操作は元に戻せません。",
+      "messageWithName": "「{name}」を削除しますか？未使用のクレジットや保存されていないアセットは失われます。この操作は元に戻せません。",
+      "title": "このワークスペースを削除しますか？"
+    },
+    "editWorkspaceDialog": {
+      "nameLabel": "ワークスペース名",
+      "save": "保存",
+      "title": "ワークスペースの詳細を編集"
+    },
+    "invite": "招待",
+    "inviteLimitReached": "メンバーの上限50人に達しました",
+    "inviteMember": "メンバーを招待",
+    "inviteMemberDialog": {
+      "createLink": "リンクを作成",
+      "linkCopied": "コピーしました",
+      "linkCopyFailed": "コピーに失敗しました",
+      "linkStep": {
+        "copyLink": "リンクをコピー",
+        "done": "完了",
+        "message": "相手のアカウントがこのメールアドレスを使用していることを確認してください。",
+        "title": "このリンクを相手に送信してください"
+      },
+      "message": "共有可能な招待リンクを作成して送信してください",
+      "placeholder": "招待する人のメールアドレスを入力",
+      "title": "このワークスペースに人を招待"
+    },
+    "leaveDialog": {
+      "leave": "退出",
+      "message": "ワークスペースのオーナーに連絡しない限り、再参加できません。",
+      "title": "このワークスペースを退出しますか？"
+    },
+    "members": {
+      "actions": {
+        "copyLink": "招待リンクをコピー",
+        "removeMember": "メンバーを削除",
+        "revokeInvite": "招待を取り消す"
+      },
+      "columns": {
+        "expiryDate": "有効期限",
+        "inviteDate": "招待日",
+        "joinDate": "参加日"
+      },
+      "createNewWorkspace": "新しいワークスペースを作成してください。",
+      "membersCount": "{count}/50人のメンバー",
+      "noInvites": "保留中の招待はありません",
+      "noMembers": "メンバーがいません",
+      "pendingInvitesCount": "{count}件の招待保留中",
+      "personalWorkspaceMessage": "現在、個人用ワークスペースには他のメンバーを招待できません。メンバーを追加するには、",
+      "tabs": {
+        "active": "アクティブ",
+        "pendingCount": "保留中（{count}）"
+      }
+    },
+    "menu": {
+      "deleteWorkspace": "ワークスペースを削除",
+      "deleteWorkspaceDisabledTooltip": "まずワークスペースの有効なサブスクリプションをキャンセルしてください",
+      "editWorkspace": "ワークスペースの詳細を編集",
+      "leaveWorkspace": "ワークスペースを退出"
+    },
+    "removeMemberDialog": {
+      "error": "メンバーの削除に失敗しました",
+      "message": "このメンバーはワークスペースから削除されます。使用済みのクレジットは返金されません。",
+      "remove": "メンバーを削除",
+      "success": "メンバーを削除しました",
+      "title": "このメンバーを削除しますか？"
+    },
+    "revokeInviteDialog": {
+      "message": "このメンバーは今後ワークスペースに参加できなくなります。招待リンクは無効になります。",
+      "revoke": "招待を取り消す",
+      "title": "この人の招待を取り消しますか？"
+    },
+    "tabs": {
+      "dashboard": "ダッシュボード",
+      "membersCount": "メンバー（{count}）",
+      "planCredits": "プランとクレジット"
+    },
+    "toast": {
+      "failedToCreateWorkspace": "ワークスペースの作成に失敗しました",
+      "failedToDeleteWorkspace": "ワークスペースの削除に失敗しました",
+      "failedToFetchWorkspaces": "ワークスペースの読み込みに失敗しました",
+      "failedToLeaveWorkspace": "ワークスペースの退出に失敗しました",
+      "failedToUpdateWorkspace": "ワークスペースの更新に失敗しました",
+      "workspaceCreated": {
+        "message": "プランに加入し、チームメイトを招待して、コラボレーションを始めましょう。",
+        "subscribe": "プランに加入",
+        "title": "ワークスペースを作成しました"
+      },
+      "workspaceDeleted": {
+        "message": "ワークスペースは完全に削除されました。",
+        "title": "ワークスペースを削除しました"
+      },
+      "workspaceLeft": {
+        "message": "ワークスペースから退出しました。",
+        "title": "ワークスペースから退出しました"
+      },
+      "workspaceUpdated": {
+        "message": "ワークスペースの詳細が保存されました。",
+        "title": "ワークスペースが更新されました"
+      }
+    }
+  },
+  "workspaceSwitcher": {
+    "createWorkspace": "新しいワークスペースを作成",
+    "maxWorkspacesReached": "所有できるワークスペースは10個までです。新しく作成するには1つ削除してください。",
+    "personal": "個人用",
+    "roleMember": "メンバー",
+    "roleOwner": "オーナー",
+    "subscribe": "サブスクライブ",
+    "switchWorkspace": "ワークスペースを切り替え"
+  },
   "zoomControls": {
     "hideMinimap": "ミニマップを非表示",
     "label": "ズームコントロール",
diff --git a/src/locales/ja/nodeDefs.json b/src/locales/ja/nodeDefs.json
index ab87de52e..e4a1e77f7 100644
--- a/src/locales/ja/nodeDefs.json
+++ b/src/locales/ja/nodeDefs.json
@@ -328,6 +328,68 @@
       }
     }
   },
+  "BriaImageEditNode": {
+    "description": "Briaの最新モデルを使って画像を編集します",
+    "display_name": "Bria画像編集",
+    "inputs": {
+      "control_after_generate": {
+        "name": "生成後コントロール"
+      },
+      "guidance_scale": {
+        "name": "ガイダンススケール",
+        "tooltip": "値が高いほどプロンプトに忠実な画像になります。"
+      },
+      "image": {
+        "name": "画像"
+      },
+      "mask": {
+        "name": "マスク",
+        "tooltip": "省略した場合、編集は画像全体に適用されます。"
+      },
+      "model": {
+        "name": "model"
+      },
+      "moderation": {
+        "name": "モデレーション",
+        "tooltip": "モデレーション設定"
+      },
+      "moderation_prompt_content_moderation": {
+        "name": "プロンプト内容モデレーション"
+      },
+      "moderation_visual_input_moderation": {
+        "name": "入力画像モデレーション"
+      },
+      "moderation_visual_output_moderation": {
+        "name": "出力画像モデレーション"
+      },
+      "negative_prompt": {
+        "name": "ネガティブプロンプト"
+      },
+      "prompt": {
+        "name": "プロンプト",
+        "tooltip": "画像編集の指示"
+      },
+      "seed": {
+        "name": "シード"
+      },
+      "steps": {
+        "name": "ステップ数"
+      },
+      "structured_prompt": {
+        "name": "構造化プロンプト",
+        "tooltip": "JSON形式の構造化編集プロンプトを含む文字列。より正確でプログラム的な制御が必要な場合は通常のプロンプトの代わりに使用してください。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      },
+      "1": {
+        "name": "構造化プロンプト",
+        "tooltip": null
+      }
+    }
+  },
   "ByteDanceFirstLastFrameNode": {
     "description": "プロンプトと最初・最後のフレームを使用して動画を生成します。",
     "display_name": "ByteDance 最初-最後フレームから動画生成",
@@ -385,43 +447,6 @@
       }
     }
   },
-  "ByteDanceImageEditNode": {
-    "description": "プロンプトに基づいてAPI経由でByteDanceモデルを使用して画像を編集",
-    "display_name": "ByteDance画像編集",
-    "inputs": {
-      "control_after_generate": {
-        "name": "生成後の制御"
-      },
-      "guidance_scale": {
-        "name": "ガイダンススケール",
-        "tooltip": "値が高いほどプロンプトに忠実な画像になります"
-      },
-      "image": {
-        "name": "画像",
-        "tooltip": "編集するベース画像"
-      },
-      "model": {
-        "name": "モデル"
-      },
-      "prompt": {
-        "name": "プロンプト",
-        "tooltip": "画像編集の指示"
-      },
-      "seed": {
-        "name": "シード",
-        "tooltip": "生成に使用するシード値"
-      },
-      "watermark": {
-        "name": "透かし",
-        "tooltip": "画像に「AI生成」の透かしを追加するかどうか"
-      }
-    },
-    "outputs": {
-      "0": {
-        "tooltip": null
-      }
-    }
-  },
   "ByteDanceImageNode": {
     "description": "プロンプトに基づいてAPI経由でByteDanceモデルを使用して画像を生成",
     "display_name": "ByteDance画像",
@@ -2031,14 +2056,18 @@
       "choice": {
         "name": "選択"
       },
-      "option0": {
+      "index": {
+      },
+      "option1": {
       }
     },
-    "outputs": {
-      "0": {
+    "outputs": [
+      null,
+      {
+        "name": "インデックス",
         "tooltip": null
       }
-    }
+    ]
   },
   "DiffControlNetLoader": {
     "display_name": "ControlNetモデルを読み込む（diff）",
@@ -6390,6 +6419,60 @@
       }
     }
   },
+  "LoraLoaderBypass": {
+    "description": "LoRAをバイパスモードで適用します。通常のLoRAとは異なり、モデルの重みを変更せず、フォワードパス中にLoRAの計算を注入します。トレーニングシナリオで便利です。",
+    "display_name": "LoRAの読み込み（バイパス）（デバッグ用）",
+    "inputs": {
+      "clip": {
+        "name": "clip",
+        "tooltip": "LoRAを適用するCLIPモデル。"
+      },
+      "lora_name": {
+        "name": "lora_name",
+        "tooltip": "LoRAの名前。"
+      },
+      "model": {
+        "name": "model",
+        "tooltip": "LoRAを適用する拡散モデル。"
+      },
+      "strength_clip": {
+        "name": "strength_clip",
+        "tooltip": "CLIPモデルをどの程度変更するか。この値は負にもできます。"
+      },
+      "strength_model": {
+        "name": "strength_model",
+        "tooltip": "拡散モデルをどの程度変更するか。この値は負にもできます。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": "変更された拡散モデル。"
+      },
+      "1": {
+        "tooltip": "変更されたCLIPモデル。"
+      }
+    }
+  },
+  "LoraLoaderBypassModelOnly": {
+    "description": "LoRAをバイパスモードで適用します。通常のLoRAとは異なり、モデルの重みを変更せず、フォワードパス中にLoRAの計算を注入します。トレーニングシナリオで便利です。",
+    "display_name": "LoRAの読み込み（バイパス、モデルのみ）（デバッグ用）",
+    "inputs": {
+      "lora_name": {
+        "name": "lora_name"
+      },
+      "model": {
+        "name": "model"
+      },
+      "strength_model": {
+        "name": "strength_model"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": "変更された拡散モデル。"
+      }
+    }
+  },
   "LoraLoaderModelOnly": {
     "description": "LoRAは拡散およびCLIPモデルを修正するために使用され、潜在のノイズ除去方法を変更します。複数のLoRAノードを連結できます。",
     "display_name": "LoRAローダーモデルのみ",
@@ -6757,6 +6840,126 @@
       }
     }
   },
+  "MagnificImageRelightNode": {
+    "description": "画像のライティングを調整し、オプションで参照画像からの光の転送も可能です。",
+    "display_name": "Magnific 画像リライティング",
+    "inputs": {
+      "advanced_settings": {
+        "name": "advanced_settings",
+        "tooltip": "高度なライティング制御のための詳細設定。"
+      },
+      "change_background": {
+        "name": "change_background",
+        "tooltip": "プロンプトや参照画像に基づいて背景を変更します。"
+      },
+      "image": {
+        "name": "image",
+        "tooltip": "リライティングする画像。"
+      },
+      "interpolate_from_original": {
+        "name": "interpolate_from_original",
+        "tooltip": "生成の自由度を制限し、元画像により近づけます。"
+      },
+      "light_transfer_strength": {
+        "name": "light_transfer_strength",
+        "tooltip": "光転送の適用強度。"
+      },
+      "preserve_details": {
+        "name": "preserve_details",
+        "tooltip": "元画像の質感や細部を維持します。"
+      },
+      "prompt": {
+        "name": "prompt",
+        "tooltip": "ライティングのための説明的なガイダンス。強調表記（1-1.4）に対応。"
+      },
+      "reference_image": {
+        "name": "reference_image",
+        "tooltip": "光を転送するためのオプションの参照画像。"
+      },
+      "style": {
+        "name": "style",
+        "tooltip": "出力のスタイル設定。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "MagnificImageSkinEnhancerNode": {
+    "description": "複数の処理モードによるポートレートの肌補正。",
+    "display_name": "Magnific 画像スキンエンハンサー",
+    "inputs": {
+      "image": {
+        "name": "image",
+        "tooltip": "補正するポートレート画像。"
+      },
+      "mode": {
+        "name": "mode",
+        "tooltip": "処理モード：creative（芸術的補正）、faithful（元の外観を維持）、flexible（ターゲット最適化）。"
+      },
+      "sharpen": {
+        "name": "sharpen",
+        "tooltip": "シャープネスの強度レベル。"
+      },
+      "smart_grain": {
+        "name": "smart_grain",
+        "tooltip": "スマートグレインの強度レベル。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "MagnificImageStyleTransferNode": {
+    "description": "参照画像からスタイルを抽出し、入力画像に転送します。",
+    "display_name": "Magnific画像スタイル転送",
+    "inputs": {
+      "engine": {
+        "name": "engine",
+        "tooltip": "処理エンジンの選択。"
+      },
+      "fixed_generation": {
+        "name": "fixed_generation",
+        "tooltip": "無効にすると、各生成でランダム性が加わり、より多様な結果が得られます。"
+      },
+      "flavor": {
+        "name": "flavor",
+        "tooltip": "スタイル転送のフレーバー。"
+      },
+      "image": {
+        "name": "image",
+        "tooltip": "スタイル転送を適用する画像。"
+      },
+      "portrait_mode": {
+        "name": "portrait_mode",
+        "tooltip": "顔の強調のためにポートレートモードを有効にします。"
+      },
+      "prompt": {
+        "name": "prompt"
+      },
+      "reference_image": {
+        "name": "reference_image",
+        "tooltip": "スタイルを抽出する参照画像。"
+      },
+      "structure_strength": {
+        "name": "structure_strength",
+        "tooltip": "元画像の構造を維持します。"
+      },
+      "style_strength": {
+        "name": "style_strength",
+        "tooltip": "スタイル強度のパーセンテージ。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "Mahiro": {
     "description": "ネガティブなプロンプトとの差ではなく、ポジティブなプロンプトの「方向」によりスケールするようにガイダンスを修正します。",
     "display_name": "Mahiroはとても可愛いので、より良いガイダンス機能が必要です!! (。・ω・。)",
@@ -11209,19 +11412,28 @@
     }
   },
   "ResizeImageMaskNode": {
+    "description": "さまざまなスケーリング方法で画像またはマスクをリサイズします。",
     "display_name": "画像/マスクのリサイズ",
     "inputs": {
       "input": {
         "name": "input"
       },
       "resize_type": {
-        "name": "resize_type"
+        "name": "resize_type",
+        "tooltip": "リサイズ方法を選択します：正確な寸法、スケール係数、他の画像に合わせるなど。"
       },
-      "resize_type_multiplier": {
-        "name": "multiplier"
+      "resize_type_crop": {
+        "name": "切り抜き"
+      },
+      "resize_type_height": {
+        "name": "高さ"
+      },
+      "resize_type_width": {
+        "name": "幅"
       },
       "scale_method": {
-        "name": "scale_method"
+        "name": "scale_method",
+        "tooltip": "補間アルゴリズム。「area」は縮小に最適、「lanczos」は拡大に最適、「nearest-exact」はドット絵に最適です。"
       }
     },
     "outputs": {
@@ -13355,6 +13567,84 @@
       }
     }
   },
+  "TencentImageToModelNode": {
+    "display_name": "Hunyuan3D: 画像からモデルへ (Pro)",
+    "inputs": {
+      "control_after_generate": {
+        "name": "生成後のコントロール"
+      },
+      "face_count": {
+        "name": "面数"
+      },
+      "generate_type": {
+        "name": "生成タイプ"
+      },
+      "generate_type_pbr": {
+        "name": "PBR"
+      },
+      "image": {
+        "name": "画像"
+      },
+      "image_back": {
+        "name": "背面画像"
+      },
+      "image_left": {
+        "name": "左画像"
+      },
+      "image_right": {
+        "name": "右画像"
+      },
+      "model": {
+        "name": "モデル",
+        "tooltip": "`3.1`モデルではLowPolyオプションは利用できません。"
+      },
+      "seed": {
+        "name": "シード",
+        "tooltip": "シードはノードの再実行を制御しますが、シードに関わらず結果は非決定的です。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "モデルファイル",
+        "tooltip": null
+      }
+    }
+  },
+  "TencentTextToModelNode": {
+    "display_name": "Hunyuan3D: テキストからモデルへ (Pro)",
+    "inputs": {
+      "control_after_generate": {
+        "name": "生成後のコントロール"
+      },
+      "face_count": {
+        "name": "面数"
+      },
+      "generate_type": {
+        "name": "生成タイプ"
+      },
+      "generate_type_pbr": {
+        "name": "PBR"
+      },
+      "model": {
+        "name": "モデル",
+        "tooltip": "`3.1`モデルではLowPolyオプションは利用できません。"
+      },
+      "prompt": {
+        "name": "プロンプト",
+        "tooltip": "最大1024文字まで対応しています。"
+      },
+      "seed": {
+        "name": "シード",
+        "tooltip": "シードはノードの再実行を制御しますが、シードに関わらず結果は非決定的です。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "モデルファイル",
+        "tooltip": null
+      }
+    }
+  },
   "TextEncodeAceStepAudio": {
     "display_name": "TextEncodeAceStepAudio",
     "inputs": {
@@ -13450,6 +13740,40 @@
       }
     }
   },
+  "TextEncodeZImageOmni": {
+    "display_name": "TextEncodeZImageOmni",
+    "inputs": {
+      "auto_resize_images": {
+        "name": "画像自動リサイズ"
+      },
+      "clip": {
+        "name": "clip"
+      },
+      "image1": {
+        "name": "画像1"
+      },
+      "image2": {
+        "name": "画像2"
+      },
+      "image3": {
+        "name": "画像3"
+      },
+      "image_encoder": {
+        "name": "画像エンコーダ"
+      },
+      "prompt": {
+        "name": "プロンプト"
+      },
+      "vae": {
+        "name": "vae"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "TextToLowercase": {
     "display_name": "テキストを小文字に変換",
     "inputs": {
@@ -13655,6 +13979,10 @@
         "name": "バケットモード",
         "tooltip": "解像度バケットモードを有効にします。有効時は、ResolutionBucketノードから事前にバケット化されたlatentを期待します。"
       },
+      "bypass_mode": {
+        "name": "bypass_mode",
+        "tooltip": "トレーニング用のバイパスモードを有効にします。有効にすると、アダプターは重みの変更ではなくフォワードフックで適用されます。重みを直接変更できない量子化モデルで便利です。"
+      },
       "control_after_generate": {
         "name": "control after generate"
       },
@@ -15621,6 +15949,79 @@
       }
     }
   },
+  "WanInfiniteTalkToVideo": {
+    "display_name": "WanInfiniteTalkToVideo",
+    "inputs": {
+      "audio_encoder_output_1": {
+        "name": "オーディオエンコーダ出力1"
+      },
+      "audio_scale": {
+        "name": "オーディオスケール"
+      },
+      "clip_vision_output": {
+        "name": "clipビジョン出力"
+      },
+      "height": {
+        "name": "高さ"
+      },
+      "length": {
+        "name": "長さ"
+      },
+      "mode": {
+        "name": "モード"
+      },
+      "model": {
+        "name": "モデル"
+      },
+      "model_patch": {
+        "name": "モデルパッチ"
+      },
+      "motion_frame_count": {
+        "name": "モーションフレーム数",
+        "tooltip": "動きのコンテキストとして使用する前のフレーム数。"
+      },
+      "negative": {
+        "name": "ネガティブ"
+      },
+      "positive": {
+        "name": "ポジティブ"
+      },
+      "previous_frames": {
+        "name": "前のフレーム"
+      },
+      "start_image": {
+        "name": "開始画像"
+      },
+      "vae": {
+        "name": "vae"
+      },
+      "width": {
+        "name": "幅"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "モデル",
+        "tooltip": null
+      },
+      "1": {
+        "name": "ポジティブ",
+        "tooltip": null
+      },
+      "2": {
+        "name": "ネガティブ",
+        "tooltip": null
+      },
+      "3": {
+        "name": "潜在",
+        "tooltip": null
+      },
+      "4": {
+        "name": "トリム画像",
+        "tooltip": null
+      }
+    }
+  },
   "WanMoveConcatTrack": {
     "display_name": "WanMoveConcatTrack",
     "inputs": {
@@ -16137,6 +16538,43 @@
       }
     }
   },
+  "WavespeedFlashVSRNode": {
+    "description": "低解像度やぼやけた映像の解像度を向上させ、鮮明さを復元する高速・高品質なビデオアップスケーラーです。",
+    "display_name": "FlashVSRビデオ高解像度化",
+    "inputs": {
+      "target_resolution": {
+        "name": "目標解像度"
+      },
+      "video": {
+        "name": "ビデオ"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "WavespeedImageUpscaleNode": {
+    "description": "画像の解像度と品質を向上させ、写真を4Kや8Kにアップスケールしてシャープで詳細な結果を得られます。",
+    "display_name": "WaveSpeed画像高解像度化",
+    "inputs": {
+      "image": {
+        "name": "画像"
+      },
+      "model": {
+        "name": "model"
+      },
+      "target_resolution": {
+        "name": "目標解像度"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "WebcamCapture": {
     "display_name": "ウェブカメラキャプチャ",
     "inputs": {
diff --git a/src/locales/ja/settings.json b/src/locales/ja/settings.json
index 3b60db826..d24450fd0 100644
--- a/src/locales/ja/settings.json
+++ b/src/locales/ja/settings.json
@@ -52,7 +52,8 @@
     }
   },
   "Comfy_Canvas_SelectionToolbox": {
-    "name": "選択ツールボックスを表示"
+    "name": "選択ツールボックスを表示",
+    "tooltip": "ノードが選択されているときにフローティングツールバーを表示し、よく使う操作に素早くアクセスできます。"
   },
   "Comfy_ConfirmClear": {
     "name": "ワークフローをクリアする際に確認を要求する"
@@ -147,7 +148,8 @@
       "Linear": "リニア",
       "Spline": "スプライン",
       "Straight": "ストレート"
-    }
+    },
+    "tooltip": "キャンバス上のノード間の接続リンクの外観と表示を制御します。"
   },
   "Comfy_Load3D_3DViewerEnable": {
     "name": "3Dビューアーを有効化（ベータ）",
@@ -272,6 +274,10 @@
   "Comfy_Node_AllowImageSizeDraw": {
     "name": "画像プレビューの下に幅×高さを表示する"
   },
+  "Comfy_Node_AlwaysShowAdvancedWidgets": {
+    "name": "すべてのノードで常に高度なウィジェットを表示",
+    "tooltip": "有効にすると、すべてのノードで高度なウィジェットが個別に展開しなくても常に表示されます。"
+  },
   "Comfy_Node_AutoSnapLinkToSlot": {
     "name": "ノードスロットにリンクを自動スナップ",
     "tooltip": "ノードの上にリンクをドラッグすると、リンクがノードの有効な入力スロットに自動的にスナップします"
@@ -470,6 +476,7 @@
     "tooltip": "リルート中心点からのベジエ制御点のオフセット"
   },
   "pysssss_SnapToGrid": {
-    "name": "常にグリッドにスナップ"
+    "name": "常にグリッドにスナップ",
+    "tooltip": "有効にすると、ノードを移動またはサイズ変更した際に自動的にグリッドに揃えます。"
   }
 }
diff --git a/src/locales/ko/main.json b/src/locales/ko/main.json
index 939f3ae53..524b89cf2 100644
--- a/src/locales/ko/main.json
+++ b/src/locales/ko/main.json
@@ -24,6 +24,7 @@
     "assets": "에셋",
     "baseModels": "베이스 모델",
     "browseAssets": "에셋 탐색",
+    "byType": "유형별",
     "checkpoints": "체크포인트",
     "civitaiLinkExample": "{example} {link}",
     "civitaiLinkExampleStrong": "예시:",
@@ -45,6 +46,10 @@
       "failed": "다운로드 실패",
       "inProgress": "{assetName} 다운로드 중..."
     },
+    "emptyImported": {
+      "canImport": "아직 가져온 모델이 없습니다. \"모델 가져오기\"를 클릭하여 직접 추가하세요.",
+      "restricted": "개인 모델은 Creator 등급 이상에서만 사용할 수 있습니다."
+    },
     "errorFileTooLarge": "파일이 허용된 최대 크기 제한을 초과했습니다",
     "errorFormatNotAllowed": "SafeTensor 형식만 허용됩니다",
     "errorModelTypeNotSupported": "이 모델 유형은 지원되지 않습니다",
@@ -61,6 +66,7 @@
     "finish": "완료",
     "genericLinkPlaceholder": "여기에 링크를 붙여넣으세요",
     "importAnother": "다른 항목 가져오기",
+    "imported": "가져온 항목",
     "jobId": "작업 ID",
     "loadingModels": "{type} 불러오는 중...",
     "maxFileSize": "최대 파일 크기: {size}",
@@ -70,6 +76,30 @@
       "threeDModelPlaceholder": "3D 모델"
     },
     "modelAssociatedWithLink": "제공하신 링크와 연결된 모델:",
+    "modelInfo": {
+      "addBaseModel": "베이스 모델 추가...",
+      "addTag": "태그 추가...",
+      "additionalTags": "추가 태그",
+      "baseModelUnknown": "베이스 모델 알 수 없음",
+      "basicInfo": "기본 정보",
+      "compatibleBaseModels": "호환 가능한 베이스 모델",
+      "description": "설명",
+      "descriptionNotSet": "설정된 설명 없음",
+      "descriptionPlaceholder": "이 모델에 대한 설명을 추가하세요...",
+      "displayName": "표시 이름",
+      "editDisplayName": "표시 이름 편집",
+      "fileName": "파일 이름",
+      "modelDescription": "모델 설명",
+      "modelTagging": "모델 태깅",
+      "modelType": "모델 유형",
+      "noAdditionalTags": "추가 태그 없음",
+      "selectModelPrompt": "모델을 선택하여 정보를 확인하세요",
+      "selectModelType": "모델 유형 선택...",
+      "source": "소스",
+      "title": "모델 정보",
+      "triggerPhrases": "트리거 문구",
+      "viewOnSource": "{source}에서 보기"
+    },
     "modelName": "모델 이름",
     "modelNamePlaceholder": "이 모델의 이름을 입력하세요",
     "modelTypeSelectorLabel": "모델 유형은 무엇인가요?",
@@ -684,6 +714,7 @@
     "clearAll": "모두 지우기",
     "clearFilters": "필터 지우기",
     "close": "닫기",
+    "closeDialog": "대화 상자 닫기",
     "color": "색상",
     "comfy": "Comfy",
     "comfyOrgLogoAlt": "ComfyOrg 로고",
@@ -700,6 +731,7 @@
     "control_before_generate": "생성 전 제어",
     "copied": "복사됨",
     "copy": "복사",
+    "copyAll": "모두 복사",
     "copyJobId": "작업 ID 복사",
     "copyToClipboard": "클립보드에 복사",
     "copyURL": "URL 복사",
@@ -762,6 +794,8 @@
     "goToNode": "노드로 이동",
     "graphNavigation": "그래프 탐색",
     "halfSpeed": "0.5배속",
+    "hideLeftPanel": "왼쪽 패널 숨기기",
+    "hideRightPanel": "오른쪽 패널 숨기기",
     "icon": "아이콘",
     "imageFailedToLoad": "이미지를 로드하지 못했습니다.",
     "imagePreview": "이미지 미리보기 - 화살표 키를 사용하여 이미지 간 이동",
@@ -803,6 +837,7 @@
     "name": "이름",
     "newFolder": "새 폴더",
     "next": "다음",
+    "nightly": "NIGHTLY",
     "no": "아니오",
     "noAudioRecorded": "녹음된 오디오가 없습니다",
     "noItems": "항목 없음",
@@ -817,6 +852,7 @@
     "nodeSlotsError": "노드 슬롯 오류",
     "nodeWidgetsError": "노드 위젯 오류",
     "nodes": "노드",
+    "nodesCount": "{count}개 노드 | {count}개 노드 | {count}개 노드",
     "nodesRunning": "노드 실행 중",
     "none": "없음",
     "nothingToCopy": "복사할 항목 없음",
@@ -891,7 +927,9 @@
     "selectedFile": "선택된 파일",
     "setAsBackground": "배경으로 설정",
     "settings": "설정",
+    "showLeftPanel": "왼쪽 패널 표시",
     "showReport": "보고서 보기",
+    "showRightPanel": "오른쪽 패널 표시",
     "singleSelectDropdown": "단일 선택 드롭다운",
     "sort": "정렬",
     "source": "소스",
@@ -914,6 +952,7 @@
     "updating": "업데이트 중",
     "upload": "업로드",
     "usageHint": "사용 힌트",
+    "use": "사용",
     "user": "사용자",
     "versionMismatchWarning": "버전 호환성 경고",
     "versionMismatchWarningMessage": "{warning}: {detail} 업데이트 지침은 https://docs.comfy.org/installation/update_comfyui#common-update-issues 를 방문하세요.",
@@ -921,11 +960,10 @@
     "videoPreview": "비디오 미리보기 - 화살표 키를 사용하여 비디오 간 이동",
     "viewImageOfTotal": "이미지 {index}/{total} 보기",
     "viewVideoOfTotal": "비디오 {index}/{total} 보기",
-    "vitePreloadErrorMessage": "앱의 새 버전이 출시되었습니다. 새로고침하시겠습니까?\n그렇지 않으면 앱의 일부 기능이 예상대로 작동하지 않을 수 있습니다.\n새로고침하기 전에 진행 상황을 저장하고 거부하는 것도 가능합니다.",
-    "vitePreloadErrorTitle": "새 버전 사용 가능",
     "volume": "볼륨",
     "warning": "경고",
-    "workflow": "워크플로"
+    "workflow": "워크플로",
+    "you": "당신"
   },
   "graphCanvasMenu": {
     "fitView": "보기 맞춤",
@@ -1617,17 +1655,25 @@
       "title": "이 워크플로우에 누락된 노드가 있습니다"
     }
   },
+  "nightly": {
+    "badge": {
+      "label": "미리보기 버전",
+      "tooltip": "현재 ComfyUI의 나이트리 버전을 사용 중입니다. 이 기능들에 대한 의견을 피드백 버튼을 통해 공유해 주세요."
+    }
+  },
   "nodeCategories": {
     "": "",
     "3d": "3d",
     "3d_models": "3D 모델",
     "BFL": "BFL",
+    "Bria": "Bria",
     "ByteDance": "ByteDance",
     "Gemini": "Gemini",
     "Ideogram": "Ideogram",
     "Kling": "Kling",
     "LTXV": "LTXV",
     "Luma": "Luma",
+    "Magnific": "Magnific",
     "Meshy": "Meshy",
     "MiniMax": "MiniMax",
     "Moonvalley Marey": "Moonvalley Marey",
@@ -1638,11 +1684,13 @@
     "Runway": "Runway",
     "Sora": "Sora",
     "Stability AI": "Stability AI",
+    "Tencent": "Tencent",
     "Topaz": "Topaz",
     "Tripo": "Tripo",
     "Veo": "Veo",
     "Vidu": "Vidu",
     "Wan": "Wan",
+    "WaveSpeed": "WaveSpeed",
     "_for_testing": "_테스트용",
     "advanced": "고급",
     "animation": "애니메이션",
@@ -1852,6 +1900,7 @@
     },
     "groupSettings": "그룹 설정",
     "groups": "그룹",
+    "hideAdvancedInputsButton": "고급 입력 숨기기",
     "hideInput": "입력 숨기기",
     "info": "정보",
     "inputs": "입력",
@@ -2084,6 +2133,7 @@
     "NodeLibrary": "노드 라이브러리",
     "Nodes 2_0": "Nodes 2.0",
     "Notification Preferences": "알림 환경설정",
+    "Other": "기타",
     "PLY": "PLY",
     "PlanCredits": "플랜 및 크레딧",
     "Pointer": "포인터",
@@ -2103,7 +2153,8 @@
     "Vue Nodes": "Vue 노드",
     "VueNodes": "Vue 노드",
     "Window": "창",
-    "Workflow": "워크플로"
+    "Workflow": "워크플로",
+    "Workspace": "워크스페이스"
   },
   "shape": {
     "CARD": "카드",
@@ -2129,12 +2180,14 @@
     "viewControls": "보기 컨트롤"
   },
   "sideToolbar": {
+    "activeJobStatus": "진행 중인 작업: {status}",
     "assets": "에셋",
     "backToAssets": "모든 에셋으로 돌아가기",
     "browseTemplates": "예제 템플릿 탐색",
     "downloads": "다운로드",
     "generatedAssetsHeader": "생성된 에셋",
     "helpCenter": "도움말 센터",
+    "importedAssetsHeader": "가져온 에셋",
     "labels": {
       "assets": "에셋",
       "console": "콘솔",
@@ -2179,6 +2232,7 @@
     "queue": "실행 대기열",
     "queueProgressOverlay": {
       "activeJobs": "{count}개의 활성 작업",
+      "activeJobsShort": "{count}개 활성",
       "activeJobsSuffix": "활성 작업",
       "cancelJobTooltip": "작업 취소",
       "clearHistory": "작업 대기열 기록 삭제",
@@ -2267,9 +2321,15 @@
     "beta": "베타",
     "billedMonthly": "매월 결제",
     "billedYearly": "{total} 연간 결제",
+    "billingComingSoon": {
+      "message": "팀 결제 기능이 곧 제공됩니다. 워크스페이스별 좌석당 요금제로 구독할 수 있습니다. 업데이트를 기대해 주세요.",
+      "title": "곧 출시 예정"
+    },
+    "cancelSubscription": "구독 취소",
     "changeTo": "{plan}로 변경",
     "comfyCloud": "Comfy Cloud",
     "comfyCloudLogo": "Comfy Cloud 로고",
+    "contactOwnerToSubscribe": "워크스페이스 소유자에게 구독을 요청하세요",
     "contactUs": "문의하기",
     "creditsRemainingThisMonth": "이번 달 남은 크레딧",
     "creditsRemainingThisYear": "올해 남은 크레딧",
@@ -2282,6 +2342,7 @@
     "haveQuestions": "질문이 있거나 엔터프라이즈가 궁금하신가요?",
     "invoiceHistory": "청구서 기록",
     "learnMore": "더 알아보기",
+    "managePayment": "결제 관리",
     "managePlan": "플랜 관리",
     "manageSubscription": "구독 관리",
     "maxDuration": {
@@ -2317,6 +2378,7 @@
     "subscribeToComfyCloud": "Comfy Cloud 구독",
     "subscribeToRun": "구독",
     "subscribeToRunFull": "실행 구독",
+    "subscriptionRequiredMessage": "클라우드에서 워크플로우를 실행하려면 멤버가 구독해야 합니다",
     "tierNameYearly": "{name} 연간",
     "tiers": {
       "creator": {
@@ -2348,6 +2410,7 @@
     "viewMoreDetails": "자세히 보기",
     "viewMoreDetailsPlans": "플랜 및 가격에 대한 자세한 정보 보기",
     "viewUsageHistory": "사용 기록 보기",
+    "workspaceNotSubscribed": "이 워크스페이스는 구독 중이 아닙니다",
     "yearly": "연간",
     "yearlyCreditsLabel": "연간 총 크레딧",
     "yearlyDiscount": "20% 할인",
@@ -2449,6 +2512,7 @@
     "failedToLoadModel": "3D 모델을 로드하지 못함",
     "failedToPurchaseCredits": "크레딧 구매에 실패했습니다: {error}",
     "failedToQueue": "대기열 추가 실패",
+    "failedToSaveDraft": "워크플로우 초안 저장에 실패했습니다",
     "failedToToggleCamera": "카메라 전환 실패",
     "failedToToggleGrid": "그리드 전환 실패",
     "failedToUpdateBackgroundColor": "배경색 업데이트 실패",
@@ -2497,7 +2561,8 @@
     "notSet": "설정되지 않음",
     "provider": "로그인 방법",
     "title": "사용자 설정",
-    "updatePassword": "비밀번호 업데이트"
+    "updatePassword": "비밀번호 업데이트",
+    "workspaceSettings": "워크스페이스 설정"
   },
   "validation": {
     "descriptionRequired": "설명은 필수입니다",
@@ -2588,6 +2653,9 @@
     "saveWorkflow": "워크플로 저장"
   },
   "workspace": {
+    "addedToWorkspace": "{workspaceName} 워크스페이스에 추가되었습니다",
+    "inviteAccepted": "초대 수락됨",
+    "inviteFailed": "초대 수락에 실패했습니다",
     "unsavedChanges": {
       "message": "저장되지 않은 변경 사항이 있습니다. 변경 사항을 취소하고 워크스페이스를 전환하시겠습니까?",
       "title": "저장되지 않은 변경 사항"
@@ -2602,6 +2670,128 @@
       "workspaceNotFound": "워크스페이스를 찾을 수 없습니다."
     }
   },
+  "workspacePanel": {
+    "createWorkspaceDialog": {
+      "create": "만들기",
+      "message": "워크스페이스는 멤버들이 크레딧을 공유할 수 있게 해줍니다. 생성 후 소유자가 됩니다.",
+      "nameLabel": "워크스페이스 이름*",
+      "namePlaceholder": "워크스페이스 이름 입력",
+      "title": "새 워크스페이스 만들기"
+    },
+    "dashboard": {
+      "placeholder": "대시보드 워크스페이스 설정"
+    },
+    "deleteDialog": {
+      "message": "사용하지 않은 크레딧이나 저장되지 않은 자산이 모두 삭제됩니다. 이 작업은 되돌릴 수 없습니다.",
+      "messageWithName": "\"{name}\"을(를) 삭제하시겠습니까? 사용하지 않은 크레딧이나 저장되지 않은 자산이 모두 삭제됩니다. 이 작업은 되돌릴 수 없습니다.",
+      "title": "이 워크스페이스를 삭제하시겠습니까?"
+    },
+    "editWorkspaceDialog": {
+      "nameLabel": "워크스페이스 이름",
+      "save": "저장",
+      "title": "워크스페이스 정보 수정"
+    },
+    "invite": "초대",
+    "inviteLimitReached": "최대 50명의 멤버에 도달했습니다",
+    "inviteMember": "멤버 초대",
+    "inviteMemberDialog": {
+      "createLink": "링크 생성",
+      "linkCopied": "복사됨",
+      "linkCopyFailed": "링크 복사 실패",
+      "linkStep": {
+        "copyLink": "링크 복사",
+        "done": "완료",
+        "message": "상대방 계정이 이 이메일을 사용하는지 확인하세요.",
+        "title": "이 링크를 상대방에게 보내세요"
+      },
+      "message": "공유 가능한 초대 링크를 생성하여 상대방에게 보내세요",
+      "placeholder": "이메일을 입력하세요",
+      "title": "이 워크스페이스에 사람 초대"
+    },
+    "leaveDialog": {
+      "leave": "나가기",
+      "message": "워크스페이스 소유자에게 연락하지 않으면 다시 참여할 수 없습니다.",
+      "title": "이 워크스페이스를 나가시겠습니까?"
+    },
+    "members": {
+      "actions": {
+        "copyLink": "초대 링크 복사",
+        "removeMember": "멤버 제거",
+        "revokeInvite": "초대 취소"
+      },
+      "columns": {
+        "expiryDate": "만료 날짜",
+        "inviteDate": "초대 날짜",
+        "joinDate": "가입 날짜"
+      },
+      "createNewWorkspace": "새 워크스페이스를 만드세요.",
+      "membersCount": "{count}/50 멤버",
+      "noInvites": "대기 중인 초대 없음",
+      "noMembers": "멤버 없음",
+      "pendingInvitesCount": "{count}건의 초대 대기 중 | {count}건의 초대 대기 중",
+      "personalWorkspaceMessage": "현재 개인 워크스페이스에는 다른 멤버를 초대할 수 없습니다. 멤버를 추가하려면",
+      "tabs": {
+        "active": "활성",
+        "pendingCount": "대기 중 ({count})"
+      }
+    },
+    "menu": {
+      "deleteWorkspace": "워크스페이스 삭제",
+      "deleteWorkspaceDisabledTooltip": "먼저 워크스페이스의 활성 구독을 취소하세요",
+      "editWorkspace": "워크스페이스 정보 수정",
+      "leaveWorkspace": "워크스페이스 나가기"
+    },
+    "removeMemberDialog": {
+      "error": "멤버 제거에 실패했습니다",
+      "message": "이 멤버는 워크스페이스에서 제거됩니다. 사용한 크레딧은 환불되지 않습니다.",
+      "remove": "멤버 제거",
+      "success": "멤버가 제거되었습니다",
+      "title": "이 멤버를 제거하시겠습니까?"
+    },
+    "revokeInviteDialog": {
+      "message": "이 멤버는 더 이상 워크스페이스에 참여할 수 없습니다. 초대 링크가 무효화됩니다.",
+      "revoke": "초대 취소",
+      "title": "이 사람의 초대를 취소하시겠습니까?"
+    },
+    "tabs": {
+      "dashboard": "대시보드",
+      "membersCount": "멤버 ({count})",
+      "planCredits": "플랜 및 크레딧"
+    },
+    "toast": {
+      "failedToCreateWorkspace": "워크스페이스 생성에 실패했습니다",
+      "failedToDeleteWorkspace": "워크스페이스 삭제에 실패했습니다",
+      "failedToFetchWorkspaces": "워크스페이스 불러오기에 실패했습니다",
+      "failedToLeaveWorkspace": "워크스페이스 나가기에 실패했습니다",
+      "failedToUpdateWorkspace": "워크스페이스 업데이트에 실패했습니다",
+      "workspaceCreated": {
+        "message": "요금제 구독, 팀원 초대, 협업을 시작하세요.",
+        "subscribe": "구독하기",
+        "title": "워크스페이스 생성됨"
+      },
+      "workspaceDeleted": {
+        "message": "워크스페이스가 영구적으로 삭제되었습니다.",
+        "title": "워크스페이스 삭제됨"
+      },
+      "workspaceLeft": {
+        "message": "워크스페이스에서 나갔습니다.",
+        "title": "워크스페이스에서 나감"
+      },
+      "workspaceUpdated": {
+        "message": "워크스페이스 정보가 저장되었습니다.",
+        "title": "워크스페이스가 업데이트되었습니다"
+      }
+    }
+  },
+  "workspaceSwitcher": {
+    "createWorkspace": "새 워크스페이스 만들기",
+    "maxWorkspacesReached": "최대 10개의 워크스페이스만 소유할 수 있습니다. 새로 만들려면 하나를 삭제하세요.",
+    "personal": "개인",
+    "roleMember": "멤버",
+    "roleOwner": "소유자",
+    "subscribe": "구독하기",
+    "switchWorkspace": "워크스페이스 전환"
+  },
   "zoomControls": {
     "hideMinimap": "미니맵 숨기기",
     "label": "줌 컨트롤",
diff --git a/src/locales/ko/nodeDefs.json b/src/locales/ko/nodeDefs.json
index 78f414856..bc12bcd6f 100644
--- a/src/locales/ko/nodeDefs.json
+++ b/src/locales/ko/nodeDefs.json
@@ -328,6 +328,68 @@
       }
     }
   },
+  "BriaImageEditNode": {
+    "description": "Bria 최신 모델을 사용하여 이미지를 편집합니다",
+    "display_name": "Bria 이미지 편집",
+    "inputs": {
+      "control_after_generate": {
+        "name": "생성 후 제어"
+      },
+      "guidance_scale": {
+        "name": "가이던스 스케일",
+        "tooltip": "값이 높을수록 프롬프트를 더 엄격하게 따릅니다."
+      },
+      "image": {
+        "name": "image"
+      },
+      "mask": {
+        "name": "마스크",
+        "tooltip": "생략하면 전체 이미지에 편집이 적용됩니다."
+      },
+      "model": {
+        "name": "model"
+      },
+      "moderation": {
+        "name": "모더레이션",
+        "tooltip": "모더레이션 설정"
+      },
+      "moderation_prompt_content_moderation": {
+        "name": "프롬프트 콘텐츠 모더레이션"
+      },
+      "moderation_visual_input_moderation": {
+        "name": "비주얼 입력 모더레이션"
+      },
+      "moderation_visual_output_moderation": {
+        "name": "비주얼 출력 모더레이션"
+      },
+      "negative_prompt": {
+        "name": "네거티브 프롬프트"
+      },
+      "prompt": {
+        "name": "프롬프트",
+        "tooltip": "이미지 편집을 위한 지시문"
+      },
+      "seed": {
+        "name": "시드"
+      },
+      "steps": {
+        "name": "스텝"
+      },
+      "structured_prompt": {
+        "name": "구조화된 프롬프트",
+        "tooltip": "JSON 형식의 구조화된 편집 프롬프트 문자열입니다. 더 정확하고 프로그래밍적으로 제어하려면 일반 프롬프트 대신 사용하세요."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      },
+      "1": {
+        "name": "구조화된 프롬프트",
+        "tooltip": null
+      }
+    }
+  },
   "ByteDanceFirstLastFrameNode": {
     "description": "프롬프트와 첫 번째 및 마지막 프레임을 사용하여 비디오를 생성합니다.",
     "display_name": "ByteDance 첫-마지막-프레임에서 비디오 생성",
@@ -385,43 +447,6 @@
       }
     }
   },
-  "ByteDanceImageEditNode": {
-    "description": "프롬프트 기반으로 ByteDance 모델을 사용하여 이미지 편집",
-    "display_name": "ByteDance 이미지 편집",
-    "inputs": {
-      "control_after_generate": {
-        "name": "생성 후 제어"
-      },
-      "guidance_scale": {
-        "name": "가이던스 스케일",
-        "tooltip": "값이 높을수록 이미지가 프롬프트를 더 밀접하게 따름"
-      },
-      "image": {
-        "name": "이미지",
-        "tooltip": "편집할 기본 이미지"
-      },
-      "model": {
-        "name": "모델"
-      },
-      "prompt": {
-        "name": "프롬프트",
-        "tooltip": "이미지 편집 지시사항"
-      },
-      "seed": {
-        "name": "시드",
-        "tooltip": "생성에 사용할 시드 값"
-      },
-      "watermark": {
-        "name": "워터마크",
-        "tooltip": "이미지에 \"AI 생성\" 워터마크를 추가할지 여부"
-      }
-    },
-    "outputs": {
-      "0": {
-        "tooltip": null
-      }
-    }
-  },
   "ByteDanceImageNode": {
     "description": "프롬프트 기반으로 ByteDance 모델을 사용하여 이미지 생성",
     "display_name": "ByteDance 이미지",
@@ -2031,14 +2056,18 @@
       "choice": {
         "name": "선택"
       },
-      "option0": {
+      "index": {
+      },
+      "option1": {
       }
     },
-    "outputs": {
-      "0": {
+    "outputs": [
+      null,
+      {
+        "name": "INDEX",
         "tooltip": null
       }
-    }
+    ]
   },
   "DiffControlNetLoader": {
     "display_name": "컨트롤넷 모델 로드 (차이)",
@@ -6390,6 +6419,60 @@
       }
     }
   },
+  "LoraLoaderBypass": {
+    "description": "LoRA를 바이패스 모드로 적용합니다. 일반 LoRA와 달리 모델 가중치를 수정하지 않고, 순전파 과정에서 LoRA 연산을 주입합니다. 학습 시나리오에 유용합니다.",
+    "display_name": "LoRA 불러오기 (바이패스) (디버깅용)",
+    "inputs": {
+      "clip": {
+        "name": "clip",
+        "tooltip": "LoRA가 적용될 CLIP 모델입니다."
+      },
+      "lora_name": {
+        "name": "lora_name",
+        "tooltip": "LoRA의 이름입니다."
+      },
+      "model": {
+        "name": "model",
+        "tooltip": "LoRA가 적용될 디퓨전 모델입니다."
+      },
+      "strength_clip": {
+        "name": "strength_clip",
+        "tooltip": "CLIP 모델을 얼마나 강하게 수정할지 설정합니다. 이 값은 음수도 가능합니다."
+      },
+      "strength_model": {
+        "name": "strength_model",
+        "tooltip": "디퓨전 모델을 얼마나 강하게 수정할지 설정합니다. 이 값은 음수도 가능합니다."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": "수정된 디퓨전 모델입니다."
+      },
+      "1": {
+        "tooltip": "수정된 CLIP 모델입니다."
+      }
+    }
+  },
+  "LoraLoaderBypassModelOnly": {
+    "description": "LoRA를 바이패스 모드로 적용합니다. 일반 LoRA와 달리 모델 가중치를 수정하지 않고, 순전파 과정에서 LoRA 연산을 주입합니다. 학습 시나리오에 유용합니다.",
+    "display_name": "LoRA 불러오기 (바이패스, 모델만) (디버깅용)",
+    "inputs": {
+      "lora_name": {
+        "name": "lora_name"
+      },
+      "model": {
+        "name": "model"
+      },
+      "strength_model": {
+        "name": "strength_model"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": "수정된 디퓨전 모델입니다."
+      }
+    }
+  },
   "LoraLoaderModelOnly": {
     "description": "LoRA는 확산 모델과 CLIP 모델을 부분적으로 변경해서, 잠재 데이터의 노이즈 제거 방향을 바꿉니다. 여러 LoRA 노드를 연결할 수 있습니다. (이 노드는 CLIP 모델은 로드하지 않습니다.)",
     "display_name": "LoRA 로드 (모델 전용)",
@@ -6757,6 +6840,126 @@
       }
     }
   },
+  "MagnificImageRelightNode": {
+    "description": "이미지의 조명을 조정하고, 선택적으로 참조 기반의 조명 전송을 적용합니다.",
+    "display_name": "Magnific 이미지 리라이트",
+    "inputs": {
+      "advanced_settings": {
+        "name": "advanced_settings",
+        "tooltip": "고급 조명 제어를 위한 세부 조정 옵션입니다."
+      },
+      "change_background": {
+        "name": "change_background",
+        "tooltip": "프롬프트/참조에 따라 배경을 수정합니다."
+      },
+      "image": {
+        "name": "image",
+        "tooltip": "리라이트할 이미지입니다."
+      },
+      "interpolate_from_original": {
+        "name": "interpolate_from_original",
+        "tooltip": "생성의 자유도를 제한하여 원본과 더 유사하게 만듭니다."
+      },
+      "light_transfer_strength": {
+        "name": "light_transfer_strength",
+        "tooltip": "조명 전송 적용 강도입니다."
+      },
+      "preserve_details": {
+        "name": "preserve_details",
+        "tooltip": "원본의 질감과 세부 정보를 유지합니다."
+      },
+      "prompt": {
+        "name": "prompt",
+        "tooltip": "조명에 대한 설명 가이드입니다. 강조 표기법(1-1.4)을 지원합니다."
+      },
+      "reference_image": {
+        "name": "reference_image",
+        "tooltip": "조명을 전송할 선택적 참조 이미지입니다."
+      },
+      "style": {
+        "name": "style",
+        "tooltip": "스타일 출력 선호도입니다."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "MagnificImageSkinEnhancerNode": {
+    "description": "여러 처리 모드를 지원하는 인물 사진 피부 보정 기능입니다.",
+    "display_name": "Magnific 이미지 피부 보정",
+    "inputs": {
+      "image": {
+        "name": "image",
+        "tooltip": "보정할 인물 사진입니다."
+      },
+      "mode": {
+        "name": "mode",
+        "tooltip": "처리 모드: 창의적(artistic) 보정, 원본 유지(faithful), 타겟 최적화(flexible) 중 선택."
+      },
+      "sharpen": {
+        "name": "sharpen",
+        "tooltip": "선명도 강도 수준입니다."
+      },
+      "smart_grain": {
+        "name": "smart_grain",
+        "tooltip": "스마트 그레인 강도 수준입니다."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "MagnificImageStyleTransferNode": {
+    "description": "참조 이미지의 스타일을 입력 이미지에 전송합니다.",
+    "display_name": "Magnific 이미지 스타일 전송",
+    "inputs": {
+      "engine": {
+        "name": "engine",
+        "tooltip": "처리 엔진 선택입니다."
+      },
+      "fixed_generation": {
+        "name": "fixed_generation",
+        "tooltip": "비활성화 시, 각 생성마다 일정 수준의 무작위성이 도입되어 더 다양한 결과를 얻을 수 있습니다."
+      },
+      "flavor": {
+        "name": "flavor",
+        "tooltip": "스타일 전송의 flavor입니다."
+      },
+      "image": {
+        "name": "image",
+        "tooltip": "스타일 전송을 적용할 이미지입니다."
+      },
+      "portrait_mode": {
+        "name": "portrait_mode",
+        "tooltip": "얼굴 개선을 위한 인물 모드를 활성화합니다."
+      },
+      "prompt": {
+        "name": "prompt"
+      },
+      "reference_image": {
+        "name": "reference_image",
+        "tooltip": "스타일을 추출할 참조 이미지입니다."
+      },
+      "structure_strength": {
+        "name": "structure_strength",
+        "tooltip": "원본 이미지의 구조를 유지합니다."
+      },
+      "style_strength": {
+        "name": "style_strength",
+        "tooltip": "스타일 강도 비율입니다."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "Mahiro": {
     "description": "노이즈 제거의 '방향'을 긍정 조건과 부정 조건 차에 의한 것 보다는 긍정 조건 방향으로 더 크게 작동하도록 가이더 동작을 변경합니다.",
     "display_name": "마히로",
@@ -11209,19 +11412,28 @@
     }
   },
   "ResizeImageMaskNode": {
+    "description": "여러 가지 스케일링 방법을 사용하여 이미지 또는 mask를 리사이즈합니다.",
     "display_name": "이미지/마스크 크기 조정",
     "inputs": {
       "input": {
         "name": "input"
       },
       "resize_type": {
-        "name": "resize_type"
+        "name": "resize_type",
+        "tooltip": "리사이즈 방법을 선택하세요: 정확한 크기, 배율, 다른 이미지와 일치 등."
       },
-      "resize_type_multiplier": {
-        "name": "multiplier"
+      "resize_type_crop": {
+        "name": "crop"
+      },
+      "resize_type_height": {
+        "name": "height"
+      },
+      "resize_type_width": {
+        "name": "width"
       },
       "scale_method": {
-        "name": "scale_method"
+        "name": "scale_method",
+        "tooltip": "보간 알고리즘입니다. 'area'는 축소에, 'lanczos'는 확대에, 'nearest-exact'는 픽셀 아트에 적합합니다."
       }
     },
     "outputs": {
@@ -13355,6 +13567,84 @@
       }
     }
   },
+  "TencentImageToModelNode": {
+    "display_name": "Hunyuan3D: 이미지 → 모델 (Pro)",
+    "inputs": {
+      "control_after_generate": {
+        "name": "생성 후 제어"
+      },
+      "face_count": {
+        "name": "면 개수"
+      },
+      "generate_type": {
+        "name": "생성 유형"
+      },
+      "generate_type_pbr": {
+        "name": "PBR"
+      },
+      "image": {
+        "name": "이미지"
+      },
+      "image_back": {
+        "name": "뒷면 이미지"
+      },
+      "image_left": {
+        "name": "왼쪽 이미지"
+      },
+      "image_right": {
+        "name": "오른쪽 이미지"
+      },
+      "model": {
+        "name": "모델",
+        "tooltip": "`3.1` 모델에서는 LowPoly 옵션을 사용할 수 없습니다."
+      },
+      "seed": {
+        "name": "시드",
+        "tooltip": "시드는 노드가 다시 실행될지 여부를 제어합니다. 시드와 관계없이 결과는 비결정적입니다."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "모델 파일",
+        "tooltip": null
+      }
+    }
+  },
+  "TencentTextToModelNode": {
+    "display_name": "Hunyuan3D: 텍스트 → 모델 (Pro)",
+    "inputs": {
+      "control_after_generate": {
+        "name": "생성 후 제어"
+      },
+      "face_count": {
+        "name": "면 개수"
+      },
+      "generate_type": {
+        "name": "생성 유형"
+      },
+      "generate_type_pbr": {
+        "name": "PBR"
+      },
+      "model": {
+        "name": "모델",
+        "tooltip": "`3.1` 모델에서는 LowPoly 옵션을 사용할 수 없습니다."
+      },
+      "prompt": {
+        "name": "프롬프트",
+        "tooltip": "최대 1024자까지 지원합니다."
+      },
+      "seed": {
+        "name": "시드",
+        "tooltip": "시드는 노드가 다시 실행될지 여부를 제어합니다. 시드와 관계없이 결과는 비결정적입니다."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "모델 파일",
+        "tooltip": null
+      }
+    }
+  },
   "TextEncodeAceStepAudio": {
     "display_name": "TextEncodeAceStepAudio",
     "inputs": {
@@ -13450,6 +13740,40 @@
       }
     }
   },
+  "TextEncodeZImageOmni": {
+    "display_name": "TextEncodeZImageOmni",
+    "inputs": {
+      "auto_resize_images": {
+        "name": "이미지 자동 크기 조정"
+      },
+      "clip": {
+        "name": "clip"
+      },
+      "image1": {
+        "name": "이미지1"
+      },
+      "image2": {
+        "name": "이미지2"
+      },
+      "image3": {
+        "name": "이미지3"
+      },
+      "image_encoder": {
+        "name": "이미지 인코더"
+      },
+      "prompt": {
+        "name": "프롬프트"
+      },
+      "vae": {
+        "name": "vae"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "TextToLowercase": {
     "display_name": "텍스트 소문자 변환",
     "inputs": {
@@ -13655,6 +13979,10 @@
         "name": "bucket_mode",
         "tooltip": "해상도 버킷 모드를 활성화합니다. 활성화 시, ResolutionBucket 노드에서 미리 버킷 처리된 latent를 기대합니다."
       },
+      "bypass_mode": {
+        "name": "bypass_mode",
+        "tooltip": "학습을 위한 바이패스 모드를 활성화합니다. 활성화 시, 어댑터가 가중치 수정 대신 forward hook을 통해 적용됩니다. 가중치를 직접 수정할 수 없는 양자화된 모델에 유용합니다."
+      },
       "control_after_generate": {
         "name": "생성 후 제어"
       },
@@ -15621,6 +15949,79 @@
       }
     }
   },
+  "WanInfiniteTalkToVideo": {
+    "display_name": "WanInfiniteTalkToVideo",
+    "inputs": {
+      "audio_encoder_output_1": {
+        "name": "audio_encoder_output_1"
+      },
+      "audio_scale": {
+        "name": "audio_scale"
+      },
+      "clip_vision_output": {
+        "name": "clip_vision_output"
+      },
+      "height": {
+        "name": "height"
+      },
+      "length": {
+        "name": "length"
+      },
+      "mode": {
+        "name": "mode"
+      },
+      "model": {
+        "name": "model"
+      },
+      "model_patch": {
+        "name": "model_patch"
+      },
+      "motion_frame_count": {
+        "name": "motion_frame_count",
+        "tooltip": "이전 프레임 수를 모션 컨텍스트로 사용합니다."
+      },
+      "negative": {
+        "name": "negative"
+      },
+      "positive": {
+        "name": "positive"
+      },
+      "previous_frames": {
+        "name": "previous_frames"
+      },
+      "start_image": {
+        "name": "start_image"
+      },
+      "vae": {
+        "name": "vae"
+      },
+      "width": {
+        "name": "width"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "model",
+        "tooltip": null
+      },
+      "1": {
+        "name": "positive",
+        "tooltip": null
+      },
+      "2": {
+        "name": "negative",
+        "tooltip": null
+      },
+      "3": {
+        "name": "latent",
+        "tooltip": null
+      },
+      "4": {
+        "name": "trim_image",
+        "tooltip": null
+      }
+    }
+  },
   "WanMoveConcatTrack": {
     "display_name": "WanMoveConcatTrack",
     "inputs": {
@@ -16137,6 +16538,43 @@
       }
     }
   },
+  "WavespeedFlashVSRNode": {
+    "description": "저해상도 또는 흐릿한 영상의 해상도를 높이고 선명도를 복원하는 빠르고 고품질의 비디오 업스케일러입니다.",
+    "display_name": "FlashVSR 비디오 업스케일",
+    "inputs": {
+      "target_resolution": {
+        "name": "목표 해상도"
+      },
+      "video": {
+        "name": "비디오"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "WavespeedImageUpscaleNode": {
+    "description": "이미지 해상도와 품질을 높여 사진을 4K 또는 8K로 업스케일하여 선명하고 디테일한 결과를 제공합니다.",
+    "display_name": "WaveSpeed 이미지 업스케일",
+    "inputs": {
+      "image": {
+        "name": "image"
+      },
+      "model": {
+        "name": "model"
+      },
+      "target_resolution": {
+        "name": "목표 해상도"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "WebcamCapture": {
     "display_name": "웹캠 캡처",
     "inputs": {
diff --git a/src/locales/ko/settings.json b/src/locales/ko/settings.json
index 176c4afed..aad81ea74 100644
--- a/src/locales/ko/settings.json
+++ b/src/locales/ko/settings.json
@@ -52,7 +52,8 @@
     }
   },
   "Comfy_Canvas_SelectionToolbox": {
-    "name": "선택 도구 상자 표시"
+    "name": "선택 도구 상자 표시",
+    "tooltip": "노드가 선택되었을 때 공통 작업에 빠르게 접근할 수 있는 플로팅 툴바를 표시합니다."
   },
   "Comfy_ConfirmClear": {
     "name": "워크플로 비우기 시 확인 요구"
@@ -147,7 +148,8 @@
       "Linear": "선형",
       "Spline": "스플라인",
       "Straight": "직선"
-    }
+    },
+    "tooltip": "캔버스에서 노드 간 연결 링크의 모양과 표시 여부를 제어합니다."
   },
   "Comfy_Load3D_3DViewerEnable": {
     "name": "3D 뷰어 활성화 (베타)",
@@ -272,6 +274,10 @@
   "Comfy_Node_AllowImageSizeDraw": {
     "name": "이미지 미리보기 아래에 너비 × 높이 표시"
   },
+  "Comfy_Node_AlwaysShowAdvancedWidgets": {
+    "name": "모든 노드에서 고급 위젯 항상 표시",
+    "tooltip": "이 옵션을 활성화하면, 모든 노드에서 고급 위젯이 개별적으로 확장하지 않아도 항상 표시됩니다."
+  },
   "Comfy_Node_AutoSnapLinkToSlot": {
     "name": "링크를 노드 슬롯에 자동 스냅",
     "tooltip": "링크를 노드 위로 드래그할 때 링크가 노드의 유효한 입력 슬롯에 자동으로 스냅됩니다."
@@ -470,6 +476,7 @@
     "tooltip": "경유점 중심에서 베지어 제어점까지의 오프셋"
   },
   "pysssss_SnapToGrid": {
-    "name": "항상 그리드에 스냅"
+    "name": "항상 그리드에 스냅",
+    "tooltip": "활성화하면 노드를 이동하거나 크기를 조정할 때 자동으로 그리드에 정렬됩니다."
   }
 }
diff --git a/src/locales/pt-BR/main.json b/src/locales/pt-BR/main.json
index 37ef79592..62059f04e 100644
--- a/src/locales/pt-BR/main.json
+++ b/src/locales/pt-BR/main.json
@@ -24,6 +24,7 @@
     "assets": "Ativos",
     "baseModels": "Modelos base",
     "browseAssets": "Explorar Ativos",
+    "byType": "Por tipo",
     "checkpoints": "Checkpoints",
     "civitaiLinkExample": "{example} {link}",
     "civitaiLinkExampleStrong": "Exemplo:",
@@ -45,6 +46,10 @@
       "failed": "Falha no download",
       "inProgress": "Baixando {assetName}..."
     },
+    "emptyImported": {
+      "canImport": "Nenhum modelo importado ainda. Clique em \"Importar Modelo\" para adicionar o seu.",
+      "restricted": "Modelos pessoais estão disponíveis apenas no nível Creator ou superior."
+    },
     "errorFileTooLarge": "O arquivo excede o limite máximo de tamanho permitido",
     "errorFormatNotAllowed": "Apenas o formato SafeTensor é permitido",
     "errorModelTypeNotSupported": "Este tipo de modelo não é suportado",
@@ -61,6 +66,7 @@
     "finish": "Concluir",
     "genericLinkPlaceholder": "Cole o link aqui",
     "importAnother": "Importar outro",
+    "imported": "Importado",
     "jobId": "ID do trabalho",
     "loadingModels": "Carregando {type}...",
     "maxFileSize": "Tamanho máximo do arquivo: {size}",
@@ -70,6 +76,30 @@
       "threeDModelPlaceholder": "Modelo 3D"
     },
     "modelAssociatedWithLink": "O modelo associado ao link fornecido:",
+    "modelInfo": {
+      "addBaseModel": "Adicionar modelo base...",
+      "addTag": "Adicionar tag...",
+      "additionalTags": "Tags Adicionais",
+      "baseModelUnknown": "Modelo base desconhecido",
+      "basicInfo": "Informações Básicas",
+      "compatibleBaseModels": "Modelos Base Compatíveis",
+      "description": "Descrição",
+      "descriptionNotSet": "Nenhuma descrição definida",
+      "descriptionPlaceholder": "Adicione uma descrição para este modelo...",
+      "displayName": "Nome de Exibição",
+      "editDisplayName": "Editar nome de exibição",
+      "fileName": "Nome do Arquivo",
+      "modelDescription": "Descrição do Modelo",
+      "modelTagging": "Tagueamento do Modelo",
+      "modelType": "Tipo de Modelo",
+      "noAdditionalTags": "Sem tags adicionais",
+      "selectModelPrompt": "Selecione um modelo para ver suas informações",
+      "selectModelType": "Selecione o tipo de modelo...",
+      "source": "Fonte",
+      "title": "Informações do Modelo",
+      "triggerPhrases": "Frases de Ativação",
+      "viewOnSource": "Ver em {source}"
+    },
     "modelName": "Nome do modelo",
     "modelNamePlaceholder": "Digite um nome para este modelo",
     "modelTypeSelectorLabel": "Qual o tipo deste modelo?",
@@ -684,6 +714,7 @@
     "clearAll": "Limpar tudo",
     "clearFilters": "Limpar filtros",
     "close": "Fechar",
+    "closeDialog": "Fechar diálogo",
     "color": "Cor",
     "comfy": "Comfy",
     "comfyOrgLogoAlt": "Logo do ComfyOrg",
@@ -700,6 +731,7 @@
     "control_before_generate": "controle antes de gerar",
     "copied": "Copiado",
     "copy": "Copiar",
+    "copyAll": "Copiar tudo",
     "copyJobId": "Copiar ID da tarefa",
     "copyToClipboard": "Copiar para a área de transferência",
     "copyURL": "Copiar URL",
@@ -762,6 +794,8 @@
     "goToNode": "Ir para o nó",
     "graphNavigation": "Navegação no grafo",
     "halfSpeed": "0,5x",
+    "hideLeftPanel": "Ocultar painel esquerdo",
+    "hideRightPanel": "Ocultar painel direito",
     "icon": "Ícone",
     "imageFailedToLoad": "Falha ao carregar imagem",
     "imagePreview": "Pré-visualização da imagem - Use as setas para navegar entre as imagens",
@@ -803,6 +837,7 @@
     "name": "Nome",
     "newFolder": "Nova pasta",
     "next": "Próximo",
+    "nightly": "NIGHTLY",
     "no": "Não",
     "noAudioRecorded": "Nenhum áudio gravado",
     "noItems": "Nenhum item",
@@ -817,6 +852,7 @@
     "nodeSlotsError": "Erro nos slots do nó",
     "nodeWidgetsError": "Erro nos widgets do nó",
     "nodes": "Nós",
+    "nodesCount": "{count} nós | {count} nó | {count} nós",
     "nodesRunning": "nós em execução",
     "none": "Nenhum",
     "nothingToCopy": "Nada para copiar",
@@ -891,7 +927,9 @@
     "selectedFile": "Arquivo selecionado",
     "setAsBackground": "Definir como plano de fundo",
     "settings": "Configurações",
+    "showLeftPanel": "Mostrar painel esquerdo",
     "showReport": "Mostrar relatório",
+    "showRightPanel": "Mostrar painel direito",
     "singleSelectDropdown": "Menu suspenso de seleção única",
     "sort": "Ordenar",
     "source": "Fonte",
@@ -914,6 +952,7 @@
     "updating": "Atualizando {id}",
     "upload": "Enviar",
     "usageHint": "Dica de uso",
+    "use": "Usar",
     "user": "Usuário",
     "versionMismatchWarning": "Aviso de compatibilidade de versão",
     "versionMismatchWarningMessage": "{warning}: {detail} Visite https://docs.comfy.org/installation/update_comfyui#common-update-issues para instruções de atualização.",
@@ -921,11 +960,10 @@
     "videoPreview": "Pré-visualização do vídeo - Use as setas para navegar entre os vídeos",
     "viewImageOfTotal": "Visualizar imagem {index} de {total}",
     "viewVideoOfTotal": "Visualizar vídeo {index} de {total}",
-    "vitePreloadErrorMessage": "Uma nova versão do aplicativo foi lançada. Deseja recarregar?\nSe não, algumas partes do aplicativo podem não funcionar como esperado.\nSinta-se à vontade para recusar e salvar seu progresso antes de recarregar.",
-    "vitePreloadErrorTitle": "Nova versão disponível",
     "volume": "Volume",
     "warning": "Aviso",
-    "workflow": "Fluxo de trabalho"
+    "workflow": "Fluxo de trabalho",
+    "you": "Você"
   },
   "graphCanvasMenu": {
     "fitView": "Ajustar à Tela",
@@ -1617,17 +1655,25 @@
       "title": "Este fluxo de trabalho possui nós ausentes"
     }
   },
+  "nightly": {
+    "badge": {
+      "label": "Versão de Prévia",
+      "tooltip": "Você está usando uma versão nightly do ComfyUI. Por favor, use o botão de feedback para compartilhar suas opiniões sobre esses recursos."
+    }
+  },
   "nodeCategories": {
     "": "",
     "3d": "3d",
     "3d_models": "modelos_3d",
     "BFL": "BFL",
+    "Bria": "Bria",
     "ByteDance": "ByteDance",
     "Gemini": "Gemini",
     "Ideogram": "Ideogram",
     "Kling": "Kling",
     "LTXV": "LTXV",
     "Luma": "Luma",
+    "Magnific": "Magnific",
     "Meshy": "Meshy",
     "MiniMax": "MiniMax",
     "Moonvalley Marey": "Moonvalley Marey",
@@ -1638,11 +1684,13 @@
     "Runway": "Runway",
     "Sora": "Sora",
     "Stability AI": "Stability AI",
+    "Tencent": "Tencent",
     "Topaz": "Topaz",
     "Tripo": "Tripo",
     "Veo": "Veo",
     "Vidu": "Vidu",
     "Wan": "Wan",
+    "WaveSpeed": "WaveSpeed",
     "_for_testing": "_for_testing",
     "advanced": "avançado",
     "animation": "animação",
@@ -1852,6 +1900,7 @@
     },
     "groupSettings": "Configurações de Grupo",
     "groups": "Grupos",
+    "hideAdvancedInputsButton": "Ocultar entradas avançadas",
     "hideInput": "Ocultar entrada",
     "info": "Informações",
     "inputs": "ENTRADAS",
@@ -2084,6 +2133,7 @@
     "NodeLibrary": "Biblioteca de Nós",
     "Nodes 2_0": "Nodes 2.0",
     "Notification Preferences": "Preferências de Notificação",
+    "Other": "Outros",
     "PLY": "PLY",
     "PlanCredits": "Plano & Créditos",
     "Pointer": "Ponteiro",
@@ -2103,7 +2153,8 @@
     "Vue Nodes": "Nodes 2.0",
     "VueNodes": "Nodes 2.0",
     "Window": "Janela",
-    "Workflow": "Fluxo de Trabalho"
+    "Workflow": "Fluxo de Trabalho",
+    "Workspace": "Espaço de trabalho"
   },
   "shape": {
     "CARD": "Cartão",
@@ -2129,12 +2180,14 @@
     "viewControls": "Controles de Visualização"
   },
   "sideToolbar": {
+    "activeJobStatus": "Tarefa ativa: {status}",
     "assets": "Ativos",
     "backToAssets": "Voltar para todos os ativos",
     "browseTemplates": "Explorar modelos de exemplo",
     "downloads": "Downloads",
     "generatedAssetsHeader": "Ativos gerados",
     "helpCenter": "Central de Ajuda",
+    "importedAssetsHeader": "Ativos importados",
     "labels": {
       "assets": "Ativos",
       "console": "Console",
@@ -2190,6 +2243,7 @@
     "queue": "Fila",
     "queueProgressOverlay": {
       "activeJobs": "{count} trabalho ativo | {count} trabalhos ativos",
+      "activeJobsShort": "{count} ativo(s) | {count} ativo(s)",
       "activeJobsSuffix": "trabalhos ativos",
       "cancelJobTooltip": "Cancelar trabalho",
       "clearHistory": "Limpar histórico da fila de trabalhos",
@@ -2278,9 +2332,15 @@
     "beta": "BETA",
     "billedMonthly": "Cobrado mensalmente",
     "billedYearly": "{total} Cobrado anualmente",
+    "billingComingSoon": {
+      "message": "A cobrança para equipes estará disponível em breve. Você poderá assinar um plano para seu workspace com preço por usuário. Fique atento para novidades.",
+      "title": "Em breve"
+    },
+    "cancelSubscription": "Cancelar assinatura",
     "changeTo": "Mudar para {plan}",
     "comfyCloud": "Comfy Cloud",
     "comfyCloudLogo": "Logo do Comfy Cloud",
+    "contactOwnerToSubscribe": "Entre em contato com o proprietário do espaço de trabalho para assinar",
     "contactUs": "Fale conosco",
     "creditsRemainingThisMonth": "Créditos restantes neste mês",
     "creditsRemainingThisYear": "Créditos restantes neste ano",
@@ -2293,6 +2353,7 @@
     "haveQuestions": "Tem dúvidas ou interesse em soluções empresariais?",
     "invoiceHistory": "Histórico de faturas",
     "learnMore": "Saiba mais",
+    "managePayment": "Gerenciar pagamento",
     "managePlan": "Gerenciar plano",
     "manageSubscription": "Gerenciar assinatura",
     "maxDuration": {
@@ -2328,6 +2389,7 @@
     "subscribeToComfyCloud": "Assine o Comfy Cloud",
     "subscribeToRun": "Assinar",
     "subscribeToRunFull": "Assine para Executar",
+    "subscriptionRequiredMessage": "Uma assinatura é necessária para que os membros executem fluxos de trabalho na Nuvem",
     "tierNameYearly": "{name} Anual",
     "tiers": {
       "creator": {
@@ -2359,6 +2421,7 @@
     "viewMoreDetails": "Ver mais detalhes",
     "viewMoreDetailsPlans": "Veja mais detalhes sobre planos e preços",
     "viewUsageHistory": "Ver histórico de uso",
+    "workspaceNotSubscribed": "Este espaço de trabalho não possui uma assinatura",
     "yearly": "Anual",
     "yearlyCreditsLabel": "Total de créditos anuais",
     "yearlyDiscount": "20% DE DESCONTO",
@@ -2460,6 +2523,7 @@
     "failedToLoadModel": "Falha ao carregar modelo 3D",
     "failedToPurchaseCredits": "Falha ao comprar créditos: {error}",
     "failedToQueue": "Falha ao enfileirar",
+    "failedToSaveDraft": "Falha ao salvar o rascunho do fluxo de trabalho",
     "failedToToggleCamera": "Falha ao alternar câmera",
     "failedToToggleGrid": "Falha ao alternar grade",
     "failedToUpdateBackgroundColor": "Falha ao atualizar cor de fundo",
@@ -2508,7 +2572,8 @@
     "notSet": "Não definido",
     "provider": "Provedor de login",
     "title": "Configurações da Minha Conta",
-    "updatePassword": "Atualizar senha"
+    "updatePassword": "Atualizar senha",
+    "workspaceSettings": "Configurações do espaço de trabalho"
   },
   "validation": {
     "descriptionRequired": "Descrição é obrigatória",
@@ -2599,6 +2664,9 @@
     "saveWorkflow": "Salvar fluxo de trabalho"
   },
   "workspace": {
+    "addedToWorkspace": "Você foi adicionado ao {workspaceName}",
+    "inviteAccepted": "Convite aceito",
+    "inviteFailed": "Falha ao aceitar convite",
     "unsavedChanges": {
       "message": "Você tem alterações não salvas. Deseja descartá-las e trocar de espaço de trabalho?",
       "title": "Alterações não salvas"
@@ -2613,6 +2681,128 @@
       "workspaceNotFound": "Espaço de trabalho não encontrado"
     }
   },
+  "workspacePanel": {
+    "createWorkspaceDialog": {
+      "create": "Criar",
+      "message": "Espaços de trabalho permitem que membros compartilhem um único saldo de créditos. Você se tornará o proprietário após criar este.",
+      "nameLabel": "Nome do espaço de trabalho*",
+      "namePlaceholder": "Digite o nome do espaço de trabalho",
+      "title": "Criar um novo espaço de trabalho"
+    },
+    "dashboard": {
+      "placeholder": "Configurações do workspace do painel"
+    },
+    "deleteDialog": {
+      "message": "Quaisquer créditos não utilizados ou ativos não salvos serão perdidos. Esta ação não pode ser desfeita.",
+      "messageWithName": "Excluir \"{name}\"? Quaisquer créditos não utilizados ou ativos não salvos serão perdidos. Esta ação não pode ser desfeita.",
+      "title": "Excluir este espaço de trabalho?"
+    },
+    "editWorkspaceDialog": {
+      "nameLabel": "Nome do espaço de trabalho",
+      "save": "Salvar",
+      "title": "Editar detalhes do espaço de trabalho"
+    },
+    "invite": "Convidar",
+    "inviteLimitReached": "Você atingiu o limite máximo de 50 membros",
+    "inviteMember": "Convidar membro",
+    "inviteMemberDialog": {
+      "createLink": "Criar link",
+      "linkCopied": "Copiado",
+      "linkCopyFailed": "Falha ao copiar link",
+      "linkStep": {
+        "copyLink": "Copiar link",
+        "done": "Concluído",
+        "message": "Certifique-se de que a conta dela usa este e-mail.",
+        "title": "Envie este link para a pessoa"
+      },
+      "message": "Crie um link de convite compartilhável para enviar a alguém",
+      "placeholder": "Digite o e-mail da pessoa",
+      "title": "Convidar uma pessoa para este workspace"
+    },
+    "leaveDialog": {
+      "leave": "Sair",
+      "message": "Você não poderá entrar novamente a menos que entre em contato com o proprietário do espaço de trabalho.",
+      "title": "Sair deste espaço de trabalho?"
+    },
+    "members": {
+      "actions": {
+        "copyLink": "Copiar link do convite",
+        "removeMember": "Remover membro",
+        "revokeInvite": "Revogar convite"
+      },
+      "columns": {
+        "expiryDate": "Data de expiração",
+        "inviteDate": "Data do convite",
+        "joinDate": "Data de entrada"
+      },
+      "createNewWorkspace": "crie um novo.",
+      "membersCount": "{count}/50 Membros",
+      "noInvites": "Nenhum convite pendente",
+      "noMembers": "Nenhum membro",
+      "pendingInvitesCount": "{count} convite pendente | {count} convites pendentes",
+      "personalWorkspaceMessage": "No momento, você não pode convidar outros membros para seu workspace pessoal. Para adicionar membros a um workspace,",
+      "tabs": {
+        "active": "Ativo",
+        "pendingCount": "Pendente ({count})"
+      }
+    },
+    "menu": {
+      "deleteWorkspace": "Excluir espaço de trabalho",
+      "deleteWorkspaceDisabledTooltip": "Cancele a assinatura ativa do seu espaço de trabalho primeiro",
+      "editWorkspace": "Editar detalhes do espaço de trabalho",
+      "leaveWorkspace": "Sair do espaço de trabalho"
+    },
+    "removeMemberDialog": {
+      "error": "Falha ao remover membro",
+      "message": "Este membro será removido do seu workspace. Os créditos utilizados por ele não serão reembolsados.",
+      "remove": "Remover membro",
+      "success": "Membro removido",
+      "title": "Remover este membro?"
+    },
+    "revokeInviteDialog": {
+      "message": "Este membro não poderá mais entrar no seu workspace. O link de convite será invalidado.",
+      "revoke": "Desfazer convite",
+      "title": "Desfazer convite para esta pessoa?"
+    },
+    "tabs": {
+      "dashboard": "Painel",
+      "membersCount": "Membros ({count})",
+      "planCredits": "Plano e Créditos"
+    },
+    "toast": {
+      "failedToCreateWorkspace": "Falha ao criar o espaço de trabalho",
+      "failedToDeleteWorkspace": "Falha ao excluir o espaço de trabalho",
+      "failedToFetchWorkspaces": "Falha ao carregar workspaces",
+      "failedToLeaveWorkspace": "Falha ao sair do espaço de trabalho",
+      "failedToUpdateWorkspace": "Falha ao atualizar o espaço de trabalho",
+      "workspaceCreated": {
+        "message": "Assine um plano, convide colegas e comece a colaborar.",
+        "subscribe": "Assinar",
+        "title": "Workspace criado"
+      },
+      "workspaceDeleted": {
+        "message": "O workspace foi excluído permanentemente.",
+        "title": "Workspace excluído"
+      },
+      "workspaceLeft": {
+        "message": "Você saiu do workspace.",
+        "title": "Saiu do workspace"
+      },
+      "workspaceUpdated": {
+        "message": "Os detalhes do espaço de trabalho foram salvos.",
+        "title": "Espaço de trabalho atualizado"
+      }
+    }
+  },
+  "workspaceSwitcher": {
+    "createWorkspace": "Criar novo espaço de trabalho",
+    "maxWorkspacesReached": "Você só pode possuir 10 espaços de trabalho. Exclua um para criar um novo.",
+    "personal": "Pessoal",
+    "roleMember": "Membro",
+    "roleOwner": "Proprietário",
+    "subscribe": "Assinar",
+    "switchWorkspace": "Trocar espaço de trabalho"
+  },
   "zoomControls": {
     "hideMinimap": "Ocultar Minimapa",
     "label": "Controles de Zoom",
diff --git a/src/locales/pt-BR/nodeDefs.json b/src/locales/pt-BR/nodeDefs.json
index 22ee42862..6d804dc4c 100644
--- a/src/locales/pt-BR/nodeDefs.json
+++ b/src/locales/pt-BR/nodeDefs.json
@@ -328,6 +328,68 @@
       }
     }
   },
+  "BriaImageEditNode": {
+    "description": "Edite imagens usando o modelo mais recente da Bria",
+    "display_name": "Bria Image Edit",
+    "inputs": {
+      "control_after_generate": {
+        "name": "controle após gerar"
+      },
+      "guidance_scale": {
+        "name": "escala_de_guia",
+        "tooltip": "Um valor mais alto faz com que a imagem siga o prompt mais de perto."
+      },
+      "image": {
+        "name": "imagem"
+      },
+      "mask": {
+        "name": "máscara",
+        "tooltip": "Se omitido, a edição será aplicada à imagem inteira."
+      },
+      "model": {
+        "name": "modelo"
+      },
+      "moderation": {
+        "name": "moderação",
+        "tooltip": "Configurações de moderação"
+      },
+      "moderation_prompt_content_moderation": {
+        "name": "moderação_do_conteúdo_do_prompt"
+      },
+      "moderation_visual_input_moderation": {
+        "name": "moderação_da_entrada_visual"
+      },
+      "moderation_visual_output_moderation": {
+        "name": "moderação_da_saida_visual"
+      },
+      "negative_prompt": {
+        "name": "prompt_negativo"
+      },
+      "prompt": {
+        "name": "prompt",
+        "tooltip": "Instrução para editar a imagem"
+      },
+      "seed": {
+        "name": "semente"
+      },
+      "steps": {
+        "name": "passos"
+      },
+      "structured_prompt": {
+        "name": "prompt_estruturado",
+        "tooltip": "Uma string contendo o prompt de edição estruturado em formato JSON. Use isso em vez do prompt comum para controle preciso e programático."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      },
+      "1": {
+        "name": "prompt_estruturado",
+        "tooltip": null
+      }
+    }
+  },
   "ByteDanceFirstLastFrameNode": {
     "description": "Gere vídeo usando um prompt e os quadros inicial e final.",
     "display_name": "ByteDance Primeiro-Último-Frame para Vídeo",
@@ -385,43 +447,6 @@
       }
     }
   },
-  "ByteDanceImageEditNode": {
-    "description": "Edite imagens usando modelos ByteDance via API com base em um prompt",
-    "display_name": "ByteDance Edição de Imagem",
-    "inputs": {
-      "control_after_generate": {
-        "name": "control after generate"
-      },
-      "guidance_scale": {
-        "name": "guidance_scale",
-        "tooltip": "Um valor mais alto faz a imagem seguir o prompt mais de perto"
-      },
-      "image": {
-        "name": "image",
-        "tooltip": "A imagem base para editar"
-      },
-      "model": {
-        "name": "model"
-      },
-      "prompt": {
-        "name": "prompt",
-        "tooltip": "Instrução para editar a imagem"
-      },
-      "seed": {
-        "name": "seed",
-        "tooltip": "Seed a ser usada para a geração"
-      },
-      "watermark": {
-        "name": "watermark",
-        "tooltip": "Se deve adicionar uma marca d'água \"Gerado por IA\" à imagem"
-      }
-    },
-    "outputs": {
-      "0": {
-        "tooltip": null
-      }
-    }
-  },
   "ByteDanceImageNode": {
     "description": "Gere imagens usando modelos ByteDance via API com base em um prompt",
     "display_name": "ByteDance Imagem",
@@ -2033,14 +2058,18 @@
       "choice": {
         "name": "escolha"
       },
-      "option0": {
+      "index": {
+      },
+      "option1": {
       }
     },
-    "outputs": {
-      "0": {
+    "outputs": [
+      null,
+      {
+        "name": "ÍNDICE",
         "tooltip": null
       }
-    }
+    ]
   },
   "DiffControlNetLoader": {
     "display_name": "Carregar Modelo ControlNet (diff)",
@@ -6405,6 +6434,60 @@
       }
     }
   },
+  "LoraLoaderBypass": {
+    "description": "Aplicar LoRA no modo bypass. Diferente do LoRA regular, isso não modifica os pesos do modelo – em vez disso, injeta o cálculo do LoRA durante a passagem direta. Útil para cenários de treinamento.",
+    "display_name": "Carregar LoRA (Bypass) (Para depuração)",
+    "inputs": {
+      "clip": {
+        "name": "clip",
+        "tooltip": "O modelo CLIP ao qual o LoRA será aplicado."
+      },
+      "lora_name": {
+        "name": "lora_name",
+        "tooltip": "O nome do LoRA."
+      },
+      "model": {
+        "name": "model",
+        "tooltip": "O modelo de difusão ao qual o LoRA será aplicado."
+      },
+      "strength_clip": {
+        "name": "strength_clip",
+        "tooltip": "Quão fortemente modificar o modelo CLIP. Este valor pode ser negativo."
+      },
+      "strength_model": {
+        "name": "strength_model",
+        "tooltip": "Quão fortemente modificar o modelo de difusão. Este valor pode ser negativo."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": "O modelo de difusão modificado."
+      },
+      "1": {
+        "tooltip": "O modelo CLIP modificado."
+      }
+    }
+  },
+  "LoraLoaderBypassModelOnly": {
+    "description": "Aplicar LoRA no modo bypass. Diferente do LoRA regular, isso não modifica os pesos do modelo – em vez disso, injeta o cálculo do LoRA durante a passagem direta. Útil para cenários de treinamento.",
+    "display_name": "Carregar LoRA (Bypass, Apenas Modelo) (para depuração)",
+    "inputs": {
+      "lora_name": {
+        "name": "lora_name"
+      },
+      "model": {
+        "name": "model"
+      },
+      "strength_model": {
+        "name": "strength_model"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": "O modelo de difusão modificado."
+      }
+    }
+  },
   "LoraLoaderModelOnly": {
     "description": "LoRAs são usados para modificar modelos de difusão e CLIP, alterando a forma como os latents são denoizados, como na aplicação de estilos. Vários nós LoRA podem ser conectados juntos.",
     "display_name": "LoraLoaderModelOnly",
@@ -6773,6 +6856,126 @@
       }
     }
   },
+  "MagnificImageRelightNode": {
+    "description": "Reilumine uma imagem com ajustes de iluminação e transferência de luz baseada em referência opcional.",
+    "display_name": "Magnific Reiluminar Imagem",
+    "inputs": {
+      "advanced_settings": {
+        "name": "advanced_settings",
+        "tooltip": "Opções de ajuste fino para controle avançado de iluminação."
+      },
+      "change_background": {
+        "name": "change_background",
+        "tooltip": "Modifica o fundo com base no prompt/referência."
+      },
+      "image": {
+        "name": "image",
+        "tooltip": "A imagem a ser reiluminada."
+      },
+      "interpolate_from_original": {
+        "name": "interpolate_from_original",
+        "tooltip": "Restringe a liberdade de geração para se aproximar mais do original."
+      },
+      "light_transfer_strength": {
+        "name": "light_transfer_strength",
+        "tooltip": "Intensidade da aplicação da transferência de luz."
+      },
+      "preserve_details": {
+        "name": "preserve_details",
+        "tooltip": "Mantém a textura e os detalhes finos do original."
+      },
+      "prompt": {
+        "name": "prompt",
+        "tooltip": "Orientação descritiva para iluminação. Suporta notação de ênfase (1-1.4)."
+      },
+      "reference_image": {
+        "name": "reference_image",
+        "tooltip": "Imagem de referência opcional para transferir a iluminação."
+      },
+      "style": {
+        "name": "style",
+        "tooltip": "Preferência de estilo de saída."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "MagnificImageSkinEnhancerNode": {
+    "description": "Realce de pele para retratos com múltiplos modos de processamento.",
+    "display_name": "Magnific Realce de Pele em Imagem",
+    "inputs": {
+      "image": {
+        "name": "image",
+        "tooltip": "A imagem de retrato a ser realçada."
+      },
+      "mode": {
+        "name": "mode",
+        "tooltip": "Modo de processamento: criativo para realce artístico, fiel para preservar a aparência original, flexível para otimização direcionada."
+      },
+      "sharpen": {
+        "name": "sharpen",
+        "tooltip": "Nível de intensidade de nitidez."
+      },
+      "smart_grain": {
+        "name": "smart_grain",
+        "tooltip": "Nível de intensidade de granulação inteligente."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "MagnificImageStyleTransferNode": {
+    "description": "Transfira o estilo de uma imagem de referência para sua imagem de entrada.",
+    "display_name": "Transferência de Estilo de Imagem Magnific",
+    "inputs": {
+      "engine": {
+        "name": "engine",
+        "tooltip": "Seleção do mecanismo de processamento."
+      },
+      "fixed_generation": {
+        "name": "fixed_generation",
+        "tooltip": "Quando desativado, cada geração pode introduzir um grau de aleatoriedade, levando a resultados mais diversos."
+      },
+      "flavor": {
+        "name": "flavor",
+        "tooltip": "Tipo de transferência de estilo."
+      },
+      "image": {
+        "name": "image",
+        "tooltip": "A imagem para aplicar a transferência de estilo."
+      },
+      "portrait_mode": {
+        "name": "portrait_mode",
+        "tooltip": "Ativar modo retrato para aprimoramentos faciais."
+      },
+      "prompt": {
+        "name": "prompt"
+      },
+      "reference_image": {
+        "name": "reference_image",
+        "tooltip": "A imagem de referência da qual extrair o estilo."
+      },
+      "structure_strength": {
+        "name": "structure_strength",
+        "tooltip": "Mantém a estrutura da imagem original."
+      },
+      "style_strength": {
+        "name": "style_strength",
+        "tooltip": "Porcentagem da intensidade do estilo."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "Mahiro": {
     "description": "Modifica a orientação para escalar mais na 'direção' do prompt positivo do que na diferença entre o prompt negativo.",
     "display_name": "Mahiro CFG",
@@ -11225,19 +11428,28 @@
     }
   },
   "ResizeImageMaskNode": {
+    "description": "Redimensione uma imagem ou mask usando vários métodos de escala.",
     "display_name": "Redimensionar Imagem/Máscara",
     "inputs": {
       "input": {
         "name": "entrada"
       },
       "resize_type": {
-        "name": "tipo_de_redimensionamento"
+        "name": "tipo_de_redimensionamento",
+        "tooltip": "Selecione como redimensionar: por dimensões exatas, fator de escala, correspondendo a outra imagem, etc."
       },
-      "resize_type_multiplier": {
-        "name": "multiplicador"
+      "resize_type_crop": {
+        "name": "cortar"
+      },
+      "resize_type_height": {
+        "name": "altura"
+      },
+      "resize_type_width": {
+        "name": "largura"
       },
       "scale_method": {
-        "name": "método_de_escala"
+        "name": "método_de_escala",
+        "tooltip": "Algoritmo de interpolação. 'area' é melhor para reduzir, 'lanczos' para aumentar, 'nearest-exact' para pixel art."
       }
     },
     "outputs": {
@@ -13382,6 +13594,84 @@
       }
     }
   },
+  "TencentImageToModelNode": {
+    "display_name": "Hunyuan3D: Imagem(ns) para Modelo (Pro)",
+    "inputs": {
+      "control_after_generate": {
+        "name": "controle após gerar"
+      },
+      "face_count": {
+        "name": "número_de_faces"
+      },
+      "generate_type": {
+        "name": "tipo_de_geração"
+      },
+      "generate_type_pbr": {
+        "name": "pbr"
+      },
+      "image": {
+        "name": "imagem"
+      },
+      "image_back": {
+        "name": "imagem_traseira"
+      },
+      "image_left": {
+        "name": "imagem_esquerda"
+      },
+      "image_right": {
+        "name": "imagem_direita"
+      },
+      "model": {
+        "name": "modelo",
+        "tooltip": "A opção LowPoly não está disponível para o modelo `3.1`."
+      },
+      "seed": {
+        "name": "semente",
+        "tooltip": "A semente controla se o nó deve ser executado novamente; os resultados são não determinísticos independentemente da semente."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "arquivo_modelo",
+        "tooltip": null
+      }
+    }
+  },
+  "TencentTextToModelNode": {
+    "display_name": "Hunyuan3D: Texto para Modelo (Pro)",
+    "inputs": {
+      "control_after_generate": {
+        "name": "controle após gerar"
+      },
+      "face_count": {
+        "name": "número_de_faces"
+      },
+      "generate_type": {
+        "name": "tipo_de_geração"
+      },
+      "generate_type_pbr": {
+        "name": "pbr"
+      },
+      "model": {
+        "name": "modelo",
+        "tooltip": "A opção LowPoly não está disponível para o modelo `3.1`."
+      },
+      "prompt": {
+        "name": "prompt",
+        "tooltip": "Suporta até 1024 caracteres."
+      },
+      "seed": {
+        "name": "semente",
+        "tooltip": "A semente controla se o nó deve ser executado novamente; os resultados são não determinísticos independentemente da semente."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "arquivo_modelo",
+        "tooltip": null
+      }
+    }
+  },
   "TextEncodeAceStepAudio": {
     "display_name": "TextEncodeAceStepAudio",
     "inputs": {
@@ -13477,6 +13767,40 @@
       }
     }
   },
+  "TextEncodeZImageOmni": {
+    "display_name": "TextEncodeZImageOmni",
+    "inputs": {
+      "auto_resize_images": {
+        "name": "redimensionar_imagens_automaticamente"
+      },
+      "clip": {
+        "name": "clip"
+      },
+      "image1": {
+        "name": "imagem1"
+      },
+      "image2": {
+        "name": "imagem2"
+      },
+      "image3": {
+        "name": "imagem3"
+      },
+      "image_encoder": {
+        "name": "codificador_de_imagem"
+      },
+      "prompt": {
+        "name": "prompt"
+      },
+      "vae": {
+        "name": "vae"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "TextToLowercase": {
     "display_name": "Texto para minúsculas",
     "inputs": {
@@ -13682,6 +14006,10 @@
         "name": "modo_bucket",
         "tooltip": "Ativar modo de bucket de resolução. Quando ativado, espera latents pré-bucketados do nó ResolutionBucket."
       },
+      "bypass_mode": {
+        "name": "bypass_mode",
+        "tooltip": "Ativar modo bypass para treinamento. Quando ativado, os adaptadores são aplicados via hooks de encaminhamento em vez de modificação de pesos. Útil para modelos quantizados onde os pesos não podem ser modificados diretamente."
+      },
       "control_after_generate": {
         "name": "controlar após gerar"
       },
@@ -13754,10 +14082,6 @@
       "2": {
         "name": "mapa_de_perda",
         "tooltip": "Histórico de perda"
-      },
-      "3": {
-        "name": "passos",
-        "tooltip": "Total de passos de treinamento"
       }
     }
   },
@@ -15652,6 +15976,79 @@
       }
     }
   },
+  "WanInfiniteTalkToVideo": {
+    "display_name": "WanInfiniteTalkToVideo",
+    "inputs": {
+      "audio_encoder_output_1": {
+        "name": "saída do codificador de áudio 1"
+      },
+      "audio_scale": {
+        "name": "escala de áudio"
+      },
+      "clip_vision_output": {
+        "name": "saída do clip vision"
+      },
+      "height": {
+        "name": "altura"
+      },
+      "length": {
+        "name": "duração"
+      },
+      "mode": {
+        "name": "modo"
+      },
+      "model": {
+        "name": "modelo"
+      },
+      "model_patch": {
+        "name": "patch do modelo"
+      },
+      "motion_frame_count": {
+        "name": "quantidade de quadros de movimento",
+        "tooltip": "Número de quadros anteriores a serem usados como contexto de movimento."
+      },
+      "negative": {
+        "name": "negativo"
+      },
+      "positive": {
+        "name": "positivo"
+      },
+      "previous_frames": {
+        "name": "quadros anteriores"
+      },
+      "start_image": {
+        "name": "imagem inicial"
+      },
+      "vae": {
+        "name": "vae"
+      },
+      "width": {
+        "name": "largura"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "modelo",
+        "tooltip": null
+      },
+      "1": {
+        "name": "positivo",
+        "tooltip": null
+      },
+      "2": {
+        "name": "negativo",
+        "tooltip": null
+      },
+      "3": {
+        "name": "latente",
+        "tooltip": null
+      },
+      "4": {
+        "name": "imagem recortada",
+        "tooltip": null
+      }
+    }
+  },
   "WanMoveConcatTrack": {
     "display_name": "WanMoveConcatTrack",
     "inputs": {
@@ -16168,6 +16565,43 @@
       }
     }
   },
+  "WavespeedFlashVSRNode": {
+    "description": "Aprimorador de vídeo rápido e de alta qualidade que aumenta a resolução e restaura a nitidez de vídeos de baixa resolução ou borrados.",
+    "display_name": "FlashVSR Video Upscale",
+    "inputs": {
+      "target_resolution": {
+        "name": "resolução_alvo"
+      },
+      "video": {
+        "name": "vídeo"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "WavespeedImageUpscaleNode": {
+    "description": "Aumente a resolução e a qualidade da imagem, ampliando fotos para 4K ou 8K para resultados nítidos e detalhados.",
+    "display_name": "WaveSpeed Image Upscale",
+    "inputs": {
+      "image": {
+        "name": "imagem"
+      },
+      "model": {
+        "name": "modelo"
+      },
+      "target_resolution": {
+        "name": "resolução_alvo"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "WebcamCapture": {
     "display_name": "Captura da Webcam",
     "inputs": {
diff --git a/src/locales/pt-BR/settings.json b/src/locales/pt-BR/settings.json
index 0de32678b..3ac0dec10 100644
--- a/src/locales/pt-BR/settings.json
+++ b/src/locales/pt-BR/settings.json
@@ -52,7 +52,8 @@
     }
   },
   "Comfy_Canvas_SelectionToolbox": {
-    "name": "Mostrar caixa de ferramentas de seleção"
+    "name": "Mostrar caixa de ferramentas de seleção",
+    "tooltip": "Exibe uma barra de ferramentas flutuante quando os nós estão selecionados, proporcionando acesso rápido a ações comuns."
   },
   "Comfy_ConfirmClear": {
     "name": "Exigir confirmação ao limpar o fluxo de trabalho"
@@ -147,7 +148,8 @@
       "Linear": "Linear",
       "Spline": "Spline",
       "Straight": "Reto"
-    }
+    },
+    "tooltip": "Controla a aparência e a visibilidade dos links de conexão entre os nós no canvas."
   },
   "Comfy_Load3D_3DViewerEnable": {
     "name": "Ativar visualizador 3D (Beta)",
@@ -272,6 +274,10 @@
   "Comfy_Node_AllowImageSizeDraw": {
     "name": "Mostrar largura × altura abaixo da pré-visualização da imagem"
   },
+  "Comfy_Node_AlwaysShowAdvancedWidgets": {
+    "name": "Sempre mostrar widgets avançados em todos os nodes",
+    "tooltip": "Quando ativado, os widgets avançados ficam sempre visíveis em todos os nodes, sem a necessidade de expandi-los individualmente."
+  },
   "Comfy_Node_AutoSnapLinkToSlot": {
     "name": "Ajustar automaticamente o link ao slot do nó",
     "tooltip": "Ao arrastar um link sobre um nó, o link se ajusta automaticamente a um slot de entrada viável no nó"
@@ -470,6 +476,7 @@
     "tooltip": "O deslocamento do ponto de controle bezier a partir do ponto central de redirecionamento"
   },
   "pysssss_SnapToGrid": {
-    "name": "Sempre alinhar à grade"
+    "name": "Sempre alinhar à grade",
+    "tooltip": "Quando ativado, os nós se alinharão automaticamente à grade ao serem movidos ou redimensionados."
   }
 }
diff --git a/src/locales/ru/main.json b/src/locales/ru/main.json
index cf8a16623..b71738e27 100644
--- a/src/locales/ru/main.json
+++ b/src/locales/ru/main.json
@@ -24,6 +24,7 @@
     "assets": "Ресурсы",
     "baseModels": "Базовые модели",
     "browseAssets": "Просмотр ресурсов",
+    "byType": "По типу",
     "checkpoints": "Чекпойнты",
     "civitaiLinkExample": "{example} {link}",
     "civitaiLinkExampleStrong": "Пример:",
@@ -45,6 +46,10 @@
       "failed": "Ошибка загрузки",
       "inProgress": "Загрузка {assetName}..."
     },
+    "emptyImported": {
+      "canImport": "Пока нет импортированных моделей. Нажмите «Импортировать модель», чтобы добавить свою.",
+      "restricted": "Персональные модели доступны только на уровне Creator и выше."
+    },
     "errorFileTooLarge": "Файл превышает максимально допустимый размер",
     "errorFormatNotAllowed": "Разрешён только формат SafeTensor",
     "errorModelTypeNotSupported": "Этот тип модели не поддерживается",
@@ -61,6 +66,7 @@
     "finish": "Готово",
     "genericLinkPlaceholder": "Вставьте ссылку сюда",
     "importAnother": "Импортировать другой",
+    "imported": "Импортировано",
     "jobId": "ID задачи",
     "loadingModels": "Загрузка {type}...",
     "maxFileSize": "Максимальный размер файла: {size}",
@@ -70,6 +76,30 @@
       "threeDModelPlaceholder": "3D-модель"
     },
     "modelAssociatedWithLink": "Модель, связанная с предоставленной вами ссылкой:",
+    "modelInfo": {
+      "addBaseModel": "Добавить базовую модель...",
+      "addTag": "Добавить тег...",
+      "additionalTags": "Дополнительные теги",
+      "baseModelUnknown": "Базовая модель неизвестна",
+      "basicInfo": "Основная информация",
+      "compatibleBaseModels": "Совместимые базовые модели",
+      "description": "Описание",
+      "descriptionNotSet": "Описание не задано",
+      "descriptionPlaceholder": "Добавьте описание для этой модели...",
+      "displayName": "Отображаемое имя",
+      "editDisplayName": "Редактировать отображаемое имя",
+      "fileName": "Имя файла",
+      "modelDescription": "Описание модели",
+      "modelTagging": "Теги модели",
+      "modelType": "Тип модели",
+      "noAdditionalTags": "Нет дополнительных тегов",
+      "selectModelPrompt": "Выберите модель, чтобы увидеть её информацию",
+      "selectModelType": "Выберите тип модели...",
+      "source": "Источник",
+      "title": "Информация о модели",
+      "triggerPhrases": "Триггерные фразы",
+      "viewOnSource": "Посмотреть на {source}"
+    },
     "modelName": "Имя модели",
     "modelNamePlaceholder": "Введите имя для этой модели",
     "modelTypeSelectorLabel": "Какой это тип модели?",
@@ -684,6 +714,7 @@
     "clearAll": "Очистить всё",
     "clearFilters": "Сбросить фильтры",
     "close": "Закрыть",
+    "closeDialog": "Закрыть диалог",
     "color": "Цвет",
     "comfy": "Comfy",
     "comfyOrgLogoAlt": "Логотип ComfyOrg",
@@ -700,6 +731,7 @@
     "control_before_generate": "управление до генерации",
     "copied": "Скопировано",
     "copy": "Копировать",
+    "copyAll": "Скопировать всё",
     "copyJobId": "Копировать ID задания",
     "copyToClipboard": "Скопировать в буфер обмена",
     "copyURL": "Скопировать URL",
@@ -762,6 +794,8 @@
     "goToNode": "Перейти к ноде",
     "graphNavigation": "Навигация по графу",
     "halfSpeed": "0.5x",
+    "hideLeftPanel": "Скрыть левую панель",
+    "hideRightPanel": "Скрыть правую панель",
     "icon": "Иконка",
     "imageFailedToLoad": "Не удалось загрузить изображение",
     "imagePreview": "Предварительный просмотр изображения - Используйте клавиши со стрелками для навигации между изображениями",
@@ -803,6 +837,7 @@
     "name": "Имя",
     "newFolder": "Новая папка",
     "next": "Далее",
+    "nightly": "NIGHTLY",
     "no": "Нет",
     "noAudioRecorded": "Аудио не записано",
     "noItems": "Нет элементов",
@@ -817,6 +852,7 @@
     "nodeSlotsError": "Ошибка слотов ноды",
     "nodeWidgetsError": "Ошибка виджетов ноды",
     "nodes": "Узлы",
+    "nodesCount": "{count} узлов | {count} узел | {count} узла",
     "nodesRunning": "запущено узлов",
     "none": "Нет",
     "nothingToCopy": "Нечего копировать",
@@ -891,7 +927,9 @@
     "selectedFile": "Выбранный файл",
     "setAsBackground": "Установить как фон",
     "settings": "Настройки",
+    "showLeftPanel": "Показать левую панель",
     "showReport": "Показать отчёт",
+    "showRightPanel": "Показать правую панель",
     "singleSelectDropdown": "Выпадающий список единичного выбора",
     "sort": "Сортировать",
     "source": "Источник",
@@ -914,6 +952,7 @@
     "updating": "Обновление",
     "upload": "Загрузить",
     "usageHint": "Подсказка по использованию",
+    "use": "Использовать",
     "user": "Пользователь",
     "versionMismatchWarning": "Предупреждение о несовместимости версий",
     "versionMismatchWarningMessage": "{warning}: {detail} Посетите https://docs.comfy.org/installation/update_comfyui#common-update-issues для инструкций по обновлению.",
@@ -921,11 +960,10 @@
     "videoPreview": "Предварительный просмотр видео - Используйте клавиши со стрелками для навигации между видео",
     "viewImageOfTotal": "Просмотр изображения {index} из {total}",
     "viewVideoOfTotal": "Просмотр видео {index} из {total}",
-    "vitePreloadErrorMessage": "Вышла новая версия приложения. Хотите перезагрузить?\nЕсли нет, некоторые части приложения могут работать некорректно.\nВы можете отказаться и сохранить свой прогресс перед перезагрузкой.",
-    "vitePreloadErrorTitle": "Доступна новая версия",
     "volume": "Громкость",
     "warning": "Предупреждение",
-    "workflow": "Рабочий процесс"
+    "workflow": "Рабочий процесс",
+    "you": "Вы"
   },
   "graphCanvasMenu": {
     "fitView": "Подгонять под выделенные",
@@ -1617,17 +1655,25 @@
       "title": "В этом рабочем процессе отсутствуют узлы"
     }
   },
+  "nightly": {
+    "badge": {
+      "label": "Предварительная версия",
+      "tooltip": "Вы используете ночную версию ComfyUI. Пожалуйста, используйте кнопку обратной связи, чтобы поделиться своим мнением об этих функциях."
+    }
+  },
   "nodeCategories": {
     "": "",
     "3d": "3d",
     "3d_models": "3d_модели",
     "BFL": "BFL",
+    "Bria": "Bria",
     "ByteDance": "ByteDance",
     "Gemini": "Gemini",
     "Ideogram": "Ideogram",
     "Kling": "Kling",
     "LTXV": "LTXV",
     "Luma": "Luma",
+    "Magnific": "Magnific",
     "Meshy": "Meshy",
     "MiniMax": "MiniMax",
     "Moonvalley Marey": "Moonvalley Marey",
@@ -1638,11 +1684,13 @@
     "Runway": "Runway",
     "Sora": "Sora",
     "Stability AI": "Stability AI",
+    "Tencent": "Tencent",
     "Topaz": "Topaz",
     "Tripo": "Tripo",
     "Veo": "Veo",
     "Vidu": "Vidu",
     "Wan": "Wan",
+    "WaveSpeed": "WaveSpeed",
     "_for_testing": "_для_тестирования",
     "advanced": "расширенный",
     "animation": "анимация",
@@ -1852,6 +1900,7 @@
     },
     "groupSettings": "Настройки группы",
     "groups": "Группы",
+    "hideAdvancedInputsButton": "Скрыть расширенные параметры",
     "hideInput": "Скрыть вход",
     "info": "Информация",
     "inputs": "ВХОДЫ",
@@ -2084,6 +2133,7 @@
     "NodeLibrary": "Библиотека нод",
     "Nodes 2_0": "Nodes 2.0",
     "Notification Preferences": "Настройки уведомлений",
+    "Other": "Другое",
     "PLY": "PLY",
     "PlanCredits": "План и кредиты",
     "Pointer": "Указатель",
@@ -2103,7 +2153,8 @@
     "Vue Nodes": "Vue Nodes",
     "VueNodes": "Vue узлы",
     "Window": "Окно",
-    "Workflow": "Рабочий процесс"
+    "Workflow": "Рабочий процесс",
+    "Workspace": "Рабочее пространство"
   },
   "shape": {
     "CARD": "Карточка",
@@ -2129,12 +2180,14 @@
     "viewControls": "Управление видом"
   },
   "sideToolbar": {
+    "activeJobStatus": "Активная задача: {status}",
     "assets": "Ассеты",
     "backToAssets": "Назад ко всем ассетам",
     "browseTemplates": "Просмотреть примеры шаблонов",
     "downloads": "Загрузки",
     "generatedAssetsHeader": "Сгенерированные ресурсы",
     "helpCenter": "Центр поддержки",
+    "importedAssetsHeader": "Импортированные ресурсы",
     "labels": {
       "assets": "Ассеты",
       "console": "Консоль",
@@ -2179,6 +2232,7 @@
     "queue": "Очередь",
     "queueProgressOverlay": {
       "activeJobs": "{count} активное задание | {count} активных задания | {count} активных заданий",
+      "activeJobsShort": "{count} активно | {count} активно",
       "activeJobsSuffix": "активных заданий",
       "cancelJobTooltip": "Отменить задание",
       "clearHistory": "Очистить историю очереди заданий",
@@ -2267,9 +2321,15 @@
     "beta": "БЕТА",
     "billedMonthly": "Оплата ежемесячно",
     "billedYearly": "{total} Оплата ежегодно",
+    "billingComingSoon": {
+      "message": "Скоро появится командная оплата. Вы сможете оформить подписку на тариф для вашего рабочего пространства с оплатой за каждого участника. Следите за обновлениями.",
+      "title": "Скоро будет"
+    },
+    "cancelSubscription": "Отменить подписку",
     "changeTo": "Перейти на {plan}",
     "comfyCloud": "Comfy Cloud",
     "comfyCloudLogo": "Логотип Comfy Cloud",
+    "contactOwnerToSubscribe": "Свяжитесь с владельцем рабочего пространства для оформления подписки",
     "contactUs": "Связаться с нами",
     "creditsRemainingThisMonth": "Кредитов осталось в этом месяце",
     "creditsRemainingThisYear": "Кредитов осталось в этом году",
@@ -2282,6 +2342,7 @@
     "haveQuestions": "Есть вопросы или интересует корпоративное решение?",
     "invoiceHistory": "История счетов",
     "learnMore": "Узнать больше",
+    "managePayment": "Управление оплатой",
     "managePlan": "Управление планом",
     "manageSubscription": "Управление подпиской",
     "maxDuration": {
@@ -2317,6 +2378,7 @@
     "subscribeToComfyCloud": "Подписаться на Comfy Cloud",
     "subscribeToRun": "Подписаться",
     "subscribeToRunFull": "Подписаться для запуска",
+    "subscriptionRequiredMessage": "Для запуска рабочих процессов в облаке участникам требуется подписка",
     "tierNameYearly": "{name} Ежегодно",
     "tiers": {
       "creator": {
@@ -2348,6 +2410,7 @@
     "viewMoreDetails": "Подробнее",
     "viewMoreDetailsPlans": "Подробнее о планах и ценах",
     "viewUsageHistory": "История использования",
+    "workspaceNotSubscribed": "Это рабочее пространство не имеет подписки",
     "yearly": "Ежегодно",
     "yearlyCreditsLabel": "Годовые кредиты",
     "yearlyDiscount": "СКИДКА 20%",
@@ -2449,6 +2512,7 @@
     "failedToLoadModel": "Не удалось загрузить 3D-модель",
     "failedToPurchaseCredits": "Не удалось купить кредиты: {error}",
     "failedToQueue": "Не удалось поставить в очередь",
+    "failedToSaveDraft": "Не удалось сохранить черновик рабочего процесса",
     "failedToToggleCamera": "Не удалось переключить камеру",
     "failedToToggleGrid": "Не удалось переключить сетку",
     "failedToUpdateBackgroundColor": "Не удалось обновить цвет фона",
@@ -2497,7 +2561,8 @@
     "notSet": "Не задано",
     "provider": "Способ входа",
     "title": "Настройки пользователя",
-    "updatePassword": "Обновить пароль"
+    "updatePassword": "Обновить пароль",
+    "workspaceSettings": "Настройки рабочего пространства"
   },
   "validation": {
     "descriptionRequired": "Описание обязательно",
@@ -2588,6 +2653,9 @@
     "saveWorkflow": "Сохранить рабочий процесс"
   },
   "workspace": {
+    "addedToWorkspace": "Вы были добавлены в {workspaceName}",
+    "inviteAccepted": "Приглашение принято",
+    "inviteFailed": "Не удалось принять приглашение",
     "unsavedChanges": {
       "message": "У вас есть несохранённые изменения. Хотите их отменить и переключиться на другое рабочее пространство?",
       "title": "Несохранённые изменения"
@@ -2602,6 +2670,128 @@
       "workspaceNotFound": "Рабочее пространство не найдено"
     }
   },
+  "workspacePanel": {
+    "createWorkspaceDialog": {
+      "create": "Создать",
+      "message": "Рабочие пространства позволяют участникам использовать общий пул кредитов. После создания вы станете владельцем.",
+      "nameLabel": "Название рабочего пространства*",
+      "namePlaceholder": "Введите название рабочего пространства",
+      "title": "Создать новое рабочее пространство"
+    },
+    "dashboard": {
+      "placeholder": "Настройки рабочего пространства"
+    },
+    "deleteDialog": {
+      "message": "Все неиспользованные кредиты или несохранённые ресурсы будут потеряны. Это действие необратимо.",
+      "messageWithName": "Удалить «{name}»? Все неиспользованные кредиты или несохранённые ресурсы будут потеряны. Это действие необратимо.",
+      "title": "Удалить это рабочее пространство?"
+    },
+    "editWorkspaceDialog": {
+      "nameLabel": "Название рабочего пространства",
+      "save": "Сохранить",
+      "title": "Редактировать детали рабочего пространства"
+    },
+    "invite": "Пригласить",
+    "inviteLimitReached": "Достигнут лимит в 50 участников",
+    "inviteMember": "Пригласить участника",
+    "inviteMemberDialog": {
+      "createLink": "Создать ссылку",
+      "linkCopied": "Скопировано",
+      "linkCopyFailed": "Не удалось скопировать ссылку",
+      "linkStep": {
+        "copyLink": "Скопировать ссылку",
+        "done": "Готово",
+        "message": "Убедитесь, что его аккаунт использует этот email.",
+        "title": "Отправьте эту ссылку человеку"
+      },
+      "message": "Создайте ссылку-приглашение для отправки человеку",
+      "placeholder": "Введите email человека",
+      "title": "Пригласить человека в это рабочее пространство"
+    },
+    "leaveDialog": {
+      "leave": "Покинуть",
+      "message": "Вы не сможете присоединиться снова, если не свяжетесь с владельцем рабочего пространства.",
+      "title": "Покинуть это рабочее пространство?"
+    },
+    "members": {
+      "actions": {
+        "copyLink": "Скопировать ссылку приглашения",
+        "removeMember": "Удалить участника",
+        "revokeInvite": "Отозвать приглашение"
+      },
+      "columns": {
+        "expiryDate": "Дата истечения",
+        "inviteDate": "Дата приглашения",
+        "joinDate": "Дата вступления"
+      },
+      "createNewWorkspace": "создайте новое.",
+      "membersCount": "{count}/50 участников",
+      "noInvites": "Нет ожидающих приглашений",
+      "noMembers": "Нет участников",
+      "pendingInvitesCount": "{count} ожидающее приглашение | {count} ожидающих приглашений",
+      "personalWorkspaceMessage": "Вы не можете приглашать других участников в ваше личное рабочее пространство. Чтобы добавить участников,",
+      "tabs": {
+        "active": "Активные",
+        "pendingCount": "Ожидают ({count})"
+      }
+    },
+    "menu": {
+      "deleteWorkspace": "Удалить рабочее пространство",
+      "deleteWorkspaceDisabledTooltip": "Сначала отмените активную подписку рабочего пространства",
+      "editWorkspace": "Редактировать детали рабочего пространства",
+      "leaveWorkspace": "Покинуть рабочее пространство"
+    },
+    "removeMemberDialog": {
+      "error": "Не удалось удалить участника",
+      "message": "Этот участник будет удалён из вашего рабочего пространства. Использованные им кредиты не будут возвращены.",
+      "remove": "Удалить участника",
+      "success": "Участник удалён",
+      "title": "Удалить этого участника?"
+    },
+    "revokeInviteDialog": {
+      "message": "Этот человек больше не сможет присоединиться к вашему рабочему пространству. Его ссылка-приглашение будет аннулирована.",
+      "revoke": "Отозвать приглашение",
+      "title": "Отозвать приглашение?"
+    },
+    "tabs": {
+      "dashboard": "Панель управления",
+      "membersCount": "Участники ({count})",
+      "planCredits": "Тариф и кредиты"
+    },
+    "toast": {
+      "failedToCreateWorkspace": "Не удалось создать рабочее пространство",
+      "failedToDeleteWorkspace": "Не удалось удалить рабочее пространство",
+      "failedToFetchWorkspaces": "Не удалось загрузить рабочие пространства",
+      "failedToLeaveWorkspace": "Не удалось покинуть рабочее пространство",
+      "failedToUpdateWorkspace": "Не удалось обновить рабочее пространство",
+      "workspaceCreated": {
+        "message": "Оформите подписку, пригласите коллег и начните совместную работу.",
+        "subscribe": "Оформить подписку",
+        "title": "Рабочее пространство создано"
+      },
+      "workspaceDeleted": {
+        "message": "Рабочее пространство было безвозвратно удалено.",
+        "title": "Рабочее пространство удалено"
+      },
+      "workspaceLeft": {
+        "message": "Вы вышли из рабочего пространства.",
+        "title": "Вы покинули рабочее пространство"
+      },
+      "workspaceUpdated": {
+        "message": "Детали рабочего пространства сохранены.",
+        "title": "Рабочее пространство обновлено"
+      }
+    }
+  },
+  "workspaceSwitcher": {
+    "createWorkspace": "Создать новое рабочее пространство",
+    "maxWorkspacesReached": "Вы можете владеть только 10 рабочими пространствами. Удалите одно, чтобы создать новое.",
+    "personal": "Личное",
+    "roleMember": "Участник",
+    "roleOwner": "Владелец",
+    "subscribe": "Оформить подписку",
+    "switchWorkspace": "Сменить рабочее пространство"
+  },
   "zoomControls": {
     "hideMinimap": "Скрыть миникарту",
     "label": "Управление масштабом",
diff --git a/src/locales/ru/nodeDefs.json b/src/locales/ru/nodeDefs.json
index 54d762c47..a05547287 100644
--- a/src/locales/ru/nodeDefs.json
+++ b/src/locales/ru/nodeDefs.json
@@ -328,6 +328,68 @@
       }
     }
   },
+  "BriaImageEditNode": {
+    "description": "Редактирование изображений с помощью новейшей модели Bria",
+    "display_name": "Bria Image Edit",
+    "inputs": {
+      "control_after_generate": {
+        "name": "контроль после генерации"
+      },
+      "guidance_scale": {
+        "name": "guidance_scale",
+        "tooltip": "Большее значение заставляет изображение точнее следовать промпту."
+      },
+      "image": {
+        "name": "изображение"
+      },
+      "mask": {
+        "name": "маска",
+        "tooltip": "Если не указано, редактирование применяется ко всему изображению."
+      },
+      "model": {
+        "name": "model"
+      },
+      "moderation": {
+        "name": "модерация",
+        "tooltip": "Настройки модерации"
+      },
+      "moderation_prompt_content_moderation": {
+        "name": "модерация_контента_промпта"
+      },
+      "moderation_visual_input_moderation": {
+        "name": "модерация_визуального_входа"
+      },
+      "moderation_visual_output_moderation": {
+        "name": "модерация_визуального_выхода"
+      },
+      "negative_prompt": {
+        "name": "негативный_промпт"
+      },
+      "prompt": {
+        "name": "промпт",
+        "tooltip": "Инструкция для редактирования изображения"
+      },
+      "seed": {
+        "name": "seed"
+      },
+      "steps": {
+        "name": "шаги"
+      },
+      "structured_prompt": {
+        "name": "структурированный_промпт",
+        "tooltip": "Строка, содержащая структурированный промпт для редактирования в формате JSON. Используйте вместо обычного промпта для точного, программного управления."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      },
+      "1": {
+        "name": "структурированный_промпт",
+        "tooltip": null
+      }
+    }
+  },
   "ByteDanceFirstLastFrameNode": {
     "description": "Создать видео с использованием промпта и первого и последнего кадров.",
     "display_name": "ByteDance - Преобразование первого-последнего кадра в видео",
@@ -385,43 +447,6 @@
       }
     }
   },
-  "ByteDanceImageEditNode": {
-    "description": "Редактирование изображений с использованием моделей ByteDance через API на основе промпта",
-    "display_name": "Редактирование изображений ByteDance",
-    "inputs": {
-      "control_after_generate": {
-        "name": "control after generate"
-      },
-      "guidance_scale": {
-        "name": "guidance_scale",
-        "tooltip": "Более высокое значение заставляет изображение точнее следовать промпту"
-      },
-      "image": {
-        "name": "image",
-        "tooltip": "Базовое изображение для редактирования"
-      },
-      "model": {
-        "name": "model"
-      },
-      "prompt": {
-        "name": "prompt",
-        "tooltip": "Инструкция для редактирования изображения"
-      },
-      "seed": {
-        "name": "seed",
-        "tooltip": "Сид для использования при генерации"
-      },
-      "watermark": {
-        "name": "watermark",
-        "tooltip": "Добавлять ли водяной знак \"Сгенерировано ИИ\" на изображение"
-      }
-    },
-    "outputs": {
-      "0": {
-        "tooltip": null
-      }
-    }
-  },
   "ByteDanceImageNode": {
     "description": "Генерация изображений с использованием моделей ByteDance через API на основе промпта",
     "display_name": "Изображение ByteDance",
@@ -2031,14 +2056,18 @@
       "choice": {
         "name": "выбор"
       },
-      "option0": {
+      "index": {
+      },
+      "option1": {
       }
     },
-    "outputs": {
-      "0": {
+    "outputs": [
+      null,
+      {
+        "name": "ИНДЕКС",
         "tooltip": null
       }
-    }
+    ]
   },
   "DiffControlNetLoader": {
     "display_name": "Загрузить модель ControlNet (дифф)",
@@ -6390,6 +6419,60 @@
       }
     }
   },
+  "LoraLoaderBypass": {
+    "description": "Применяет LoRA в режиме обхода. В отличие от обычной LoRA, веса модели не изменяются — вычисления LoRA внедряются во время прямого прохода. Полезно для сценариев обучения.",
+    "display_name": "Загрузка LoRA (Обход) (для отладки)",
+    "inputs": {
+      "clip": {
+        "name": "clip",
+        "tooltip": "Модель CLIP, к которой будет применяться LoRA."
+      },
+      "lora_name": {
+        "name": "lora_name",
+        "tooltip": "Имя LoRA."
+      },
+      "model": {
+        "name": "model",
+        "tooltip": "Диффузионная модель, к которой будет применяться LoRA."
+      },
+      "strength_clip": {
+        "name": "strength_clip",
+        "tooltip": "Степень изменения модели CLIP. Может быть отрицательным значением."
+      },
+      "strength_model": {
+        "name": "strength_model",
+        "tooltip": "Степень изменения диффузионной модели. Может быть отрицательным значением."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": "Изменённая диффузионная модель."
+      },
+      "1": {
+        "tooltip": "Изменённая модель CLIP."
+      }
+    }
+  },
+  "LoraLoaderBypassModelOnly": {
+    "description": "Применяет LoRA в режиме обхода. В отличие от обычной LoRA, веса модели не изменяются — вычисления LoRA внедряются во время прямого прохода. Полезно для сценариев обучения.",
+    "display_name": "Загрузка LoRA (Обход, только модель) (для отладки)",
+    "inputs": {
+      "lora_name": {
+        "name": "lora_name"
+      },
+      "model": {
+        "name": "model"
+      },
+      "strength_model": {
+        "name": "strength_model"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": "Изменённая диффузионная модель."
+      }
+    }
+  },
   "LoraLoaderModelOnly": {
     "description": "LoRA используются для изменения моделей диффузии и CLIP, изменяя способ, которым латенты удаляются от шума, например, применяя стили. Несколько нод LoRA могут быть связаны вместе.",
     "display_name": "Загрузчик LoRA (Только модель)",
@@ -6757,6 +6840,126 @@
       }
     }
   },
+  "MagnificImageRelightNode": {
+    "description": "Изменение освещения изображения с возможностью передачи света по ссылке.",
+    "display_name": "Magnific: Пересвет изображения",
+    "inputs": {
+      "advanced_settings": {
+        "name": "advanced_settings",
+        "tooltip": "Тонкая настройка для продвинутого управления освещением."
+      },
+      "change_background": {
+        "name": "change_background",
+        "tooltip": "Изменяет фон на основе промпта или референса."
+      },
+      "image": {
+        "name": "image",
+        "tooltip": "Изображение для пересвета."
+      },
+      "interpolate_from_original": {
+        "name": "interpolate_from_original",
+        "tooltip": "Ограничивает свободу генерации для большего соответствия оригиналу."
+      },
+      "light_transfer_strength": {
+        "name": "light_transfer_strength",
+        "tooltip": "Интенсивность применения передачи света."
+      },
+      "preserve_details": {
+        "name": "preserve_details",
+        "tooltip": "Сохраняет текстуру и мелкие детали оригинала."
+      },
+      "prompt": {
+        "name": "prompt",
+        "tooltip": "Описание для управления освещением. Поддерживает нотацию акцентов (1-1.4)."
+      },
+      "reference_image": {
+        "name": "reference_image",
+        "tooltip": "Необязательное референсное изображение для передачи освещения."
+      },
+      "style": {
+        "name": "style",
+        "tooltip": "Предпочтительный стиль результата."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "MagnificImageSkinEnhancerNode": {
+    "description": "Улучшение кожи на портретах с несколькими режимами обработки.",
+    "display_name": "Magnific: Улучшение кожи на изображении",
+    "inputs": {
+      "image": {
+        "name": "image",
+        "tooltip": "Портрет для улучшения."
+      },
+      "mode": {
+        "name": "mode",
+        "tooltip": "Режим обработки: creative — для художественного улучшения, faithful — для сохранения оригинального вида, flexible — для целевой оптимизации."
+      },
+      "sharpen": {
+        "name": "sharpen",
+        "tooltip": "Уровень резкости."
+      },
+      "smart_grain": {
+        "name": "smart_grain",
+        "tooltip": "Уровень интеллектуального зерна."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "MagnificImageStyleTransferNode": {
+    "description": "Переносите стиль с эталонного изображения на ваше входное изображение.",
+    "display_name": "Magnific Перенос стиля изображения",
+    "inputs": {
+      "engine": {
+        "name": "engine",
+        "tooltip": "Выбор движка обработки."
+      },
+      "fixed_generation": {
+        "name": "fixed_generation",
+        "tooltip": "Если отключено, каждое новое поколение будет содержать элемент случайности, что приведёт к более разнообразным результатам."
+      },
+      "flavor": {
+        "name": "flavor",
+        "tooltip": "Вариант переноса стиля."
+      },
+      "image": {
+        "name": "image",
+        "tooltip": "Изображение, к которому будет применён перенос стиля."
+      },
+      "portrait_mode": {
+        "name": "portrait_mode",
+        "tooltip": "Включить портретный режим для улучшения лиц."
+      },
+      "prompt": {
+        "name": "prompt"
+      },
+      "reference_image": {
+        "name": "reference_image",
+        "tooltip": "Эталонное изображение, из которого будет извлекаться стиль."
+      },
+      "structure_strength": {
+        "name": "structure_strength",
+        "tooltip": "Сохраняет структуру исходного изображения."
+      },
+      "style_strength": {
+        "name": "style_strength",
+        "tooltip": "Процент силы стиля."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "Mahiro": {
     "description": "Измените руководство, чтобы оно больше масштабировалось в «направлении» положительной подсказки, а не разницы между отрицательной подсказкой.",
     "display_name": "Mahiro настолько мила, что заслуживает лучшей функции руководства!! (。・ω・。)",
@@ -11209,19 +11412,28 @@
     }
   },
   "ResizeImageMaskNode": {
+    "description": "Изменить размер изображения или mask с помощью различных методов масштабирования.",
     "display_name": "Изменить размер изображения/маски",
     "inputs": {
       "input": {
         "name": "input"
       },
       "resize_type": {
-        "name": "resize_type"
+        "name": "resize_type",
+        "tooltip": "Выберите способ изменения размера: по точным размерам, коэффициенту масштабирования, подгонке под другое изображение и т.д."
       },
-      "resize_type_multiplier": {
-        "name": "multiplier"
+      "resize_type_crop": {
+        "name": "обрезка"
+      },
+      "resize_type_height": {
+        "name": "высота"
+      },
+      "resize_type_width": {
+        "name": "ширина"
       },
       "scale_method": {
-        "name": "scale_method"
+        "name": "scale_method",
+        "tooltip": "Алгоритм интерполяции. 'area' лучше всего подходит для уменьшения, 'lanczos' — для увеличения, 'nearest-exact' — для пиксель-арта."
       }
     },
     "outputs": {
@@ -13355,6 +13567,84 @@
       }
     }
   },
+  "TencentImageToModelNode": {
+    "display_name": "Hunyuan3D: Изображение(я) в модель (Pro)",
+    "inputs": {
+      "control_after_generate": {
+        "name": "контроль после генерации"
+      },
+      "face_count": {
+        "name": "количество граней"
+      },
+      "generate_type": {
+        "name": "тип генерации"
+      },
+      "generate_type_pbr": {
+        "name": "pbr"
+      },
+      "image": {
+        "name": "изображение"
+      },
+      "image_back": {
+        "name": "изображение сзади"
+      },
+      "image_left": {
+        "name": "изображение слева"
+      },
+      "image_right": {
+        "name": "изображение справа"
+      },
+      "model": {
+        "name": "модель",
+        "tooltip": "Опция LowPoly недоступна для модели `3.1`."
+      },
+      "seed": {
+        "name": "seed",
+        "tooltip": "Seed управляет тем, будет ли узел запускаться повторно; результаты всегда недетерминированы, независимо от seed."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "файл_модели",
+        "tooltip": null
+      }
+    }
+  },
+  "TencentTextToModelNode": {
+    "display_name": "Hunyuan3D: Текст в модель (Pro)",
+    "inputs": {
+      "control_after_generate": {
+        "name": "контроль после генерации"
+      },
+      "face_count": {
+        "name": "количество граней"
+      },
+      "generate_type": {
+        "name": "тип генерации"
+      },
+      "generate_type_pbr": {
+        "name": "pbr"
+      },
+      "model": {
+        "name": "модель",
+        "tooltip": "Опция LowPoly недоступна для модели `3.1`."
+      },
+      "prompt": {
+        "name": "промпт",
+        "tooltip": "Поддерживается до 1024 символов."
+      },
+      "seed": {
+        "name": "seed",
+        "tooltip": "Seed управляет тем, будет ли узел запускаться повторно; результаты всегда недетерминированы, независимо от seed."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "файл_модели",
+        "tooltip": null
+      }
+    }
+  },
   "TextEncodeAceStepAudio": {
     "display_name": "TextEncodeAceStepAudio",
     "inputs": {
@@ -13450,6 +13740,40 @@
       }
     }
   },
+  "TextEncodeZImageOmni": {
+    "display_name": "TextEncodeZImageOmni",
+    "inputs": {
+      "auto_resize_images": {
+        "name": "автоматическое_изменение_размера_изображений"
+      },
+      "clip": {
+        "name": "clip"
+      },
+      "image1": {
+        "name": "изображение1"
+      },
+      "image2": {
+        "name": "изображение2"
+      },
+      "image3": {
+        "name": "изображение3"
+      },
+      "image_encoder": {
+        "name": "кодировщик_изображения"
+      },
+      "prompt": {
+        "name": "промпт"
+      },
+      "vae": {
+        "name": "vae"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "TextToLowercase": {
     "display_name": "Преобразовать текст в нижний регистр",
     "inputs": {
@@ -13655,6 +13979,10 @@
         "name": "режим корзины разрешений",
         "tooltip": "Включить режим корзины разрешений. При включении ожидает предварительно разбитые латенты от узла ResolutionBucket."
       },
+      "bypass_mode": {
+        "name": "bypass_mode",
+        "tooltip": "Включить режим обхода для обучения. При включении адаптеры применяются через forward hooks вместо изменения весов. Полезно для квантизованных моделей, где веса нельзя изменить напрямую."
+      },
       "control_after_generate": {
         "name": "управление после генерации"
       },
@@ -15621,6 +15949,79 @@
       }
     }
   },
+  "WanInfiniteTalkToVideo": {
+    "display_name": "WanInfiniteTalkToVideo",
+    "inputs": {
+      "audio_encoder_output_1": {
+        "name": "выход аудиоэнкодера 1"
+      },
+      "audio_scale": {
+        "name": "масштаб аудио"
+      },
+      "clip_vision_output": {
+        "name": "выход clip vision"
+      },
+      "height": {
+        "name": "высота"
+      },
+      "length": {
+        "name": "длина"
+      },
+      "mode": {
+        "name": "режим"
+      },
+      "model": {
+        "name": "модель"
+      },
+      "model_patch": {
+        "name": "патч модели"
+      },
+      "motion_frame_count": {
+        "name": "количество кадров движения",
+        "tooltip": "Количество предыдущих кадров, используемых как контекст движения."
+      },
+      "negative": {
+        "name": "негативный"
+      },
+      "positive": {
+        "name": "позитивный"
+      },
+      "previous_frames": {
+        "name": "предыдущие кадры"
+      },
+      "start_image": {
+        "name": "стартовое изображение"
+      },
+      "vae": {
+        "name": "vae"
+      },
+      "width": {
+        "name": "ширина"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "модель",
+        "tooltip": null
+      },
+      "1": {
+        "name": "позитивный",
+        "tooltip": null
+      },
+      "2": {
+        "name": "негативный",
+        "tooltip": null
+      },
+      "3": {
+        "name": "latent",
+        "tooltip": null
+      },
+      "4": {
+        "name": "обрезанное изображение",
+        "tooltip": null
+      }
+    }
+  },
   "WanMoveConcatTrack": {
     "display_name": "WanMoveConcatTrack",
     "inputs": {
@@ -16137,6 +16538,43 @@
       }
     }
   },
+  "WavespeedFlashVSRNode": {
+    "description": "Быстрый и качественный апскейлер видео, повышающий разрешение и восстанавливающий чёткость для низкокачественных или размытых кадров.",
+    "display_name": "FlashVSR Видео Апскейл",
+    "inputs": {
+      "target_resolution": {
+        "name": "целевое_разрешение"
+      },
+      "video": {
+        "name": "видео"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "WavespeedImageUpscaleNode": {
+    "description": "Увеличьте разрешение и качество изображения, апскейл фотографий до 4K или 8K для чётких и детализированных результатов.",
+    "display_name": "WaveSpeed Апскейл Изображения",
+    "inputs": {
+      "image": {
+        "name": "изображение"
+      },
+      "model": {
+        "name": "model"
+      },
+      "target_resolution": {
+        "name": "целевое_разрешение"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "WebcamCapture": {
     "display_name": "Захват с веб-камеры",
     "inputs": {
diff --git a/src/locales/ru/settings.json b/src/locales/ru/settings.json
index 9b7cbed29..6023161bb 100644
--- a/src/locales/ru/settings.json
+++ b/src/locales/ru/settings.json
@@ -52,7 +52,8 @@
     }
   },
   "Comfy_Canvas_SelectionToolbox": {
-    "name": "Показать панель инструментов выбора"
+    "name": "Показать панель инструментов выбора",
+    "tooltip": "Отображает плавающую панель инструментов при выборе узлов, предоставляя быстрый доступ к основным действиям."
   },
   "Comfy_ConfirmClear": {
     "name": "Требовать подтверждение при очистке рабочего процесса"
@@ -147,7 +148,8 @@
       "Linear": "Линейный",
       "Spline": "Сплайн",
       "Straight": "Прямой"
-    }
+    },
+    "tooltip": "Управляет внешним видом и видимостью соединительных линий между узлами на холсте."
   },
   "Comfy_Load3D_3DViewerEnable": {
     "name": "Включить 3D-просмотрщик (Бета)",
@@ -272,6 +274,10 @@
   "Comfy_Node_AllowImageSizeDraw": {
     "name": "Показывать ширину × высоту под предварительным просмотром изображения"
   },
+  "Comfy_Node_AlwaysShowAdvancedWidgets": {
+    "name": "Всегда показывать расширенные виджеты на всех узлах",
+    "tooltip": "Если включено, расширенные виджеты всегда видны на всех узлах без необходимости раскрывать их по отдельности."
+  },
   "Comfy_Node_AutoSnapLinkToSlot": {
     "name": "Автоматически привязывать ссылку к слоту ноды",
     "tooltip": "При перетаскивании ссылки над нодой ссылка автоматически привязывается к подходящему входному слоту ноды"
@@ -470,6 +476,7 @@
     "tooltip": "Смещение контрольной точки Безье от центральной точки перераспределения"
   },
   "pysssss_SnapToGrid": {
-    "name": "Всегда привязываться к сетке"
+    "name": "Всегда привязываться к сетке",
+    "tooltip": "Если включено, узлы будут автоматически выравниваться по сетке при перемещении или изменении размера."
   }
 }
diff --git a/src/locales/tr/main.json b/src/locales/tr/main.json
index d4aa99bd0..098339030 100644
--- a/src/locales/tr/main.json
+++ b/src/locales/tr/main.json
@@ -24,6 +24,7 @@
     "assets": "Varlıklar",
     "baseModels": "Temel modeller",
     "browseAssets": "Varlıklara Göz At",
+    "byType": "Türe göre",
     "checkpoints": "Kontrol noktaları",
     "civitaiLinkExample": "{example} {link}",
     "civitaiLinkExampleStrong": "Örnek:",
@@ -45,6 +46,10 @@
       "failed": "İndirme başarısız oldu",
       "inProgress": "{assetName} indiriliyor..."
     },
+    "emptyImported": {
+      "canImport": "Henüz içe aktarılmış model yok. Kendi modelinizi eklemek için \"Model İçe Aktar\"a tıklayın.",
+      "restricted": "Kişisel modeller yalnızca Creator ve üzeri seviyelerde kullanılabilir."
+    },
     "errorFileTooLarge": "Dosya izin verilen maksimum boyut sınırını aşıyor",
     "errorFormatNotAllowed": "Yalnızca SafeTensor formatı destekleniyor",
     "errorModelTypeNotSupported": "Bu model türü desteklenmiyor",
@@ -61,6 +66,7 @@
     "finish": "Bitir",
     "genericLinkPlaceholder": "Bağlantıyı buraya yapıştırın",
     "importAnother": "Başka Birini İçe Aktar",
+    "imported": "İçe aktarıldı",
     "jobId": "İş ID",
     "loadingModels": "{type} yükleniyor...",
     "maxFileSize": "Maksimum dosya boyutu: {size}",
@@ -70,6 +76,30 @@
       "threeDModelPlaceholder": "3D Model"
     },
     "modelAssociatedWithLink": "Sağladığınız bağlantı ile ilişkili model:",
+    "modelInfo": {
+      "addBaseModel": "Taban model ekle...",
+      "addTag": "Etiket ekle...",
+      "additionalTags": "Ek Etiketler",
+      "baseModelUnknown": "Taban model bilinmiyor",
+      "basicInfo": "Temel Bilgiler",
+      "compatibleBaseModels": "Uyumlu Taban Modelleri",
+      "description": "Açıklama",
+      "descriptionNotSet": "Açıklama ayarlanmadı",
+      "descriptionPlaceholder": "Bu model için bir açıklama ekleyin...",
+      "displayName": "Görünen Ad",
+      "editDisplayName": "Görünen Adı Düzenle",
+      "fileName": "Dosya Adı",
+      "modelDescription": "Model Açıklaması",
+      "modelTagging": "Model Etiketleme",
+      "modelType": "Model Türü",
+      "noAdditionalTags": "Ek etiket yok",
+      "selectModelPrompt": "Bilgilerini görmek için bir model seçin",
+      "selectModelType": "Model türü seç...",
+      "source": "Kaynak",
+      "title": "Model Bilgisi",
+      "triggerPhrases": "Tetikleyici İfadeler",
+      "viewOnSource": "{source} üzerinde görüntüle"
+    },
     "modelName": "Model Adı",
     "modelNamePlaceholder": "Bu model için bir ad girin",
     "modelTypeSelectorLabel": "Bu hangi model türü?",
@@ -684,6 +714,7 @@
     "clearAll": "Tümünü temizle",
     "clearFilters": "Filtreleri Temizle",
     "close": "Kapat",
+    "closeDialog": "Diyaloğu kapat",
     "color": "Renk",
     "comfy": "Comfy",
     "comfyOrgLogoAlt": "ComfyOrg Logosu",
@@ -700,6 +731,7 @@
     "control_before_generate": "oluşturmadan önce kontrol et",
     "copied": "Kopyalandı",
     "copy": "Kopyala",
+    "copyAll": "Tümünü Kopyala",
     "copyJobId": "İş Kimliğini Kopyala",
     "copyToClipboard": "Panoya Kopyala",
     "copyURL": "URL'yi Kopyala",
@@ -762,6 +794,8 @@
     "goToNode": "Düğüme Git",
     "graphNavigation": "Grafik gezintisi",
     "halfSpeed": "0.5x",
+    "hideLeftPanel": "Sol paneli gizle",
+    "hideRightPanel": "Sağ paneli gizle",
     "icon": "Simge",
     "imageFailedToLoad": "Görsel yüklenemedi",
     "imagePreview": "Görüntü önizlemesi - Görüntüler arasında gezinmek için ok tuşlarını kullanın",
@@ -803,6 +837,7 @@
     "name": "Ad",
     "newFolder": "Yeni Klasör",
     "next": "İleri",
+    "nightly": "NIGHTLY",
     "no": "Hayır",
     "noAudioRecorded": "Ses kaydedilmedi",
     "noItems": "Öğe yok",
@@ -817,6 +852,7 @@
     "nodeSlotsError": "Düğüm Yuva Hatası",
     "nodeWidgetsError": "Düğüm Widget Hatası",
     "nodes": "Düğümler",
+    "nodesCount": "{count} düğüm | {count} düğüm | {count} düğüm",
     "nodesRunning": "düğüm çalışıyor",
     "none": "Hiçbiri",
     "nothingToCopy": "Kopyalanacak bir şey yok",
@@ -891,7 +927,9 @@
     "selectedFile": "Seçilen dosya",
     "setAsBackground": "Arka Plan Olarak Ayarla",
     "settings": "Ayarlar",
+    "showLeftPanel": "Sol paneli göster",
     "showReport": "Raporu Göster",
+    "showRightPanel": "Sağ paneli göster",
     "singleSelectDropdown": "Tekli seçim açılır menüsü",
     "sort": "Sırala",
     "source": "Kaynak",
@@ -914,6 +952,7 @@
     "updating": "{id} güncelleniyor",
     "upload": "Yükle",
     "usageHint": "Kullanım ipucu",
+    "use": "Kullan",
     "user": "Kullanıcı",
     "versionMismatchWarning": "Sürüm Uyumluluk Uyarısı",
     "versionMismatchWarningMessage": "{warning}: {detail} Güncelleme talimatları için https://docs.comfy.org/installation/update_comfyui#common-update-issues adresini ziyaret edin.",
@@ -921,11 +960,10 @@
     "videoPreview": "Video önizlemesi - Videolar arasında gezinmek için ok tuşlarını kullanın",
     "viewImageOfTotal": "{total} görüntüden {index}. görüntüyü görüntüle",
     "viewVideoOfTotal": "{total} videodan {index}. videoyu görüntüle",
-    "vitePreloadErrorMessage": "Uygulamanın yeni bir sürümü yayınlandı. Yeniden yüklemek ister misiniz?\nEğer yüklemezseniz, uygulamanın bazı bölümleri beklenildiği gibi çalışmayabilir.\nİlerlemenizi kaydettikten sonra yeniden yüklemek için çekinmeyin.",
-    "vitePreloadErrorTitle": "Yeni Sürüm Mevcut",
     "volume": "Ses",
     "warning": "Uyarı",
-    "workflow": "İş Akışı"
+    "workflow": "İş Akışı",
+    "you": "Sen"
   },
   "graphCanvasMenu": {
     "fitView": "Görünüme Sığdır",
@@ -1617,17 +1655,25 @@
       "title": "Bu iş akışında eksik düğümler var"
     }
   },
+  "nightly": {
+    "badge": {
+      "label": "Önizleme Sürümü",
+      "tooltip": "ComfyUI'nin nightly sürümünü kullanıyorsunuz. Lütfen bu özelliklerle ilgili görüşlerinizi paylaşmak için geri bildirim butonunu kullanın."
+    }
+  },
   "nodeCategories": {
     "": "",
     "3d": "3d",
     "3d_models": "3d_modeller",
     "BFL": "BFL",
+    "Bria": "Bria",
     "ByteDance": "ByteDance",
     "Gemini": "Gemini",
     "Ideogram": "Ideogram",
     "Kling": "Kling",
     "LTXV": "LTXV",
     "Luma": "Luma",
+    "Magnific": "Magnific",
     "Meshy": "Meshy",
     "MiniMax": "MiniMax",
     "Moonvalley Marey": "Moonvalley Marey",
@@ -1638,11 +1684,13 @@
     "Runway": "Runway",
     "Sora": "Sora",
     "Stability AI": "Stability AI",
+    "Tencent": "Tencent",
     "Topaz": "Topaz",
     "Tripo": "Tripo",
     "Veo": "Veo",
     "Vidu": "Vidu",
     "Wan": "Wan",
+    "WaveSpeed": "WaveSpeed",
     "_for_testing": "_test_için",
     "advanced": "gelişmiş",
     "animation": "animasyon",
@@ -1852,6 +1900,7 @@
     },
     "groupSettings": "Grup Ayarları",
     "groups": "Gruplar",
+    "hideAdvancedInputsButton": "Gelişmiş girişleri gizle",
     "hideInput": "Girdiyi gizle",
     "info": "Bilgi",
     "inputs": "GİRİŞLER",
@@ -2084,6 +2133,7 @@
     "NodeLibrary": "Düğüm Kütüphanesi",
     "Nodes 2_0": "Nodes 2.0",
     "Notification Preferences": "Bildirim Tercihleri",
+    "Other": "Diğer",
     "PLY": "PLY",
     "PlanCredits": "Plan & Krediler",
     "Pointer": "İşaretçi",
@@ -2103,7 +2153,8 @@
     "Vue Nodes": "Vue Düğümleri",
     "VueNodes": "Vue Düğümleri",
     "Window": "Pencere",
-    "Workflow": "İş Akışı"
+    "Workflow": "İş Akışı",
+    "Workspace": "Çalışma Alanı"
   },
   "shape": {
     "CARD": "Kart",
@@ -2129,12 +2180,14 @@
     "viewControls": "Görünüm Kontrolleri"
   },
   "sideToolbar": {
+    "activeJobStatus": "Aktif iş: {status}",
     "assets": "Varlıklar",
     "backToAssets": "Tüm varlıklara dön",
     "browseTemplates": "Örnek şablonlara göz atın",
     "downloads": "İndirmeler",
     "generatedAssetsHeader": "Oluşturulan varlıklar",
     "helpCenter": "Yardım Merkezi",
+    "importedAssetsHeader": "İçe aktarılan varlıklar",
     "labels": {
       "assets": "Varlıklar",
       "console": "Konsol",
@@ -2179,6 +2232,7 @@
     "queue": "Kuyruk",
     "queueProgressOverlay": {
       "activeJobs": "{count} aktif iş | {count} aktif iş",
+      "activeJobsShort": "{count} aktif | {count} aktif",
       "activeJobsSuffix": "aktif iş",
       "cancelJobTooltip": "İşi iptal et",
       "clearHistory": "İş kuyruğu geçmişini temizle",
@@ -2267,9 +2321,15 @@
     "beta": "BETA",
     "billedMonthly": "Aylık faturalandırılır",
     "billedYearly": "{total} Yıllık faturalandırılır",
+    "billingComingSoon": {
+      "message": "Takım faturalandırması yakında geliyor. Çalışma alanınız için koltuk başına fiyatlandırma ile bir plana abone olabileceksiniz. Güncellemeler için bizi takip edin.",
+      "title": "Yakında"
+    },
+    "cancelSubscription": "Aboneliği İptal Et",
     "changeTo": "{plan} planına geç",
     "comfyCloud": "Comfy Cloud",
     "comfyCloudLogo": "Comfy Cloud Logosu",
+    "contactOwnerToSubscribe": "Abone olmak için çalışma alanı sahibiyle iletişime geçin",
     "contactUs": "Bize ulaşın",
     "creditsRemainingThisMonth": "Bu ay kalan krediler",
     "creditsRemainingThisYear": "Bu yıl kalan krediler",
@@ -2282,6 +2342,7 @@
     "haveQuestions": "Sorularınız mı var veya kurumsal çözüm mü arıyorsunuz?",
     "invoiceHistory": "Fatura geçmişi",
     "learnMore": "Daha fazla bilgi edinin",
+    "managePayment": "Ödemeyi Yönet",
     "managePlan": "Planı yönet",
     "manageSubscription": "Aboneliği yönet",
     "maxDuration": {
@@ -2317,6 +2378,7 @@
     "subscribeToComfyCloud": "Comfy Cloud'a Abone Ol",
     "subscribeToRun": "Abone Ol",
     "subscribeToRunFull": "Çalıştırmaya Abone Ol",
+    "subscriptionRequiredMessage": "Üyelerin Bulut'ta iş akışlarını çalıştırabilmesi için abonelik gereklidir",
     "tierNameYearly": "{name} Yıllık",
     "tiers": {
       "creator": {
@@ -2348,6 +2410,7 @@
     "viewMoreDetails": "Daha fazla detay görüntüle",
     "viewMoreDetailsPlans": "Planlar ve fiyatlandırma hakkında daha fazla detay",
     "viewUsageHistory": "Kullanım geçmişini görüntüle",
+    "workspaceNotSubscribed": "Bu çalışma alanı bir aboneliğe sahip değil",
     "yearly": "Yıllık",
     "yearlyCreditsLabel": "Toplam yıllık krediler",
     "yearlyDiscount": "%20 İNDİRİM",
@@ -2449,6 +2512,7 @@
     "failedToLoadModel": "3B model yüklenemedi",
     "failedToPurchaseCredits": "Kredi satın alınamadı: {error}",
     "failedToQueue": "Kuyruğa alınamadı",
+    "failedToSaveDraft": "Çalışma taslağı kaydedilemedi",
     "failedToToggleCamera": "Kamera açılıp kapatılamadı",
     "failedToToggleGrid": "Izgara açılıp kapatılamadı",
     "failedToUpdateBackgroundColor": "Arka plan rengi güncellenemedi",
@@ -2497,7 +2561,8 @@
     "notSet": "Ayarlanmadı",
     "provider": "Giriş Sağlayıcı",
     "title": "Kullanıcı Ayarları",
-    "updatePassword": "Şifreyi Güncelle"
+    "updatePassword": "Şifreyi Güncelle",
+    "workspaceSettings": "Çalışma alanı ayarları"
   },
   "validation": {
     "descriptionRequired": "Açıklama gerekli",
@@ -2588,6 +2653,9 @@
     "saveWorkflow": "İş akışını kaydet"
   },
   "workspace": {
+    "addedToWorkspace": "{workspaceName} çalışma alanına eklendiniz",
+    "inviteAccepted": "Davet kabul edildi",
+    "inviteFailed": "Davet kabul edilemedi",
     "unsavedChanges": {
       "message": "Kaydedilmemiş değişiklikleriniz var. Bunları iptal edip çalışma alanlarını değiştirmek istiyor musunuz?",
       "title": "Kaydedilmemiş Değişiklikler"
@@ -2602,6 +2670,128 @@
       "workspaceNotFound": "Çalışma alanı bulunamadı"
     }
   },
+  "workspacePanel": {
+    "createWorkspaceDialog": {
+      "create": "Oluştur",
+      "message": "Çalışma alanları, üyelerin tek bir kredi havuzunu paylaşmasını sağlar. Oluşturduktan sonra sahibi olacaksınız.",
+      "nameLabel": "Çalışma alanı adı*",
+      "namePlaceholder": "Çalışma alanı adını girin",
+      "title": "Yeni bir çalışma alanı oluştur"
+    },
+    "dashboard": {
+      "placeholder": "Çalışma alanı kontrol paneli ayarları"
+    },
+    "deleteDialog": {
+      "message": "Kullanılmamış krediler veya kaydedilmemiş varlıklar kaybolacak. Bu işlem geri alınamaz.",
+      "messageWithName": "\"{name}\" silinsin mi? Kullanılmamış krediler veya kaydedilmemiş varlıklar kaybolacak. Bu işlem geri alınamaz.",
+      "title": "Bu çalışma alanı silinsin mi?"
+    },
+    "editWorkspaceDialog": {
+      "nameLabel": "Çalışma alanı adı",
+      "save": "Kaydet",
+      "title": "Çalışma alanı detaylarını düzenle"
+    },
+    "invite": "Davet Et",
+    "inviteLimitReached": "Maksimum 50 üye sınırına ulaştınız",
+    "inviteMember": "Üye Davet Et",
+    "inviteMemberDialog": {
+      "createLink": "Bağlantı oluştur",
+      "linkCopied": "Kopyalandı",
+      "linkCopyFailed": "Bağlantı kopyalanamadı",
+      "linkStep": {
+        "copyLink": "Bağlantıyı Kopyala",
+        "done": "Tamamlandı",
+        "message": "Hesaplarının bu e-posta adresini kullandığından emin olun.",
+        "title": "Bu bağlantıyı kişiye gönderin"
+      },
+      "message": "Birine göndermek için paylaşılabilir bir davet bağlantısı oluştur",
+      "placeholder": "Kişinin e-posta adresini girin",
+      "title": "Bu çalışma alanına birini davet et"
+    },
+    "leaveDialog": {
+      "leave": "Ayrıl",
+      "message": "Çalışma alanı sahibiyle iletişime geçmedikçe tekrar katılamazsınız.",
+      "title": "Bu çalışma alanından ayrılsın mı?"
+    },
+    "members": {
+      "actions": {
+        "copyLink": "Davet bağlantısını kopyala",
+        "removeMember": "Üyeyi kaldır",
+        "revokeInvite": "Daveti geri al"
+      },
+      "columns": {
+        "expiryDate": "Son kullanma tarihi",
+        "inviteDate": "Davet tarihi",
+        "joinDate": "Katılma tarihi"
+      },
+      "createNewWorkspace": "yeni bir tane oluşturun.",
+      "membersCount": "{count}/50 Üye",
+      "noInvites": "Bekleyen davet yok",
+      "noMembers": "Üye yok",
+      "pendingInvitesCount": "{count} bekleyen davet | {count} bekleyen davet",
+      "personalWorkspaceMessage": "Şu anda kişisel çalışma alanınıza başka üyeler davet edemezsiniz. Bir çalışma alanına üye eklemek için,",
+      "tabs": {
+        "active": "Aktif",
+        "pendingCount": "Bekliyor ({count})"
+      }
+    },
+    "menu": {
+      "deleteWorkspace": "Çalışma Alanını Sil",
+      "deleteWorkspaceDisabledTooltip": "Önce çalışma alanınızın aktif aboneliğini iptal edin",
+      "editWorkspace": "Çalışma alanı detaylarını düzenle",
+      "leaveWorkspace": "Çalışma Alanından Ayrıl"
+    },
+    "removeMemberDialog": {
+      "error": "Üye kaldırılamadı",
+      "message": "Bu üye çalışma alanınızdan kaldırılacak. Kullandıkları krediler iade edilmeyecek.",
+      "remove": "Üyeyi kaldır",
+      "success": "Üye kaldırıldı",
+      "title": "Bu üye kaldırılsın mı?"
+    },
+    "revokeInviteDialog": {
+      "message": "Bu üye artık çalışma alanınıza katılamayacak. Davet bağlantısı geçersiz olacak.",
+      "revoke": "Davet Etme",
+      "title": "Bu kişiyi davet etme?"
+    },
+    "tabs": {
+      "dashboard": "Kontrol Paneli",
+      "membersCount": "Üyeler ({count})",
+      "planCredits": "Plan & Kredi"
+    },
+    "toast": {
+      "failedToCreateWorkspace": "Çalışma alanı oluşturulamadı",
+      "failedToDeleteWorkspace": "Çalışma alanı silinemedi",
+      "failedToFetchWorkspaces": "Çalışma alanları yüklenemedi",
+      "failedToLeaveWorkspace": "Çalışma alanından ayrılamadı",
+      "failedToUpdateWorkspace": "Çalışma alanı güncellenemedi",
+      "workspaceCreated": {
+        "message": "Bir plana abone olun, ekip arkadaşlarınızı davet edin ve iş birliğine başlayın.",
+        "subscribe": "Abone Ol",
+        "title": "Çalışma alanı oluşturuldu"
+      },
+      "workspaceDeleted": {
+        "message": "Çalışma alanı kalıcı olarak silindi.",
+        "title": "Çalışma alanı silindi"
+      },
+      "workspaceLeft": {
+        "message": "Çalışma alanından ayrıldınız.",
+        "title": "Çalışma alanından ayrıldınız"
+      },
+      "workspaceUpdated": {
+        "message": "Çalışma alanı detayları kaydedildi.",
+        "title": "Çalışma alanı güncellendi"
+      }
+    }
+  },
+  "workspaceSwitcher": {
+    "createWorkspace": "Yeni çalışma alanı oluştur",
+    "maxWorkspacesReached": "Yalnızca 10 çalışma alanına sahip olabilirsiniz. Yeni bir tane oluşturmak için birini silin.",
+    "personal": "Kişisel",
+    "roleMember": "Üye",
+    "roleOwner": "Sahip",
+    "subscribe": "Abone Ol",
+    "switchWorkspace": "Çalışma alanı değiştir"
+  },
   "zoomControls": {
     "hideMinimap": "Mini Haritayı Gizle",
     "label": "Yakınlaştırma Kontrolleri",
diff --git a/src/locales/tr/nodeDefs.json b/src/locales/tr/nodeDefs.json
index 46abd7112..9a33a44a3 100644
--- a/src/locales/tr/nodeDefs.json
+++ b/src/locales/tr/nodeDefs.json
@@ -328,6 +328,68 @@
       }
     }
   },
+  "BriaImageEditNode": {
+    "description": "Bria'nın en son modeliyle görüntüleri düzenleyin",
+    "display_name": "Bria Görüntü Düzenleme",
+    "inputs": {
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol"
+      },
+      "guidance_scale": {
+        "name": "yönlendirme_ölçeği",
+        "tooltip": "Daha yüksek değer, görüntünün isteme daha yakın olmasını sağlar."
+      },
+      "image": {
+        "name": "görüntü"
+      },
+      "mask": {
+        "name": "maske",
+        "tooltip": "Atlanırsa, düzenleme tüm görüntüye uygulanır."
+      },
+      "model": {
+        "name": "model"
+      },
+      "moderation": {
+        "name": "denetleme",
+        "tooltip": "Denetleme ayarları"
+      },
+      "moderation_prompt_content_moderation": {
+        "name": "istem_içeriği_denetleme"
+      },
+      "moderation_visual_input_moderation": {
+        "name": "görsel_girdi_denetleme"
+      },
+      "moderation_visual_output_moderation": {
+        "name": "görsel_çıktı_denetleme"
+      },
+      "negative_prompt": {
+        "name": "negatif_istem"
+      },
+      "prompt": {
+        "name": "istem",
+        "tooltip": "Görüntüyü düzenlemek için talimat"
+      },
+      "seed": {
+        "name": "tohum"
+      },
+      "steps": {
+        "name": "adımlar"
+      },
+      "structured_prompt": {
+        "name": "yapılandırılmış_istem",
+        "tooltip": "JSON formatında yapılandırılmış düzenleme istemi içeren bir dize. Hassas ve programatik kontrol için normal istem yerine bunu kullanın."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      },
+      "1": {
+        "name": "yapılandırılmış_istem",
+        "tooltip": null
+      }
+    }
+  },
   "ByteDanceFirstLastFrameNode": {
     "description": "İlk ve son kareleri kullanarak video oluşturun.",
     "display_name": "ByteDance İlk-Son-Kare'den Videoya",
@@ -385,43 +447,6 @@
       }
     }
   },
-  "ByteDanceImageEditNode": {
-    "description": "İstek üzerine api aracılığıyla ByteDance modellerini kullanarak görüntüleri düzenleyin",
-    "display_name": "ByteDance Görüntü Düzenleme",
-    "inputs": {
-      "control_after_generate": {
-        "name": "oluşturma sonrası kontrol"
-      },
-      "guidance_scale": {
-        "name": "rehberlik_ölçeği",
-        "tooltip": "Daha yüksek değer, görüntünün isteği daha yakından takip etmesini sağlar"
-      },
-      "image": {
-        "name": "görüntü",
-        "tooltip": "Düzenlenecek temel görüntü"
-      },
-      "model": {
-        "name": "model"
-      },
-      "prompt": {
-        "name": "istek",
-        "tooltip": "Görüntüyü düzenleme talimatı"
-      },
-      "seed": {
-        "name": "tohum",
-        "tooltip": "Oluşturma için kullanılacak tohum değeri"
-      },
-      "watermark": {
-        "name": "filigran",
-        "tooltip": "Görüntüye \"Yapay zeka tarafından oluşturulmuştur\" filigranı eklenip eklenmeyeceği"
-      }
-    },
-    "outputs": {
-      "0": {
-        "tooltip": null
-      }
-    }
-  },
   "ByteDanceImageNode": {
     "description": "İstek üzerine api aracılığıyla ByteDance modellerini kullanarak görüntüler oluşturun",
     "display_name": "ByteDance Görüntü",
@@ -2031,14 +2056,18 @@
       "choice": {
         "name": "seçim"
       },
-      "option0": {
+      "index": {
+      },
+      "option1": {
       }
     },
-    "outputs": {
-      "0": {
+    "outputs": [
+      null,
+      {
+        "name": "INDEX",
         "tooltip": null
       }
-    }
+    ]
   },
   "DiffControlNetLoader": {
     "display_name": "ControlNet Modelini Yükle (fark)",
@@ -6390,6 +6419,60 @@
       }
     }
   },
+  "LoraLoaderBypass": {
+    "description": "LoRA'yı bypass modunda uygula. Normal LoRA'dan farklı olarak, model ağırlıklarını değiştirmez - bunun yerine LoRA hesaplamasını ileri geçiş sırasında enjekte eder. Eğitim senaryoları için kullanışlıdır.",
+    "display_name": "LoRA Yükle (Bypass) (Hata Ayıklama İçin)",
+    "inputs": {
+      "clip": {
+        "name": "clip",
+        "tooltip": "LoRA'nın uygulanacağı CLIP modeli."
+      },
+      "lora_name": {
+        "name": "lora_name",
+        "tooltip": "LoRA'nın adı."
+      },
+      "model": {
+        "name": "model",
+        "tooltip": "LoRA'nın uygulanacağı difüzyon modeli."
+      },
+      "strength_clip": {
+        "name": "strength_clip",
+        "tooltip": "CLIP modelini ne kadar güçlü değiştireceği. Bu değer negatif olabilir."
+      },
+      "strength_model": {
+        "name": "strength_model",
+        "tooltip": "Difüzyon modelini ne kadar güçlü değiştireceği. Bu değer negatif olabilir."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": "Değiştirilmiş difüzyon modeli."
+      },
+      "1": {
+        "tooltip": "Değiştirilmiş CLIP modeli."
+      }
+    }
+  },
+  "LoraLoaderBypassModelOnly": {
+    "description": "LoRA'yı bypass modunda uygula. Normal LoRA'dan farklı olarak, model ağırlıklarını değiştirmez - bunun yerine LoRA hesaplamasını ileri geçiş sırasında enjekte eder. Eğitim senaryoları için kullanışlıdır.",
+    "display_name": "LoRA Yükle (Bypass, Sadece Model) (Hata Ayıklama İçin)",
+    "inputs": {
+      "lora_name": {
+        "name": "lora_name"
+      },
+      "model": {
+        "name": "model"
+      },
+      "strength_model": {
+        "name": "strength_model"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": "Değiştirilmiş difüzyon modeli."
+      }
+    }
+  },
   "LoraLoaderModelOnly": {
     "description": "LoRA'lar, difüzyon ve CLIP modellerini değiştirmek, gizli değişkenlerin gürültüsünün giderilme şeklini değiştirmek (örneğin stiller uygulamak) için kullanılır. Birden fazla LoRA düğümü birbirine bağlanabilir.",
     "display_name": "SadeceModelLoRA Yükleyici",
@@ -6757,6 +6840,126 @@
       }
     }
   },
+  "MagnificImageRelightNode": {
+    "description": "Bir görseli ışık ayarlarıyla ve isteğe bağlı referans tabanlı ışık transferiyle yeniden ışıklandır.",
+    "display_name": "Magnific Görsel Yeniden Işıklandırma",
+    "inputs": {
+      "advanced_settings": {
+        "name": "advanced_settings",
+        "tooltip": "Gelişmiş ışık kontrolü için ince ayar seçenekleri."
+      },
+      "change_background": {
+        "name": "change_background",
+        "tooltip": "Arka planı prompt/referansa göre değiştirir."
+      },
+      "image": {
+        "name": "image",
+        "tooltip": "Yeniden ışıklandırılacak görsel."
+      },
+      "interpolate_from_original": {
+        "name": "interpolate_from_original",
+        "tooltip": "Oluşturulan görselin orijinale daha yakın olmasını sınırlar."
+      },
+      "light_transfer_strength": {
+        "name": "light_transfer_strength",
+        "tooltip": "Işık transferi uygulama yoğunluğu."
+      },
+      "preserve_details": {
+        "name": "preserve_details",
+        "tooltip": "Orijinalden doku ve ince detayları korur."
+      },
+      "prompt": {
+        "name": "prompt",
+        "tooltip": "Işıklandırma için açıklayıcı rehberlik. Vurgu notasyonu (1-1.4) desteklenir."
+      },
+      "reference_image": {
+        "name": "reference_image",
+        "tooltip": "Işıklandırmanın aktarılacağı isteğe bağlı referans görsel."
+      },
+      "style": {
+        "name": "style",
+        "tooltip": "Çıktı için stil tercihi."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "MagnificImageSkinEnhancerNode": {
+    "description": "Portreler için çoklu işleme modlarıyla cilt iyileştirme.",
+    "display_name": "Magnific Görsel Cilt İyileştirici",
+    "inputs": {
+      "image": {
+        "name": "image",
+        "tooltip": "İyileştirilecek portre görseli."
+      },
+      "mode": {
+        "name": "mode",
+        "tooltip": "İşleme modu: Sanatsal iyileştirme için yaratıcı, orijinal görünümü korumak için sadık, hedefli optimizasyon için esnek."
+      },
+      "sharpen": {
+        "name": "sharpen",
+        "tooltip": "Keskinleştirme yoğunluk seviyesi."
+      },
+      "smart_grain": {
+        "name": "smart_grain",
+        "tooltip": "Akıllı gren yoğunluk seviyesi."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "MagnificImageStyleTransferNode": {
+    "description": "Bir referans görüntüsünün stilini giriş görüntünüze aktarın.",
+    "display_name": "Magnific Görüntü Stil Transferi",
+    "inputs": {
+      "engine": {
+        "name": "engine",
+        "tooltip": "İşleme motoru seçimi."
+      },
+      "fixed_generation": {
+        "name": "fixed_generation",
+        "tooltip": "Devre dışı bırakıldığında, her üretimde bir miktar rastgelelik beklenir ve bu da daha çeşitli sonuçlar elde edilmesini sağlar."
+      },
+      "flavor": {
+        "name": "flavor",
+        "tooltip": "Stil transferi türü."
+      },
+      "image": {
+        "name": "image",
+        "tooltip": "Stil transferinin uygulanacağı görüntü."
+      },
+      "portrait_mode": {
+        "name": "portrait_mode",
+        "tooltip": "Yüz iyileştirmeleri için portre modunu etkinleştir."
+      },
+      "prompt": {
+        "name": "prompt"
+      },
+      "reference_image": {
+        "name": "reference_image",
+        "tooltip": "Stilinin çıkarılacağı referans görüntü."
+      },
+      "structure_strength": {
+        "name": "structure_strength",
+        "tooltip": "Orijinal görüntünün yapısını korur."
+      },
+      "style_strength": {
+        "name": "style_strength",
+        "tooltip": "Stil gücü yüzdesi."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "Mahiro": {
     "description": "Rehberliği, negatif istem arasındaki farktan ziyade pozitif istemin 'yönüne' daha fazla ölçeklenecek şekilde değiştirin.",
     "display_name": "Mahiro o kadar sevimli ki daha iyi bir rehberlik fonksiyonunu hak ediyor!! (。・ω・。)",
@@ -11209,19 +11412,28 @@
     }
   },
   "ResizeImageMaskNode": {
+    "description": "Bir görüntüyü veya maskeyi çeşitli ölçeklendirme yöntemleriyle yeniden boyutlandırın.",
     "display_name": "Görsel/Maske Yeniden Boyutlandır",
     "inputs": {
       "input": {
         "name": "input"
       },
       "resize_type": {
-        "name": "resize_type"
+        "name": "resize_type",
+        "tooltip": "Yeniden boyutlandırma yöntemini seçin: tam boyutlar, ölçek faktörü, başka bir görüntüyle eşleştirme vb."
       },
-      "resize_type_multiplier": {
-        "name": "multiplier"
+      "resize_type_crop": {
+        "name": "kırp"
+      },
+      "resize_type_height": {
+        "name": "yükseklik"
+      },
+      "resize_type_width": {
+        "name": "genişlik"
       },
       "scale_method": {
-        "name": "scale_method"
+        "name": "scale_method",
+        "tooltip": "Enterpolasyon algoritması. 'area' küçültme için en iyisidir, 'lanczos' büyütme için uygundur, 'nearest-exact' piksel sanatı için idealdir."
       }
     },
     "outputs": {
@@ -13355,6 +13567,84 @@
       }
     }
   },
+  "TencentImageToModelNode": {
+    "display_name": "Hunyuan3D: Görsel(ler)den Modele (Pro)",
+    "inputs": {
+      "control_after_generate": {
+        "name": "oluşturma sonrası kontrol"
+      },
+      "face_count": {
+        "name": "yüz sayısı"
+      },
+      "generate_type": {
+        "name": "oluşturma türü"
+      },
+      "generate_type_pbr": {
+        "name": "pbr"
+      },
+      "image": {
+        "name": "görsel"
+      },
+      "image_back": {
+        "name": "arka görsel"
+      },
+      "image_left": {
+        "name": "sol görsel"
+      },
+      "image_right": {
+        "name": "sağ görsel"
+      },
+      "model": {
+        "name": "model",
+        "tooltip": "`3.1` modeli için LowPoly seçeneği kullanılamaz."
+      },
+      "seed": {
+        "name": "tohum",
+        "tooltip": "Tohum, düğümün tekrar çalıştırılıp çalıştırılmayacağını kontrol eder; sonuçlar tohumdan bağımsız olarak deterministik değildir."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "model_dosyası",
+        "tooltip": null
+      }
+    }
+  },
+  "TencentTextToModelNode": {
+    "display_name": "Hunyuan3D: Metinden Modele (Pro)",
+    "inputs": {
+      "control_after_generate": {
+        "name": "oluşturma sonrası kontrol"
+      },
+      "face_count": {
+        "name": "yüz sayısı"
+      },
+      "generate_type": {
+        "name": "oluşturma türü"
+      },
+      "generate_type_pbr": {
+        "name": "pbr"
+      },
+      "model": {
+        "name": "model",
+        "tooltip": "`3.1` modeli için LowPoly seçeneği kullanılamaz."
+      },
+      "prompt": {
+        "name": "istem",
+        "tooltip": "En fazla 1024 karakter desteklenir."
+      },
+      "seed": {
+        "name": "tohum",
+        "tooltip": "Tohum, düğümün tekrar çalıştırılıp çalıştırılmayacağını kontrol eder; sonuçlar tohumdan bağımsız olarak deterministik değildir."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "model_dosyası",
+        "tooltip": null
+      }
+    }
+  },
   "TextEncodeAceStepAudio": {
     "display_name": "TextEncodeAceStepAudio",
     "inputs": {
@@ -13450,6 +13740,40 @@
       }
     }
   },
+  "TextEncodeZImageOmni": {
+    "display_name": "TextEncodeZImageOmni",
+    "inputs": {
+      "auto_resize_images": {
+        "name": "görüntüleri_otomatik_yeniden_boyutlandır"
+      },
+      "clip": {
+        "name": "clip"
+      },
+      "image1": {
+        "name": "görüntü1"
+      },
+      "image2": {
+        "name": "görüntü2"
+      },
+      "image3": {
+        "name": "görüntü3"
+      },
+      "image_encoder": {
+        "name": "görüntü_kodlayıcı"
+      },
+      "prompt": {
+        "name": "istem"
+      },
+      "vae": {
+        "name": "vae"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "TextToLowercase": {
     "display_name": "Metni Küçük Harfe Çevir",
     "inputs": {
@@ -13655,6 +13979,10 @@
         "name": "bucket_mode",
         "tooltip": "Çözünürlük kova modunu etkinleştir. Etkinleştirildiğinde, ResolutionBucket düğümünden önceden kovalanmış latentler beklenir."
       },
+      "bypass_mode": {
+        "name": "bypass_mode",
+        "tooltip": "Eğitim için bypass modunu etkinleştir. Etkinleştirildiğinde, adapter'lar ağırlık değişikliği yerine forward hook'lar ile uygulanır. Ağırlıkların doğrudan değiştirilemediği quantized modeller için kullanışlıdır."
+      },
       "control_after_generate": {
         "name": "oluşturduktan sonra kontrol et"
       },
@@ -15621,6 +15949,79 @@
       }
     }
   },
+  "WanInfiniteTalkToVideo": {
+    "display_name": "WanInfiniteTalkToVideo",
+    "inputs": {
+      "audio_encoder_output_1": {
+        "name": "audio_encoder_output_1"
+      },
+      "audio_scale": {
+        "name": "audio_scale"
+      },
+      "clip_vision_output": {
+        "name": "clip_vision_output"
+      },
+      "height": {
+        "name": "yükseklik"
+      },
+      "length": {
+        "name": "uzunluk"
+      },
+      "mode": {
+        "name": "mod"
+      },
+      "model": {
+        "name": "model"
+      },
+      "model_patch": {
+        "name": "model_patch"
+      },
+      "motion_frame_count": {
+        "name": "hareket_kare_sayısı",
+        "tooltip": "Hareket bağlamı olarak kullanılacak önceki karelerin sayısı."
+      },
+      "negative": {
+        "name": "negatif"
+      },
+      "positive": {
+        "name": "pozitif"
+      },
+      "previous_frames": {
+        "name": "önceki_kareler"
+      },
+      "start_image": {
+        "name": "başlangıç_görseli"
+      },
+      "vae": {
+        "name": "vae"
+      },
+      "width": {
+        "name": "genişlik"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "model",
+        "tooltip": null
+      },
+      "1": {
+        "name": "pozitif",
+        "tooltip": null
+      },
+      "2": {
+        "name": "negatif",
+        "tooltip": null
+      },
+      "3": {
+        "name": "latent",
+        "tooltip": null
+      },
+      "4": {
+        "name": "kırpılmış_görsel",
+        "tooltip": null
+      }
+    }
+  },
   "WanMoveConcatTrack": {
     "display_name": "WanMoveConcatTrack",
     "inputs": {
@@ -16137,6 +16538,43 @@
       }
     }
   },
+  "WavespeedFlashVSRNode": {
+    "description": "Düşük çözünürlüklü veya bulanık videolar için hızlı, yüksek kaliteli video yükseltici; çözünürlüğü artırır ve netliği geri kazandırır.",
+    "display_name": "FlashVSR Video Yükseltme",
+    "inputs": {
+      "target_resolution": {
+        "name": "hedef_çözünürlük"
+      },
+      "video": {
+        "name": "video"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "WavespeedImageUpscaleNode": {
+    "description": "Görüntü çözünürlüğünü ve kalitesini artırın, fotoğrafları keskin ve ayrıntılı sonuçlar için 4K veya 8K'ya yükseltin.",
+    "display_name": "WaveSpeed Görüntü Yükseltme",
+    "inputs": {
+      "image": {
+        "name": "görüntü"
+      },
+      "model": {
+        "name": "model"
+      },
+      "target_resolution": {
+        "name": "hedef_çözünürlük"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "WebcamCapture": {
     "display_name": "Webcam Yakalama",
     "inputs": {
diff --git a/src/locales/tr/settings.json b/src/locales/tr/settings.json
index 6d24897f4..756dc8d51 100644
--- a/src/locales/tr/settings.json
+++ b/src/locales/tr/settings.json
@@ -52,7 +52,8 @@
     }
   },
   "Comfy_Canvas_SelectionToolbox": {
-    "name": "Seçim araç kutusunu göster"
+    "name": "Seçim araç kutusunu göster",
+    "tooltip": "Düğümler seçildiğinde, yaygın işlemlere hızlı erişim sağlayan bir araç çubuğu gösterir."
   },
   "Comfy_ConfirmClear": {
     "name": "İş akışını temizlerken onay iste"
@@ -147,7 +148,8 @@
       "Linear": "Doğrusal",
       "Spline": "Eğri",
       "Straight": "Düz"
-    }
+    },
+    "tooltip": "Tuvaldeki düğümler arasındaki bağlantı çizgilerinin görünümünü ve görünürlüğünü kontrol eder."
   },
   "Comfy_Load3D_3DViewerEnable": {
     "name": "3D Görüntüleyiciyi Etkinleştir (Beta)",
@@ -272,6 +274,10 @@
   "Comfy_Node_AllowImageSizeDraw": {
     "name": "Görüntü önizlemesinin altında genişlik × yüksekliği göster"
   },
+  "Comfy_Node_AlwaysShowAdvancedWidgets": {
+    "name": "Tüm düğümlerde gelişmiş araçları her zaman göster",
+    "tooltip": "Etkinleştirildiğinde, gelişmiş araçlar tüm düğümlerde ayrı ayrı genişletmeye gerek kalmadan her zaman görünür olur."
+  },
   "Comfy_Node_AutoSnapLinkToSlot": {
     "name": "Bağlantıyı otomatik olarak düğüm yuvasına yapıştır",
     "tooltip": "Bir bağlantıyı bir düğümün üzerine sürüklerken, bağlantı otomatik olarak düğüm üzerindeki uygun bir giriş yuvasına yapışır"
@@ -470,6 +476,7 @@
     "tooltip": "Yeniden yönlendirme merkez noktasından bezier kontrol noktası ofseti"
   },
   "pysssss_SnapToGrid": {
-    "name": "Her zaman ızgaraya yapıştır"
+    "name": "Her zaman ızgaraya yapıştır",
+    "tooltip": "Etkinleştirildiğinde, düğümler taşındığında veya yeniden boyutlandırıldığında otomatik olarak ızgaraya hizalanır."
   }
 }
diff --git a/src/locales/zh-TW/main.json b/src/locales/zh-TW/main.json
index 84bcf62b6..97c21a1f9 100644
--- a/src/locales/zh-TW/main.json
+++ b/src/locales/zh-TW/main.json
@@ -24,6 +24,7 @@
     "assets": "資產",
     "baseModels": "基礎模型",
     "browseAssets": "瀏覽資產",
+    "byType": "依類型",
     "checkpoints": "Checkpoints",
     "civitaiLinkExample": "{example} {link}",
     "civitaiLinkExampleStrong": "範例：",
@@ -45,6 +46,10 @@
       "failed": "下載失敗",
       "inProgress": "正在下載 {assetName}..."
     },
+    "emptyImported": {
+      "canImport": "尚未匯入模型。點擊「匯入模型」以新增您的模型。",
+      "restricted": "個人模型僅限 Creator 方案及以上等級使用。"
+    },
     "errorFileTooLarge": "檔案超過允許的最大大小限制",
     "errorFormatNotAllowed": "僅允許 SafeTensor 格式",
     "errorModelTypeNotSupported": "不支援此模型類型",
@@ -61,6 +66,7 @@
     "finish": "完成",
     "genericLinkPlaceholder": "請在此貼上連結",
     "importAnother": "匯入其他",
+    "imported": "已匯入",
     "jobId": "工作 ID",
     "loadingModels": "正在載入 {type}...",
     "maxFileSize": "最大檔案大小：{size}",
@@ -70,6 +76,30 @@
       "threeDModelPlaceholder": "3D 模型"
     },
     "modelAssociatedWithLink": "您提供的連結所對應的模型：",
+    "modelInfo": {
+      "addBaseModel": "新增基礎模型...",
+      "addTag": "新增標籤...",
+      "additionalTags": "其他標籤",
+      "baseModelUnknown": "基礎模型未知",
+      "basicInfo": "基本資訊",
+      "compatibleBaseModels": "相容基礎模型",
+      "description": "描述",
+      "descriptionNotSet": "尚未設定描述",
+      "descriptionPlaceholder": "為此模型新增描述...",
+      "displayName": "顯示名稱",
+      "editDisplayName": "編輯顯示名稱",
+      "fileName": "檔案名稱",
+      "modelDescription": "模型描述",
+      "modelTagging": "模型標籤",
+      "modelType": "模型類型",
+      "noAdditionalTags": "沒有其他標籤",
+      "selectModelPrompt": "選擇模型以查看其資訊",
+      "selectModelType": "選擇模型類型...",
+      "source": "來源",
+      "title": "模型資訊",
+      "triggerPhrases": "觸發詞",
+      "viewOnSource": "在 {source} 上檢視"
+    },
     "modelName": "模型名稱",
     "modelNamePlaceholder": "請輸入此模型的名稱",
     "modelTypeSelectorLabel": "這是什麼類型的模型？",
@@ -684,6 +714,7 @@
     "clearAll": "全部清除",
     "clearFilters": "清除篩選",
     "close": "關閉",
+    "closeDialog": "關閉對話框",
     "color": "顏色",
     "comfy": "Comfy",
     "comfyOrgLogoAlt": "ComfyOrg 標誌",
@@ -700,6 +731,7 @@
     "control_before_generate": "生成前控制",
     "copied": "已複製",
     "copy": "複製",
+    "copyAll": "全部複製",
     "copyJobId": "複製工作 ID",
     "copyToClipboard": "複製到剪貼簿",
     "copyURL": "複製網址",
@@ -762,6 +794,8 @@
     "goToNode": "前往節點",
     "graphNavigation": "圖形導覽",
     "halfSpeed": "0.5倍速",
+    "hideLeftPanel": "隱藏左側面板",
+    "hideRightPanel": "隱藏右側面板",
     "icon": "圖示",
     "imageFailedToLoad": "無法載入圖片",
     "imagePreview": "圖片預覽 - 使用方向鍵在圖片間導航",
@@ -803,6 +837,7 @@
     "name": "名稱",
     "newFolder": "新資料夾",
     "next": "下一步",
+    "nightly": "NIGHTLY",
     "no": "否",
     "noAudioRecorded": "沒有錄製到音訊",
     "noItems": "沒有項目",
@@ -817,6 +852,7 @@
     "nodeSlotsError": "節點插槽錯誤",
     "nodeWidgetsError": "節點小工具錯誤",
     "nodes": "節點",
+    "nodesCount": "{count} 個節點 | {count} 個節點 | {count} 個節點",
     "nodesRunning": "節點執行中",
     "none": "無",
     "nothingToCopy": "沒有可複製的項目",
@@ -891,7 +927,9 @@
     "selectedFile": "已選取的檔案",
     "setAsBackground": "設為背景",
     "settings": "設定",
+    "showLeftPanel": "顯示左側面板",
     "showReport": "顯示報告",
+    "showRightPanel": "顯示右側面板",
     "singleSelectDropdown": "單選下拉式選單",
     "sort": "排序",
     "source": "來源",
@@ -914,6 +952,7 @@
     "updating": "更新中",
     "upload": "上傳",
     "usageHint": "使用提示",
+    "use": "使用",
     "user": "使用者",
     "versionMismatchWarning": "版本相容性警告",
     "versionMismatchWarningMessage": "{warning}：{detail} 請參閱 https://docs.comfy.org/installation/update_comfyui#common-update-issues 以取得更新說明。",
@@ -921,11 +960,10 @@
     "videoPreview": "影片預覽 - 使用方向鍵在影片間導航",
     "viewImageOfTotal": "檢視第 {index} 張圖片（共 {total} 張）",
     "viewVideoOfTotal": "檢視第 {index} 個影片（共 {total} 個）",
-    "vitePreloadErrorMessage": "應用程式的新版本已發佈。您要重新載入嗎？\n如果不重新載入，應用程式的某些部分可能無法正常運作。\n您可以拒絕並先儲存進度，稍後再重新載入。",
-    "vitePreloadErrorTitle": "新版本可用",
     "volume": "音量",
     "warning": "警告",
-    "workflow": "工作流程"
+    "workflow": "工作流程",
+    "you": "你"
   },
   "graphCanvasMenu": {
     "fitView": "適合視窗",
@@ -1617,17 +1655,25 @@
       "title": "此工作流程有缺少的節點"
     }
   },
+  "nightly": {
+    "badge": {
+      "label": "預覽版本",
+      "tooltip": "您正在使用 ComfyUI 的夜間版本。請使用反饋按鈕分享您對這些功能的看法。"
+    }
+  },
   "nodeCategories": {
     "": "",
     "3d": "3D",
     "3d_models": "3D 模型",
     "BFL": "BFL",
+    "Bria": "Bria",
     "ByteDance": "字節跳動",
     "Gemini": "雙子星",
     "Ideogram": "Ideogram",
     "Kling": "Kling",
     "LTXV": "LTXV",
     "Luma": "Luma",
+    "Magnific": "Magnific",
     "Meshy": "Meshy",
     "MiniMax": "MiniMax",
     "Moonvalley Marey": "月谷馬雷",
@@ -1638,11 +1684,13 @@
     "Runway": "跑道",
     "Sora": "蒼穹",
     "Stability AI": "Stability AI",
+    "Tencent": "Tencent",
     "Topaz": "Topaz",
     "Tripo": "三重奏",
     "Veo": "Veo",
     "Vidu": "維度",
     "Wan": "Wan",
+    "WaveSpeed": "WaveSpeed",
     "_for_testing": "_for_testing",
     "advanced": "進階",
     "animation": "動畫",
@@ -1852,6 +1900,7 @@
     },
     "groupSettings": "群組設定",
     "groups": "群組",
+    "hideAdvancedInputsButton": "隱藏進階輸入",
     "hideInput": "隱藏輸入",
     "info": "資訊",
     "inputs": "輸入",
@@ -2084,6 +2133,7 @@
     "NodeLibrary": "節點庫",
     "Nodes 2_0": "Nodes 2.0",
     "Notification Preferences": "通知偏好設定",
+    "Other": "其他",
     "PLY": "PLY",
     "PlanCredits": "方案與點數",
     "Pointer": "指標",
@@ -2103,7 +2153,8 @@
     "Vue Nodes": "Vue 節點",
     "VueNodes": "Vue 節點",
     "Window": "視窗",
-    "Workflow": "工作流程"
+    "Workflow": "工作流程",
+    "Workspace": "工作區"
   },
   "shape": {
     "CARD": "卡片",
@@ -2129,12 +2180,14 @@
     "viewControls": "檢視控制"
   },
   "sideToolbar": {
+    "activeJobStatus": "進行中作業：{status}",
     "assets": "資源",
     "backToAssets": "返回所有資源",
     "browseTemplates": "瀏覽範例模板",
     "downloads": "下載",
     "generatedAssetsHeader": "已產生資產",
     "helpCenter": "說明中心",
+    "importedAssetsHeader": "已匯入資產",
     "labels": {
       "assets": "資源",
       "console": "控制台",
@@ -2179,6 +2232,7 @@
     "queue": "佇列",
     "queueProgressOverlay": {
       "activeJobs": "{count} 個執行中作業",
+      "activeJobsShort": "{count} 個進行中",
       "activeJobsSuffix": "執行中作業",
       "cancelJobTooltip": "取消作業",
       "clearHistory": "清除作業佇列歷史",
@@ -2267,9 +2321,15 @@
     "beta": "測試版",
     "billedMonthly": "每月收費",
     "billedYearly": "每年收費 {total}",
+    "billingComingSoon": {
+      "message": "團隊計費功能即將推出。屆時你可以為你的工作區訂閱方案，並依照每位成員計價。請持續關注最新消息。",
+      "title": "即將推出"
+    },
+    "cancelSubscription": "取消訂閱",
     "changeTo": "切換至 {plan}",
     "comfyCloud": "Comfy Cloud",
     "comfyCloudLogo": "Comfy Cloud 標誌",
+    "contactOwnerToSubscribe": "請聯絡工作區擁有者以訂閱",
     "contactUs": "聯絡我們",
     "creditsRemainingThisMonth": "本月剩餘點數",
     "creditsRemainingThisYear": "本年剩餘點數",
@@ -2282,6 +2342,7 @@
     "haveQuestions": "有疑問或想了解企業方案？",
     "invoiceHistory": "發票記錄",
     "learnMore": "了解更多",
+    "managePayment": "管理付款",
     "managePlan": "管理方案",
     "manageSubscription": "管理訂閱",
     "maxDuration": {
@@ -2317,6 +2378,7 @@
     "subscribeToComfyCloud": "訂閱 Comfy Cloud",
     "subscribeToRun": "訂閱",
     "subscribeToRunFull": "訂閱運行方案",
+    "subscriptionRequiredMessage": "會員需訂閱才能在雲端執行工作流程",
     "tierNameYearly": "{name} 年度方案",
     "tiers": {
       "creator": {
@@ -2348,6 +2410,7 @@
     "viewMoreDetails": "查看更多詳情",
     "viewMoreDetailsPlans": "查看更多方案與價格細節",
     "viewUsageHistory": "檢視使用記錄",
+    "workspaceNotSubscribed": "此工作區尚未訂閱",
     "yearly": "每年",
     "yearlyCreditsLabel": "年度總點數",
     "yearlyDiscount": "八折優惠",
@@ -2449,6 +2512,7 @@
     "failedToLoadModel": "無法載入 3D 模型",
     "failedToPurchaseCredits": "購買點數失敗：{error}",
     "failedToQueue": "加入佇列失敗",
+    "failedToSaveDraft": "無法儲存工作流程草稿",
     "failedToToggleCamera": "切換相機失敗",
     "failedToToggleGrid": "切換格線失敗",
     "failedToUpdateBackgroundColor": "更新背景顏色失敗",
@@ -2497,7 +2561,8 @@
     "notSet": "未設定",
     "provider": "登入提供者",
     "title": "使用者設定",
-    "updatePassword": "更新密碼"
+    "updatePassword": "更新密碼",
+    "workspaceSettings": "工作區設定"
   },
   "validation": {
     "descriptionRequired": "說明為必填項目",
@@ -2588,6 +2653,9 @@
     "saveWorkflow": "儲存工作流程"
   },
   "workspace": {
+    "addedToWorkspace": "你已被加入 {workspaceName}",
+    "inviteAccepted": "已接受邀請",
+    "inviteFailed": "接受邀請失敗",
     "unsavedChanges": {
       "message": "您有未儲存的變更。是否要捨棄這些變更並切換工作區？",
       "title": "未儲存的變更"
@@ -2602,6 +2670,128 @@
       "workspaceNotFound": "找不到工作區"
     }
   },
+  "workspacePanel": {
+    "createWorkspaceDialog": {
+      "create": "建立",
+      "message": "工作區可讓成員共用點數池。建立後您將成為擁有者。",
+      "nameLabel": "工作區名稱*",
+      "namePlaceholder": "輸入工作區名稱",
+      "title": "建立新工作區"
+    },
+    "dashboard": {
+      "placeholder": "儀表板工作區設定"
+    },
+    "deleteDialog": {
+      "message": "任何未使用的點數或未儲存的資產都將遺失。此操作無法復原。",
+      "messageWithName": "刪除「{name}」？任何未使用的點數或未儲存的資產都將遺失。此操作無法復原。",
+      "title": "確定要刪除此工作區？"
+    },
+    "editWorkspaceDialog": {
+      "nameLabel": "工作區名稱",
+      "save": "儲存",
+      "title": "編輯工作區詳細資料"
+    },
+    "invite": "邀請",
+    "inviteLimitReached": "你已達到最多 50 位成員的上限",
+    "inviteMember": "邀請成員",
+    "inviteMemberDialog": {
+      "createLink": "建立連結",
+      "linkCopied": "已複製",
+      "linkCopyFailed": "複製連結失敗",
+      "linkStep": {
+        "copyLink": "複製連結",
+        "done": "完成",
+        "message": "請確認他們的帳號使用此電子郵件。",
+        "title": "將此連結發送給對方"
+      },
+      "message": "建立可分享的邀請連結並發送給對方",
+      "placeholder": "輸入對方的電子郵件",
+      "title": "邀請他人加入此工作區"
+    },
+    "leaveDialog": {
+      "leave": "離開",
+      "message": "除非聯絡工作區擁有者，否則您將無法再次加入。",
+      "title": "確定要離開此工作區？"
+    },
+    "members": {
+      "actions": {
+        "copyLink": "複製邀請連結",
+        "removeMember": "移除成員",
+        "revokeInvite": "撤銷邀請"
+      },
+      "columns": {
+        "expiryDate": "到期日",
+        "inviteDate": "邀請日期",
+        "joinDate": "加入日期"
+      },
+      "createNewWorkspace": "建立新工作區。",
+      "membersCount": "{count}/50 位成員",
+      "noInvites": "沒有待處理邀請",
+      "noMembers": "沒有成員",
+      "pendingInvitesCount": "{count} 個待處理邀請",
+      "personalWorkspaceMessage": "你目前無法邀請其他成員加入你的個人工作區。若要新增成員，請",
+      "tabs": {
+        "active": "已啟用",
+        "pendingCount": "待處理 ({count})"
+      }
+    },
+    "menu": {
+      "deleteWorkspace": "刪除工作區",
+      "deleteWorkspaceDisabledTooltip": "請先取消工作區的有效訂閱",
+      "editWorkspace": "編輯工作區詳細資料",
+      "leaveWorkspace": "離開工作區"
+    },
+    "removeMemberDialog": {
+      "error": "移除成員失敗",
+      "message": "此成員將會從你的工作區中移除。他們已使用的點數不會退還。",
+      "remove": "移除成員",
+      "success": "已移除成員",
+      "title": "要移除此成員嗎？"
+    },
+    "revokeInviteDialog": {
+      "message": "此人將無法再加入你的工作區，他們的邀請連結也會失效。",
+      "revoke": "取消邀請",
+      "title": "要取消邀請此人嗎？"
+    },
+    "tabs": {
+      "dashboard": "儀表板",
+      "membersCount": "成員 ({count})",
+      "planCredits": "方案與點數"
+    },
+    "toast": {
+      "failedToCreateWorkspace": "建立工作區失敗",
+      "failedToDeleteWorkspace": "刪除工作區失敗",
+      "failedToFetchWorkspaces": "載入工作區失敗",
+      "failedToLeaveWorkspace": "離開工作區失敗",
+      "failedToUpdateWorkspace": "更新工作區失敗",
+      "workspaceCreated": {
+        "message": "訂閱方案、邀請團隊成員並開始協作。",
+        "subscribe": "訂閱",
+        "title": "已建立工作區"
+      },
+      "workspaceDeleted": {
+        "message": "該工作區已被永久刪除。",
+        "title": "已刪除工作區"
+      },
+      "workspaceLeft": {
+        "message": "你已離開該工作區。",
+        "title": "已離開工作區"
+      },
+      "workspaceUpdated": {
+        "message": "工作區詳細資料已儲存。",
+        "title": "工作區已更新"
+      }
+    }
+  },
+  "workspaceSwitcher": {
+    "createWorkspace": "建立新工作區",
+    "maxWorkspacesReached": "您最多只能擁有 10 個工作區。請刪除一個以建立新工作區。",
+    "personal": "個人",
+    "roleMember": "成員",
+    "roleOwner": "擁有者",
+    "subscribe": "訂閱",
+    "switchWorkspace": "切換工作區"
+  },
   "zoomControls": {
     "hideMinimap": "隱藏小地圖",
     "label": "縮放控制",
diff --git a/src/locales/zh-TW/nodeDefs.json b/src/locales/zh-TW/nodeDefs.json
index d35495b14..ce21f930c 100644
--- a/src/locales/zh-TW/nodeDefs.json
+++ b/src/locales/zh-TW/nodeDefs.json
@@ -328,6 +328,68 @@
       }
     }
   },
+  "BriaImageEditNode": {
+    "description": "使用 Bria 最新模型編輯圖像",
+    "display_name": "Bria 圖像編輯",
+    "inputs": {
+      "control_after_generate": {
+        "name": "生成後控制"
+      },
+      "guidance_scale": {
+        "name": "指引強度",
+        "tooltip": "數值越高，圖像越貼合提示詞。"
+      },
+      "image": {
+        "name": "圖像"
+      },
+      "mask": {
+        "name": "遮罩",
+        "tooltip": "若未設定，編輯將套用至整張圖像。"
+      },
+      "model": {
+        "name": "model"
+      },
+      "moderation": {
+        "name": "審核",
+        "tooltip": "審核設定"
+      },
+      "moderation_prompt_content_moderation": {
+        "name": "提示詞內容審核"
+      },
+      "moderation_visual_input_moderation": {
+        "name": "輸入圖像審核"
+      },
+      "moderation_visual_output_moderation": {
+        "name": "輸出圖像審核"
+      },
+      "negative_prompt": {
+        "name": "負面提示詞"
+      },
+      "prompt": {
+        "name": "提示詞",
+        "tooltip": "編輯圖像的指令"
+      },
+      "seed": {
+        "name": "種子"
+      },
+      "steps": {
+        "name": "步數"
+      },
+      "structured_prompt": {
+        "name": "結構化提示詞",
+        "tooltip": "包含結構化編輯提示的 JSON 格式字串。若需精確、程式化控制，請使用此項取代一般提示詞。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      },
+      "1": {
+        "name": "結構化提示詞",
+        "tooltip": null
+      }
+    }
+  },
   "ByteDanceFirstLastFrameNode": {
     "description": "使用提示詞和首尾幀生成影片。",
     "display_name": "字節跳動首尾幀轉影片",
@@ -385,43 +447,6 @@
       }
     }
   },
-  "ByteDanceImageEditNode": {
-    "description": "透過 API 使用字節跳動模型根據提示詞編輯圖片",
-    "display_name": "字節跳動圖片編輯",
-    "inputs": {
-      "control_after_generate": {
-        "name": "control after generate"
-      },
-      "guidance_scale": {
-        "name": "guidance_scale",
-        "tooltip": "數值越高，圖像越遵循提示詞"
-      },
-      "image": {
-        "name": "圖片",
-        "tooltip": "要編輯的基礎圖片"
-      },
-      "model": {
-        "name": "模型"
-      },
-      "prompt": {
-        "name": "提示詞",
-        "tooltip": "編輯圖片的指令"
-      },
-      "seed": {
-        "name": "seed",
-        "tooltip": "用於生成的種子值"
-      },
-      "watermark": {
-        "name": "watermark",
-        "tooltip": "是否在圖像上添加「AI 生成」浮水印"
-      }
-    },
-    "outputs": {
-      "0": {
-        "tooltip": null
-      }
-    }
-  },
   "ByteDanceImageNode": {
     "description": "透過 API 基於提示詞使用字節跳動模型生成圖像",
     "display_name": "字節跳動圖像",
@@ -2031,14 +2056,18 @@
       "choice": {
         "name": "選項"
       },
-      "option0": {
+      "index": {
+      },
+      "option1": {
       }
     },
-    "outputs": {
-      "0": {
+    "outputs": [
+      null,
+      {
+        "name": "INDEX",
         "tooltip": null
       }
-    }
+    ]
   },
   "DiffControlNetLoader": {
     "display_name": "載入 ControlNet 模型（diff）",
@@ -6390,6 +6419,60 @@
       }
     }
   },
+  "LoraLoaderBypass": {
+    "description": "以繞過模式套用 LoRA。與一般 LoRA 不同，此方式不會修改模型權重，而是在前向傳遞時注入 LoRA 計算。適用於訓練場景。",
+    "display_name": "載入 LoRA（繞過模式）（除錯用）",
+    "inputs": {
+      "clip": {
+        "name": "clip",
+        "tooltip": "將套用 LoRA 的 CLIP 模型。"
+      },
+      "lora_name": {
+        "name": "lora_name",
+        "tooltip": "LoRA 的名稱。"
+      },
+      "model": {
+        "name": "model",
+        "tooltip": "將套用 LoRA 的擴散模型。"
+      },
+      "strength_clip": {
+        "name": "strength_clip",
+        "tooltip": "調整 CLIP 模型的強度。此值可為負數。"
+      },
+      "strength_model": {
+        "name": "strength_model",
+        "tooltip": "調整擴散模型的強度。此值可為負數。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": "已修改的擴散模型。"
+      },
+      "1": {
+        "tooltip": "已修改的 CLIP 模型。"
+      }
+    }
+  },
+  "LoraLoaderBypassModelOnly": {
+    "description": "以繞過模式套用 LoRA。與一般 LoRA 不同，此方式不會修改模型權重，而是在前向傳遞時注入 LoRA 計算。適用於訓練場景。",
+    "display_name": "載入 LoRA（繞過模式，僅模型）（除錯用）",
+    "inputs": {
+      "lora_name": {
+        "name": "lora_name"
+      },
+      "model": {
+        "name": "model"
+      },
+      "strength_model": {
+        "name": "strength_model"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": "已修改的擴散模型。"
+      }
+    }
+  },
   "LoraLoaderModelOnly": {
     "description": "LoRA 用於修改 diffusion 和 CLIP 模型，改變 latent 去噪的方式，例如套用風格。多個 LoRA 節點可以串接在一起使用。",
     "display_name": "LoraLoaderModelOnly",
@@ -6757,6 +6840,126 @@
       }
     }
   },
+  "MagnificImageRelightNode": {
+    "description": "透過光線調整與可選的參考光線轉移，重新打光圖像。",
+    "display_name": "Magnific 圖像重光",
+    "inputs": {
+      "advanced_settings": {
+        "name": "advanced_settings",
+        "tooltip": "進階光線控制的微調選項。"
+      },
+      "change_background": {
+        "name": "change_background",
+        "tooltip": "根據提示或參考圖修改背景。"
+      },
+      "image": {
+        "name": "image",
+        "tooltip": "要重新打光的圖像。"
+      },
+      "interpolate_from_original": {
+        "name": "interpolate_from_original",
+        "tooltip": "限制生成自由度，使結果更貼近原圖。"
+      },
+      "light_transfer_strength": {
+        "name": "light_transfer_strength",
+        "tooltip": "光線轉移應用的強度。"
+      },
+      "preserve_details": {
+        "name": "preserve_details",
+        "tooltip": "保留原圖的紋理與細節。"
+      },
+      "prompt": {
+        "name": "prompt",
+        "tooltip": "光線描述指引。支援強調標註（1-1.4）。"
+      },
+      "reference_image": {
+        "name": "reference_image",
+        "tooltip": "可選的參考圖像，用於轉移光線。"
+      },
+      "style": {
+        "name": "style",
+        "tooltip": "風格化輸出偏好。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "MagnificImageSkinEnhancerNode": {
+    "description": "人像美膚增強，支援多種處理模式。",
+    "display_name": "Magnific 圖像美膚增強",
+    "inputs": {
+      "image": {
+        "name": "image",
+        "tooltip": "要增強的人像圖像。"
+      },
+      "mode": {
+        "name": "mode",
+        "tooltip": "處理模式：creative 為藝術增強，faithful 保留原貌，flexible 針對性優化。"
+      },
+      "sharpen": {
+        "name": "sharpen",
+        "tooltip": "銳化強度等級。"
+      },
+      "smart_grain": {
+        "name": "smart_grain",
+        "tooltip": "智慧顆粒強度等級。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "MagnificImageStyleTransferNode": {
+    "description": "將參考圖像的風格轉移到您的輸入圖像上。",
+    "display_name": "Magnific 圖像風格轉換",
+    "inputs": {
+      "engine": {
+        "name": "engine",
+        "tooltip": "處理引擎選擇。"
+      },
+      "fixed_generation": {
+        "name": "fixed_generation",
+        "tooltip": "停用時，每次生成都會引入一定的隨機性，產生更多元的結果。"
+      },
+      "flavor": {
+        "name": "flavor",
+        "tooltip": "風格轉換風格。"
+      },
+      "image": {
+        "name": "image",
+        "tooltip": "要進行風格轉換的圖像。"
+      },
+      "portrait_mode": {
+        "name": "portrait_mode",
+        "tooltip": "啟用人像模式以增強臉部細節。"
+      },
+      "prompt": {
+        "name": "prompt"
+      },
+      "reference_image": {
+        "name": "reference_image",
+        "tooltip": "用於提取風格的參考圖像。"
+      },
+      "structure_strength": {
+        "name": "structure_strength",
+        "tooltip": "維持原始圖像的結構。"
+      },
+      "style_strength": {
+        "name": "style_strength",
+        "tooltip": "風格強度的百分比。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "Mahiro": {
     "description": "修改引導方式，讓其更著重於正向提示詞的「方向性」而非正負提示詞之間的差異。",
     "display_name": "Mahiro 太可愛了，應該要有更好的引導功能!! (。・ω・。)",
@@ -11209,19 +11412,28 @@
     }
   },
   "ResizeImageMaskNode": {
+    "description": "使用各種縮放方法調整圖像或 mask 的大小。",
     "display_name": "調整影像／遮罩大小",
     "inputs": {
       "input": {
         "name": "input"
       },
       "resize_type": {
-        "name": "resize_type"
+        "name": "resize_type",
+        "tooltip": "選擇調整大小的方式：依照精確尺寸、縮放比例、匹配其他圖像等。"
       },
-      "resize_type_multiplier": {
-        "name": "multiplier"
+      "resize_type_crop": {
+        "name": "裁切"
+      },
+      "resize_type_height": {
+        "name": "高度"
+      },
+      "resize_type_width": {
+        "name": "寬度"
       },
       "scale_method": {
-        "name": "scale_method"
+        "name": "scale_method",
+        "tooltip": "插值演算法。'area' 適合縮小，'lanczos' 適合放大，'nearest-exact' 適合像素藝術。"
       }
     },
     "outputs": {
@@ -13355,6 +13567,84 @@
       }
     }
   },
+  "TencentImageToModelNode": {
+    "display_name": "Hunyuan3D：圖片轉模型（專業版）",
+    "inputs": {
+      "control_after_generate": {
+        "name": "生成後控制"
+      },
+      "face_count": {
+        "name": "面數"
+      },
+      "generate_type": {
+        "name": "生成類型"
+      },
+      "generate_type_pbr": {
+        "name": "PBR"
+      },
+      "image": {
+        "name": "圖片"
+      },
+      "image_back": {
+        "name": "背面圖片"
+      },
+      "image_left": {
+        "name": "左側圖片"
+      },
+      "image_right": {
+        "name": "右側圖片"
+      },
+      "model": {
+        "name": "模型",
+        "tooltip": "「LowPoly」選項在 `3.1` 模型中不可用。"
+      },
+      "seed": {
+        "name": "種子",
+        "tooltip": "種子控制節點是否重新執行；無論種子如何，結果皆為非確定性。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "模型檔案",
+        "tooltip": null
+      }
+    }
+  },
+  "TencentTextToModelNode": {
+    "display_name": "Hunyuan3D：文字轉模型（專業版）",
+    "inputs": {
+      "control_after_generate": {
+        "name": "生成後控制"
+      },
+      "face_count": {
+        "name": "面數"
+      },
+      "generate_type": {
+        "name": "生成類型"
+      },
+      "generate_type_pbr": {
+        "name": "PBR"
+      },
+      "model": {
+        "name": "模型",
+        "tooltip": "「LowPoly」選項在 `3.1` 模型中不可用。"
+      },
+      "prompt": {
+        "name": "提示詞",
+        "tooltip": "最多支援 1024 個字元。"
+      },
+      "seed": {
+        "name": "種子",
+        "tooltip": "種子控制節點是否重新執行；無論種子如何，結果皆為非確定性。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "模型檔案",
+        "tooltip": null
+      }
+    }
+  },
   "TextEncodeAceStepAudio": {
     "display_name": "TextEncodeAceStepAudio",
     "inputs": {
@@ -13450,6 +13740,40 @@
       }
     }
   },
+  "TextEncodeZImageOmni": {
+    "display_name": "TextEncodeZImageOmni",
+    "inputs": {
+      "auto_resize_images": {
+        "name": "自動調整圖像尺寸"
+      },
+      "clip": {
+        "name": "clip"
+      },
+      "image1": {
+        "name": "圖像1"
+      },
+      "image2": {
+        "name": "圖像2"
+      },
+      "image3": {
+        "name": "圖像3"
+      },
+      "image_encoder": {
+        "name": "圖像編碼器"
+      },
+      "prompt": {
+        "name": "提示詞"
+      },
+      "vae": {
+        "name": "vae"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "TextToLowercase": {
     "display_name": "轉換為小寫",
     "inputs": {
@@ -13655,6 +13979,10 @@
         "name": "解析度分桶模式",
         "tooltip": "啟用解析度分桶模式。啟用後，需從 ResolutionBucket 節點輸入預先分桶的 latent。"
       },
+      "bypass_mode": {
+        "name": "bypass_mode",
+        "tooltip": "啟用訓練旁路模式。啟用後，adapter 會透過 forward hook 應用，而不是直接修改權重。適用於無法直接修改權重的量化模型。"
+      },
       "control_after_generate": {
         "name": "生成後控制"
       },
@@ -15621,6 +15949,79 @@
       }
     }
   },
+  "WanInfiniteTalkToVideo": {
+    "display_name": "WanInfiniteTalkToVideo",
+    "inputs": {
+      "audio_encoder_output_1": {
+        "name": "音訊編碼器輸出 1"
+      },
+      "audio_scale": {
+        "name": "音訊縮放"
+      },
+      "clip_vision_output": {
+        "name": "clip 視覺輸出"
+      },
+      "height": {
+        "name": "高度"
+      },
+      "length": {
+        "name": "長度"
+      },
+      "mode": {
+        "name": "模式"
+      },
+      "model": {
+        "name": "模型"
+      },
+      "model_patch": {
+        "name": "模型修補"
+      },
+      "motion_frame_count": {
+        "name": "動作影格數",
+        "tooltip": "用作動作參考的前置影格數量。"
+      },
+      "negative": {
+        "name": "負向提示"
+      },
+      "positive": {
+        "name": "正向提示"
+      },
+      "previous_frames": {
+        "name": "前置影格"
+      },
+      "start_image": {
+        "name": "起始圖像"
+      },
+      "vae": {
+        "name": "vae"
+      },
+      "width": {
+        "name": "寬度"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "模型",
+        "tooltip": null
+      },
+      "1": {
+        "name": "正向提示",
+        "tooltip": null
+      },
+      "2": {
+        "name": "負向提示",
+        "tooltip": null
+      },
+      "3": {
+        "name": "latent",
+        "tooltip": null
+      },
+      "4": {
+        "name": "裁切圖像",
+        "tooltip": null
+      }
+    }
+  },
   "WanMoveConcatTrack": {
     "display_name": "WanMoveConcatTrack",
     "inputs": {
@@ -16137,6 +16538,43 @@
       }
     }
   },
+  "WavespeedFlashVSRNode": {
+    "description": "快速高品質影片升頻器，提升解析度並恢復低解析度或模糊影片的清晰度。",
+    "display_name": "FlashVSR 影片升頻",
+    "inputs": {
+      "target_resolution": {
+        "name": "目標解析度"
+      },
+      "video": {
+        "name": "影片"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "WavespeedImageUpscaleNode": {
+    "description": "提升圖像解析度與品質，將照片升頻至 4K 或 8K，獲得銳利細緻的效果。",
+    "display_name": "WaveSpeed 圖像升頻",
+    "inputs": {
+      "image": {
+        "name": "圖像"
+      },
+      "model": {
+        "name": "model"
+      },
+      "target_resolution": {
+        "name": "目標解析度"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "WebcamCapture": {
     "display_name": "網路攝影機擷取",
     "inputs": {
diff --git a/src/locales/zh-TW/settings.json b/src/locales/zh-TW/settings.json
index 8f769dc7b..73a444246 100644
--- a/src/locales/zh-TW/settings.json
+++ b/src/locales/zh-TW/settings.json
@@ -52,7 +52,8 @@
     }
   },
   "Comfy_Canvas_SelectionToolbox": {
-    "name": "顯示選取工具箱"
+    "name": "顯示選取工具箱",
+    "tooltip": "當選取節點時顯示浮動工具列，快速存取常用操作。"
   },
   "Comfy_ConfirmClear": {
     "name": "清除工作流程時需要確認"
@@ -147,7 +148,8 @@
       "Linear": "線性",
       "Spline": "曲線",
       "Straight": "直線"
-    }
+    },
+    "tooltip": "控制畫布上節點連接線的外觀與可見性。"
   },
   "Comfy_Load3D_3DViewerEnable": {
     "name": "啟用 3D 檢視器（測試版）",
@@ -272,6 +274,10 @@
   "Comfy_Node_AllowImageSizeDraw": {
     "name": "在圖片預覽下方顯示寬度 × 高度"
   },
+  "Comfy_Node_AlwaysShowAdvancedWidgets": {
+    "name": "在所有節點上總是顯示進階小工具",
+    "tooltip": "啟用後，所有節點的進階小工具將始終可見，無需單獨展開。"
+  },
   "Comfy_Node_AutoSnapLinkToSlot": {
     "name": "自動吸附連結到節點插槽",
     "tooltip": "拖曳連結到節點時，連結會自動吸附到節點上可用的輸入插槽"
@@ -470,6 +476,7 @@
     "tooltip": "貝茲控制點相對於重導中心點的偏移量"
   },
   "pysssss_SnapToGrid": {
-    "name": "總是對齊格線"
+    "name": "總是對齊格線",
+    "tooltip": "啟用後，移動或調整節點大小時會自動對齊網格。"
   }
 }
diff --git a/src/locales/zh/main.json b/src/locales/zh/main.json
index 3551fbb92..726ea9400 100644
--- a/src/locales/zh/main.json
+++ b/src/locales/zh/main.json
@@ -24,6 +24,7 @@
     "assets": "资产",
     "baseModels": "基础模型",
     "browseAssets": "浏览资产",
+    "byType": "按类型",
     "checkpoints": "模型",
     "civitaiLinkExample": "<strong>案例：</strong> <a href=\"https://civitai.com/api/download/models/833921?type=Model&format=SafeTensor\" target=\"_blank\" class=\"text-muted-foreground\">https://civitai.com/api/download/models/833921?type=Model&format=SafeTensor</a>",
     "civitaiLinkExampleStrong": "案例:",
@@ -45,6 +46,10 @@
       "failed": "下载失败",
       "inProgress": "正在下载 {assetName}..."
     },
+    "emptyImported": {
+      "canImport": "尚未导入模型。点击“导入模型”添加您的模型。",
+      "restricted": "个人模型仅限创作者及以上等级使用。"
+    },
     "errorFileTooLarge": "允许执行文件的文件大小限制",
     "errorFormatNotAllowed": "仅允许 SafeTensor 格式",
     "errorModelTypeNotSupported": "不支持该类型的模型",
@@ -61,6 +66,7 @@
     "finish": "完成",
     "genericLinkPlaceholder": "粘贴链接到这",
     "importAnother": "导入其他",
+    "imported": "已导入",
     "jobId": "任务ID",
     "loadingModels": "正在加载{type}...",
     "maxFileSize": "最大文件大小：{size}",
@@ -70,6 +76,30 @@
       "threeDModelPlaceholder": "3D 模型"
     },
     "modelAssociatedWithLink": "您提供的链接的模型：",
+    "modelInfo": {
+      "addBaseModel": "添加基础模型...",
+      "addTag": "添加标签...",
+      "additionalTags": "附加标签",
+      "baseModelUnknown": "基础模型未知",
+      "basicInfo": "基本信息",
+      "compatibleBaseModels": "兼容基础模型",
+      "description": "描述",
+      "descriptionNotSet": "未设置描述",
+      "descriptionPlaceholder": "为此模型添加描述...",
+      "displayName": "显示名称",
+      "editDisplayName": "编辑显示名称",
+      "fileName": "文件名",
+      "modelDescription": "模型描述",
+      "modelTagging": "模型标签",
+      "modelType": "模型类型",
+      "noAdditionalTags": "无附加标签",
+      "selectModelPrompt": "选择一个模型以查看其信息",
+      "selectModelType": "选择模型类型...",
+      "source": "来源",
+      "title": "模型信息",
+      "triggerPhrases": "触发短语",
+      "viewOnSource": "在 {source} 上查看"
+    },
     "modelName": "模型名",
     "modelNamePlaceholder": "输入该模型的名称",
     "modelTypeSelectorLabel": "这是什么类型的模型？",
@@ -684,6 +714,7 @@
     "clearAll": "全部清除",
     "clearFilters": "清除筛选",
     "close": "关闭",
+    "closeDialog": "关闭对话框",
     "color": "颜色",
     "comfy": "舒适",
     "comfyOrgLogoAlt": "ComfyOrg 徽标",
@@ -700,6 +731,7 @@
     "control_before_generate": "生成前控制",
     "copied": "已复制",
     "copy": "复制",
+    "copyAll": "全部复制",
     "copyJobId": "复制队列 ID",
     "copyToClipboard": "复制到剪贴板",
     "copyURL": "复制链接",
@@ -762,6 +794,8 @@
     "goToNode": "转到节点",
     "graphNavigation": "图形导航",
     "halfSpeed": "0.5倍",
+    "hideLeftPanel": "隐藏左侧面板",
+    "hideRightPanel": "隐藏右侧面板",
     "icon": "图标",
     "imageFailedToLoad": "图像加载失败",
     "imagePreview": "图片预览 - 使用方向键切换图片",
@@ -803,6 +837,7 @@
     "name": "名称",
     "newFolder": "新文件夹",
     "next": "下一个",
+    "nightly": "NIGHTLY",
     "no": "否",
     "noAudioRecorded": "未录制音频",
     "noItems": "无项目",
@@ -817,6 +852,7 @@
     "nodeSlotsError": "节点插槽错误",
     "nodeWidgetsError": "节点控件错误",
     "nodes": "节点",
+    "nodesCount": "{count} 个节点",
     "nodesRunning": "节点正在运行",
     "none": "无",
     "nothingToCopy": "没有可以复制的内容",
@@ -891,7 +927,9 @@
     "selectedFile": "已选文件",
     "setAsBackground": "设为背景",
     "settings": "设置",
+    "showLeftPanel": "显示左侧面板",
     "showReport": "显示报告",
+    "showRightPanel": "显示右侧面板",
     "singleSelectDropdown": "单选下拉框",
     "sort": "排序",
     "source": "来源",
@@ -914,6 +952,7 @@
     "updating": "更新中",
     "upload": "上传",
     "usageHint": "使用提示",
+    "use": "使用",
     "user": "用户",
     "versionMismatchWarning": "版本兼容性警告",
     "versionMismatchWarningMessage": "{warning}：{detail} 请参阅 https://docs.comfy.org/installation/update_comfyui#common-update-issues 以取得更新说明。",
@@ -921,11 +960,10 @@
     "videoPreview": "视频预览 - 使用方向键切换视频",
     "viewImageOfTotal": "查看第 {index} 张图片，共 {total} 张",
     "viewVideoOfTotal": "查看第 {index} 个视频，共 {total} 个",
-    "vitePreloadErrorMessage": "应用已发布新版本。是否立即重新加载？\n如果不重新加载，应用的某些功能可能无法正常工作。\n您可以先拒绝，保存进度后再重新加载。",
-    "vitePreloadErrorTitle": "新版本可用",
     "volume": "音量",
     "warning": "警告",
-    "workflow": "工作流"
+    "workflow": "工作流",
+    "you": "你"
   },
   "graphCanvasMenu": {
     "fitView": "适应视图",
@@ -1617,17 +1655,25 @@
       "title": "该工作流含有缺失节点"
     }
   },
+  "nightly": {
+    "badge": {
+      "label": "预览版",
+      "tooltip": "您正在使用 ComfyUI 的夜间版本。请使用反馈按钮分享您对这些功能的看法。"
+    }
+  },
   "nodeCategories": {
     "": "",
     "3d": "3d",
     "3d_models": "3D模型",
     "BFL": "BFL",
+    "Bria": "Bria",
     "ByteDance": "字节跳动",
     "Gemini": "Gemini",
     "Ideogram": "Ideogram",
     "Kling": "Kling",
     "LTXV": "LTXV",
     "Luma": "Luma",
+    "Magnific": "Magnific",
     "Meshy": "Meshy",
     "MiniMax": "MiniMax",
     "Moonvalley Marey": "Moonvalley Marey",
@@ -1638,11 +1684,13 @@
     "Runway": "Runway",
     "Sora": "Sora",
     "Stability AI": "Stability AI",
+    "Tencent": "Tencent",
     "Topaz": "Topaz",
     "Tripo": "Tripo",
     "Veo": "Veo",
     "Vidu": "Vidu",
     "Wan": "Wan万相",
+    "WaveSpeed": "WaveSpeed",
     "_for_testing": "_用于测试",
     "advanced": "高级",
     "animation": "动画",
@@ -1852,6 +1900,7 @@
     },
     "groupSettings": "分组设置",
     "groups": "分组",
+    "hideAdvancedInputsButton": "隐藏高级输入",
     "hideInput": "隐藏输入",
     "info": "信息",
     "inputs": "输入",
@@ -2084,6 +2133,7 @@
     "NodeLibrary": "节点库",
     "Nodes 2_0": "Nodes 2.0",
     "Notification Preferences": "通知偏好",
+    "Other": "其他",
     "PLY": "PLY",
     "PlanCredits": "计划与积分",
     "Pointer": "指针",
@@ -2103,7 +2153,8 @@
     "Vue Nodes": "Nodes 2.0",
     "VueNodes": "Nodes 2.0",
     "Window": "窗口",
-    "Workflow": "工作流"
+    "Workflow": "工作流",
+    "Workspace": "工作区"
   },
   "shape": {
     "CARD": "卡片",
@@ -2129,12 +2180,14 @@
     "viewControls": "视图控制"
   },
   "sideToolbar": {
+    "activeJobStatus": "当前任务：{status}",
     "assets": "资产",
     "backToAssets": "返回所有资产",
     "browseTemplates": "浏览示例模板",
     "downloads": "下载",
     "generatedAssetsHeader": "生成的资源",
     "helpCenter": "帮助中心",
+    "importedAssetsHeader": "已导入资源",
     "labels": {
       "assets": "资产",
       "console": "控制台",
@@ -2190,6 +2243,7 @@
     "queue": "队列",
     "queueProgressOverlay": {
       "activeJobs": "{count} 个活跃任务",
+      "activeJobsShort": "{count} 个活动任务 | {count} 个活动任务",
       "activeJobsSuffix": "活跃任务",
       "cancelJobTooltip": "取消任务",
       "clearHistory": "清除任务记录",
@@ -2278,9 +2332,15 @@
     "beta": "测试版",
     "billedMonthly": "每月付款",
     "billedYearly": "{total} 每年付款",
+    "billingComingSoon": {
+      "message": "团队计费功能即将上线。您将可以为您的工作区按成员数订阅套餐。敬请关注后续更新。",
+      "title": "即将推出"
+    },
+    "cancelSubscription": "取消订阅",
     "changeTo": "更改为 {plan}",
     "comfyCloud": "Comfy 云",
     "comfyCloudLogo": "Comfy Cloud Logo",
+    "contactOwnerToSubscribe": "请联系工作区所有者进行订阅",
     "contactUs": "联系我们",
     "creditsRemainingThisMonth": "本月剩余积分",
     "creditsRemainingThisYear": "今年剩余积分",
@@ -2293,6 +2353,7 @@
     "haveQuestions": "对企业级有疑问？",
     "invoiceHistory": "发票历史",
     "learnMore": "了解更多",
+    "managePayment": "管理付款",
     "managePlan": "管理订阅",
     "manageSubscription": "管理订阅",
     "maxDuration": {
@@ -2328,6 +2389,7 @@
     "subscribeToComfyCloud": "订阅 Comfy Cloud",
     "subscribeToRun": "订阅",
     "subscribeToRunFull": "订阅 Run",
+    "subscriptionRequiredMessage": "成员在云端运行工作流需要订阅",
     "tierNameYearly": "{name} 年度",
     "tiers": {
       "creator": {
@@ -2359,6 +2421,7 @@
     "viewMoreDetails": "查看更多详情",
     "viewMoreDetailsPlans": "查看有关订阅和定价的更多信息",
     "viewUsageHistory": "查看使用历史",
+    "workspaceNotSubscribed": "此工作区未订阅",
     "yearly": "年度",
     "yearlyCreditsLabel": "总共年度积分",
     "yearlyDiscount": "20% 减免",
@@ -2460,6 +2523,7 @@
     "failedToLoadModel": "无法加载3D模型",
     "failedToPurchaseCredits": "购买积分失败：{error}",
     "failedToQueue": "排队失败",
+    "failedToSaveDraft": "保存工作流草稿失败",
     "failedToToggleCamera": "切换镜头失败",
     "failedToToggleGrid": "切换网格失败",
     "failedToUpdateBackgroundColor": "更新背景色失败",
@@ -2508,7 +2572,8 @@
     "notSet": "未设置",
     "provider": "登录方式",
     "title": "我的用户设置",
-    "updatePassword": "更新密码"
+    "updatePassword": "更新密码",
+    "workspaceSettings": "工作区设置"
   },
   "validation": {
     "descriptionRequired": "描述是必填的",
@@ -2599,6 +2664,9 @@
     "saveWorkflow": "保存工作流"
   },
   "workspace": {
+    "addedToWorkspace": "您已被加入 {workspaceName}",
+    "inviteAccepted": "邀请已接受",
+    "inviteFailed": "接受邀请失败",
     "unsavedChanges": {
       "message": "您有未保存的更改。是否要放弃这些更改并切换工作区？",
       "title": "未保存的更改"
@@ -2613,6 +2681,128 @@
       "workspaceNotFound": "未找到工作区"
     }
   },
+  "workspacePanel": {
+    "createWorkspaceDialog": {
+      "create": "创建",
+      "message": "工作区让成员共享积分池。创建后您将成为所有者。",
+      "nameLabel": "工作区名称*",
+      "namePlaceholder": "请输入工作区名称",
+      "title": "创建新工作区"
+    },
+    "dashboard": {
+      "placeholder": "仪表盘工作区设置"
+    },
+    "deleteDialog": {
+      "message": "任何未使用的积分或未保存的资源都将丢失。此操作无法撤销。",
+      "messageWithName": "删除“{name}”？任何未使用的积分或未保存的资源都将丢失。此操作无法撤销。",
+      "title": "删除此工作区？"
+    },
+    "editWorkspaceDialog": {
+      "nameLabel": "工作区名称",
+      "save": "保存",
+      "title": "编辑工作区详情"
+    },
+    "invite": "邀请",
+    "inviteLimitReached": "您已达到最多 50 名成员的上限",
+    "inviteMember": "邀请成员",
+    "inviteMemberDialog": {
+      "createLink": "创建链接",
+      "linkCopied": "已复制",
+      "linkCopyFailed": "复制链接失败",
+      "linkStep": {
+        "copyLink": "复制链接",
+        "done": "完成",
+        "message": "请确保其账号使用的是该邮箱。",
+        "title": "将此链接发送给对方"
+      },
+      "message": "创建一个可分享的邀请链接发送给他人",
+      "placeholder": "输入对方邮箱",
+      "title": "邀请他人加入此工作区"
+    },
+    "leaveDialog": {
+      "leave": "离开",
+      "message": "除非联系工作区所有者，否则您将无法重新加入。",
+      "title": "离开此工作区？"
+    },
+    "members": {
+      "actions": {
+        "copyLink": "复制邀请链接",
+        "removeMember": "移除成员",
+        "revokeInvite": "撤销邀请"
+      },
+      "columns": {
+        "expiryDate": "过期日期",
+        "inviteDate": "邀请日期",
+        "joinDate": "加入日期"
+      },
+      "createNewWorkspace": "创建新工作区。",
+      "membersCount": "{count}/50 名成员",
+      "noInvites": "暂无待处理邀请",
+      "noMembers": "暂无成员",
+      "pendingInvitesCount": "{count} 个待处理邀请",
+      "personalWorkspaceMessage": "您目前无法邀请其他成员加入您的个人工作区。如需添加成员，请",
+      "tabs": {
+        "active": "已激活",
+        "pendingCount": "待处理（{count}）"
+      }
+    },
+    "menu": {
+      "deleteWorkspace": "删除工作区",
+      "deleteWorkspaceDisabledTooltip": "请先取消工作区的有效订阅",
+      "editWorkspace": "编辑工作区详情",
+      "leaveWorkspace": "离开工作区"
+    },
+    "removeMemberDialog": {
+      "error": "移除成员失败",
+      "message": "该成员将被移出您的工作区。其已使用的积分不会被退还。",
+      "remove": "移除成员",
+      "success": "成员已移除",
+      "title": "移除该成员？"
+    },
+    "revokeInviteDialog": {
+      "message": "该成员将无法再加入您的工作区，其邀请链接将失效。",
+      "revoke": "取消邀请",
+      "title": "取消邀请此人？"
+    },
+    "tabs": {
+      "dashboard": "仪表盘",
+      "membersCount": "成员（{count}）",
+      "planCredits": "套餐与积分"
+    },
+    "toast": {
+      "failedToCreateWorkspace": "创建工作区失败",
+      "failedToDeleteWorkspace": "删除工作区失败",
+      "failedToFetchWorkspaces": "加载工作区失败",
+      "failedToLeaveWorkspace": "离开工作区失败",
+      "failedToUpdateWorkspace": "更新工作区失败",
+      "workspaceCreated": {
+        "message": "订阅套餐，邀请队友，开始协作。",
+        "subscribe": "订阅",
+        "title": "工作区已创建"
+      },
+      "workspaceDeleted": {
+        "message": "该工作区已被永久删除。",
+        "title": "工作区已删除"
+      },
+      "workspaceLeft": {
+        "message": "您已退出该工作区。",
+        "title": "已退出工作区"
+      },
+      "workspaceUpdated": {
+        "message": "工作区详情已保存。",
+        "title": "工作区已更新"
+      }
+    }
+  },
+  "workspaceSwitcher": {
+    "createWorkspace": "创建新工作区",
+    "maxWorkspacesReached": "您最多只能拥有10个工作区。请删除一个以创建新工作区。",
+    "personal": "个人",
+    "roleMember": "成员",
+    "roleOwner": "所有者",
+    "subscribe": "订阅",
+    "switchWorkspace": "切换工作区"
+  },
   "zoomControls": {
     "hideMinimap": "隐藏小地图",
     "label": "缩放控制",
diff --git a/src/locales/zh/nodeDefs.json b/src/locales/zh/nodeDefs.json
index 342b056b2..f373987f0 100644
--- a/src/locales/zh/nodeDefs.json
+++ b/src/locales/zh/nodeDefs.json
@@ -328,6 +328,68 @@
       }
     }
   },
+  "BriaImageEditNode": {
+    "description": "使用 Bria 最新模型编辑图像",
+    "display_name": "Bria 图像编辑",
+    "inputs": {
+      "control_after_generate": {
+        "name": "control after generate"
+      },
+      "guidance_scale": {
+        "name": "guidance_scale",
+        "tooltip": "数值越高，图像越贴合 prompt。"
+      },
+      "image": {
+        "name": "image"
+      },
+      "mask": {
+        "name": "mask",
+        "tooltip": "如未指定，编辑将应用于整个图像。"
+      },
+      "model": {
+        "name": "model"
+      },
+      "moderation": {
+        "name": "moderation",
+        "tooltip": "内容审核设置"
+      },
+      "moderation_prompt_content_moderation": {
+        "name": "prompt_content_moderation"
+      },
+      "moderation_visual_input_moderation": {
+        "name": "visual_input_moderation"
+      },
+      "moderation_visual_output_moderation": {
+        "name": "visual_output_moderation"
+      },
+      "negative_prompt": {
+        "name": "negative_prompt"
+      },
+      "prompt": {
+        "name": "prompt",
+        "tooltip": "编辑图像的指令"
+      },
+      "seed": {
+        "name": "seed"
+      },
+      "steps": {
+        "name": "steps"
+      },
+      "structured_prompt": {
+        "name": "structured_prompt",
+        "tooltip": "包含结构化编辑提示的 JSON 字符串。使用此项可实现更精确、可编程的控制，替代常规 prompt。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      },
+      "1": {
+        "name": "structured_prompt",
+        "tooltip": null
+      }
+    }
+  },
   "ByteDanceFirstLastFrameNode": {
     "description": "使用提示词和首尾帧生成视频。",
     "display_name": "字节跳动首尾帧转视频",
@@ -385,43 +447,6 @@
       }
     }
   },
-  "ByteDanceImageEditNode": {
-    "description": "通过基于提示的API使用字节跳动模型编辑图像",
-    "display_name": "字节跳动图片编辑",
-    "inputs": {
-      "control_after_generate": {
-        "name": "生成后控制"
-      },
-      "guidance_scale": {
-        "name": "引导尺度",
-        "tooltip": "数值越高，图像越紧密地遵循提示"
-      },
-      "image": {
-        "name": "图片",
-        "tooltip": "要编辑的基础图像"
-      },
-      "model": {
-        "name": "模型"
-      },
-      "prompt": {
-        "name": "提示",
-        "tooltip": "编辑图像的指令"
-      },
-      "seed": {
-        "name": "种子",
-        "tooltip": "用于生成的种子"
-      },
-      "watermark": {
-        "name": "水印",
-        "tooltip": "是否在图像上添加“AI生成”水印"
-      }
-    },
-    "outputs": {
-      "0": {
-        "tooltip": null
-      }
-    }
-  },
   "ByteDanceImageNode": {
     "description": "通过基于提示的API使用字节跳动模型生成图像",
     "display_name": "字节跳动图片",
@@ -2033,14 +2058,18 @@
       "choice": {
         "name": "选择"
       },
-      "option0": {
+      "index": {
+      },
+      "option1": {
       }
     },
-    "outputs": {
-      "0": {
+    "outputs": [
+      null,
+      {
+        "name": "索引",
         "tooltip": null
       }
-    }
+    ]
   },
   "DiffControlNetLoader": {
     "display_name": "加载ControlNet模型（diff）",
@@ -2265,7 +2294,7 @@
     }
   },
   "EmptyHunyuanImageLatent": {
-    "display_name": "空Latent图像",
+    "display_name": "空Latent图像（Hunyuan）",
     "inputs": {
       "batch_size": {
         "name": "批次大小"
@@ -6405,6 +6434,60 @@
       }
     }
   },
+  "LoraLoaderBypass": {
+    "description": "以旁路模式应用LoRA。与常规LoRA不同，此方式不会修改模型权重——而是在前向传播时注入LoRA计算。适用于训练场景。",
+    "display_name": "加载LoRA（旁路）（用于调试）",
+    "inputs": {
+      "clip": {
+        "name": "clip",
+        "tooltip": "将应用LoRA的CLIP模型。"
+      },
+      "lora_name": {
+        "name": "lora_name",
+        "tooltip": "LoRA的名称。"
+      },
+      "model": {
+        "name": "model",
+        "tooltip": "将应用LoRA的扩散模型。"
+      },
+      "strength_clip": {
+        "name": "strength_clip",
+        "tooltip": "对CLIP模型的修改强度。该值可以为负数。"
+      },
+      "strength_model": {
+        "name": "strength_model",
+        "tooltip": "对扩散模型的修改强度。该值可以为负数。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": "已修改的扩散模型。"
+      },
+      "1": {
+        "tooltip": "已修改的CLIP模型。"
+      }
+    }
+  },
+  "LoraLoaderBypassModelOnly": {
+    "description": "以旁路模式应用LoRA。与常规LoRA不同，此方式不会修改模型权重——而是在前向传播时注入LoRA计算。适用于训练场景。",
+    "display_name": "加载LoRA（旁路，仅模型）（用于调试）",
+    "inputs": {
+      "lora_name": {
+        "name": "lora_name"
+      },
+      "model": {
+        "name": "model"
+      },
+      "strength_model": {
+        "name": "strength_model"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": "已修改的扩散模型。"
+      }
+    }
+  },
   "LoraLoaderModelOnly": {
     "description": "LoRA用于修改扩散和CLIP模型，改变Latent图像的降噪方式，例如应用风格。多个LoRA节点可以链接在一起。",
     "display_name": "LoRA加载器（仅模型）",
@@ -6773,6 +6856,126 @@
       }
     }
   },
+  "MagnificImageRelightNode": {
+    "description": "通过光照调整和可选的参考光照迁移对图像进行重光照。",
+    "display_name": "Magnific图像重光照",
+    "inputs": {
+      "advanced_settings": {
+        "name": "advanced_settings",
+        "tooltip": "高级光照控制的微调选项。"
+      },
+      "change_background": {
+        "name": "change_background",
+        "tooltip": "根据提示/参考修改背景。"
+      },
+      "image": {
+        "name": "image",
+        "tooltip": "需要重光照的图像。"
+      },
+      "interpolate_from_original": {
+        "name": "interpolate_from_original",
+        "tooltip": "限制生成自由度，更贴近原图。"
+      },
+      "light_transfer_strength": {
+        "name": "light_transfer_strength",
+        "tooltip": "光照迁移应用强度。"
+      },
+      "preserve_details": {
+        "name": "preserve_details",
+        "tooltip": "保留原图的纹理和细节。"
+      },
+      "prompt": {
+        "name": "prompt",
+        "tooltip": "光照描述性引导。支持强调符号（1-1.4）。"
+      },
+      "reference_image": {
+        "name": "reference_image",
+        "tooltip": "可选的参考图像，用于迁移光照。"
+      },
+      "style": {
+        "name": "style",
+        "tooltip": "风格化输出偏好。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "MagnificImageSkinEnhancerNode": {
+    "description": "用于人像的美肤增强，支持多种处理模式。",
+    "display_name": "Magnific图像美肤增强",
+    "inputs": {
+      "image": {
+        "name": "image",
+        "tooltip": "需要增强的人像图像。"
+      },
+      "mode": {
+        "name": "mode",
+        "tooltip": "处理模式：creative为艺术增强，faithful为保留原貌，flexible为定向优化。"
+      },
+      "sharpen": {
+        "name": "sharpen",
+        "tooltip": "锐化强度等级。"
+      },
+      "smart_grain": {
+        "name": "smart_grain",
+        "tooltip": "智能颗粒强度等级。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "MagnificImageStyleTransferNode": {
+    "description": "将参考图像的风格迁移到你的输入图像上。",
+    "display_name": "Magnific 图像风格迁移",
+    "inputs": {
+      "engine": {
+        "name": "engine",
+        "tooltip": "处理引擎选择。"
+      },
+      "fixed_generation": {
+        "name": "fixed_generation",
+        "tooltip": "禁用时，每次生成都会引入一定的随机性，从而产生更多样化的结果。"
+      },
+      "flavor": {
+        "name": "flavor",
+        "tooltip": "风格迁移风格类型。"
+      },
+      "image": {
+        "name": "image",
+        "tooltip": "要进行风格迁移的图像。"
+      },
+      "portrait_mode": {
+        "name": "portrait_mode",
+        "tooltip": "启用人像模式以增强面部效果。"
+      },
+      "prompt": {
+        "name": "prompt"
+      },
+      "reference_image": {
+        "name": "reference_image",
+        "tooltip": "用于提取风格的参考图像。"
+      },
+      "structure_strength": {
+        "name": "structure_strength",
+        "tooltip": "保持原始图像结构。"
+      },
+      "style_strength": {
+        "name": "style_strength",
+        "tooltip": "风格强度百分比。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "Mahiro": {
     "description": "修改引导以更多地侧重于正面条件提示的'方向'，而不是负面条件提示之间的差异。",
     "display_name": "真寻太可爱了，她应该有个更好的引导功能！！(。・ω・。)",
@@ -11225,19 +11428,28 @@
     }
   },
   "ResizeImageMaskNode": {
+    "description": "使用多种缩放方法调整图像或 mask 的大小。",
     "display_name": "调整图像/掩码大小",
     "inputs": {
       "input": {
         "name": "输入"
       },
       "resize_type": {
-        "name": "调整类型"
+        "name": "调整类型",
+        "tooltip": "选择如何调整大小：按精确尺寸、缩放因子、匹配另一张图像等。"
       },
-      "resize_type_multiplier": {
-        "name": "倍数"
+      "resize_type_crop": {
+        "name": "裁剪"
+      },
+      "resize_type_height": {
+        "name": "高度"
+      },
+      "resize_type_width": {
+        "name": "宽度"
       },
       "scale_method": {
-        "name": "缩放方法"
+        "name": "缩放方法",
+        "tooltip": "插值算法。'area' 适合缩小，'lanczos' 适合放大，'nearest-exact' 适合像素艺术。"
       }
     },
     "outputs": {
@@ -13382,6 +13594,84 @@
       }
     }
   },
+  "TencentImageToModelNode": {
+    "display_name": "Hunyuan3D：图像转模型（专业版）",
+    "inputs": {
+      "control_after_generate": {
+        "name": "生成后控制"
+      },
+      "face_count": {
+        "name": "面数"
+      },
+      "generate_type": {
+        "name": "生成类型"
+      },
+      "generate_type_pbr": {
+        "name": "PBR"
+      },
+      "image": {
+        "name": "图像"
+      },
+      "image_back": {
+        "name": "背面图像"
+      },
+      "image_left": {
+        "name": "左侧图像"
+      },
+      "image_right": {
+        "name": "右侧图像"
+      },
+      "model": {
+        "name": "模型",
+        "tooltip": "LowPoly 选项在 `3.1` 模型中不可用。"
+      },
+      "seed": {
+        "name": "种子",
+        "tooltip": "种子控制节点是否重新运行；无论种子如何，结果都是非确定性的。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "模型文件",
+        "tooltip": null
+      }
+    }
+  },
+  "TencentTextToModelNode": {
+    "display_name": "Hunyuan3D：文本转模型（专业版）",
+    "inputs": {
+      "control_after_generate": {
+        "name": "生成后控制"
+      },
+      "face_count": {
+        "name": "面数"
+      },
+      "generate_type": {
+        "name": "生成类型"
+      },
+      "generate_type_pbr": {
+        "name": "PBR"
+      },
+      "model": {
+        "name": "模型",
+        "tooltip": "LowPoly 选项在 `3.1` 模型中不可用。"
+      },
+      "prompt": {
+        "name": "提示词",
+        "tooltip": "支持最多 1024 个字符。"
+      },
+      "seed": {
+        "name": "种子",
+        "tooltip": "种子控制节点是否重新运行；无论种子如何，结果都是非确定性的。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "模型文件",
+        "tooltip": null
+      }
+    }
+  },
   "TextEncodeAceStepAudio": {
     "display_name": "文本音频编码（AceStep）",
     "inputs": {
@@ -13477,6 +13767,40 @@
       }
     }
   },
+  "TextEncodeZImageOmni": {
+    "display_name": "TextEncodeZImageOmni",
+    "inputs": {
+      "auto_resize_images": {
+        "name": "auto_resize_images"
+      },
+      "clip": {
+        "name": "clip"
+      },
+      "image1": {
+        "name": "image1"
+      },
+      "image2": {
+        "name": "image2"
+      },
+      "image3": {
+        "name": "image3"
+      },
+      "image_encoder": {
+        "name": "image_encoder"
+      },
+      "prompt": {
+        "name": "prompt"
+      },
+      "vae": {
+        "name": "vae"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "TextToLowercase": {
     "display_name": "文本半角",
     "inputs": {
@@ -13682,6 +14006,10 @@
         "name": "bucket模式",
         "tooltip": "启用分辨率 bucket 模式。开启后会先使用 分辨率Bucket 节点处理 Latent。"
       },
+      "bypass_mode": {
+        "name": "bypass_mode",
+        "tooltip": "为训练启用旁路模式。启用后，适配器通过前向钩子应用，而不是直接修改权重。适用于权重无法直接修改的量化模型。"
+      },
       "control_after_generate": {
         "name": "生成后控制"
       },
@@ -13754,10 +14082,6 @@
       "2": {
         "name": "损失",
         "tooltip": "损失历史图"
-      },
-      "3": {
-        "name": "步数",
-        "tooltip": "总训练步数"
       }
     }
   },
@@ -15652,6 +15976,79 @@
       }
     }
   },
+  "WanInfiniteTalkToVideo": {
+    "display_name": "WanInfiniteTalkToVideo",
+    "inputs": {
+      "audio_encoder_output_1": {
+        "name": "音频编码器输出1"
+      },
+      "audio_scale": {
+        "name": "音频缩放"
+      },
+      "clip_vision_output": {
+        "name": "clip视觉输出"
+      },
+      "height": {
+        "name": "高度"
+      },
+      "length": {
+        "name": "长度"
+      },
+      "mode": {
+        "name": "模式"
+      },
+      "model": {
+        "name": "模型"
+      },
+      "model_patch": {
+        "name": "模型补丁"
+      },
+      "motion_frame_count": {
+        "name": "运动帧数",
+        "tooltip": "用作运动上下文的前置帧数量。"
+      },
+      "negative": {
+        "name": "负向提示"
+      },
+      "positive": {
+        "name": "正向提示"
+      },
+      "previous_frames": {
+        "name": "前置帧"
+      },
+      "start_image": {
+        "name": "起始图像"
+      },
+      "vae": {
+        "name": "vae"
+      },
+      "width": {
+        "name": "宽度"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "模型",
+        "tooltip": null
+      },
+      "1": {
+        "name": "正向提示",
+        "tooltip": null
+      },
+      "2": {
+        "name": "负向提示",
+        "tooltip": null
+      },
+      "3": {
+        "name": "latent",
+        "tooltip": null
+      },
+      "4": {
+        "name": "裁剪图像",
+        "tooltip": null
+      }
+    }
+  },
   "WanMoveConcatTrack": {
     "display_name": "WanMove合并轨道",
     "inputs": {
@@ -16168,6 +16565,43 @@
       }
     }
   },
+  "WavespeedFlashVSRNode": {
+    "description": "快速高质量的视频超分辨率工具，可提升分辨率并恢复低分辨率或模糊视频的清晰度。",
+    "display_name": "FlashVSR 视频超分辨率",
+    "inputs": {
+      "target_resolution": {
+        "name": "target_resolution"
+      },
+      "video": {
+        "name": "video"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "WavespeedImageUpscaleNode": {
+    "description": "提升图像分辨率和质量，将照片放大至 4K 或 8K，获得清晰细致的效果。",
+    "display_name": "WaveSpeed 图像超分辨率",
+    "inputs": {
+      "image": {
+        "name": "image"
+      },
+      "model": {
+        "name": "model"
+      },
+      "target_resolution": {
+        "name": "target_resolution"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "WebcamCapture": {
     "display_name": "网络摄像头捕获",
     "inputs": {
diff --git a/src/locales/zh/settings.json b/src/locales/zh/settings.json
index b7533899a..8629ade00 100644
--- a/src/locales/zh/settings.json
+++ b/src/locales/zh/settings.json
@@ -52,7 +52,8 @@
     }
   },
   "Comfy_Canvas_SelectionToolbox": {
-    "name": "显示选择工具箱"
+    "name": "显示选择工具箱",
+    "tooltip": "当选择节点时显示浮动工具栏，便于快速访问常用操作。"
   },
   "Comfy_ConfirmClear": {
     "name": "清除工作流时需要确认"
@@ -147,7 +148,8 @@
       "Linear": "直线",
       "Spline": "曲线",
       "Straight": "直角线"
-    }
+    },
+    "tooltip": "控制画布上节点之间连接线的外观和可见性。"
   },
   "Comfy_Load3D_3DViewerEnable": {
     "name": "启用3D查看器（测试版）",
@@ -272,6 +274,10 @@
   "Comfy_Node_AllowImageSizeDraw": {
     "name": "在图像预览下方显示宽度×高度"
   },
+  "Comfy_Node_AlwaysShowAdvancedWidgets": {
+    "name": "始终在所有节点上显示高级控件",
+    "tooltip": "启用后，所有节点的高级控件将始终可见，无需单独展开。"
+  },
   "Comfy_Node_AutoSnapLinkToSlot": {
     "name": "连线自动吸附到节点接口",
     "tooltip": "在节点上拖动连线时，连线会自动吸附到节点的可用输入接口。"
@@ -470,6 +476,7 @@
     "tooltip": "贝塞尔控制点从重新路由中心点的偏移"
   },
   "pysssss_SnapToGrid": {
-    "name": "始终吸附到网格"
+    "name": "始终吸附到网格",
+    "tooltip": "启用后，移动或调整节点大小时会自动对齐到网格。"
   }
 }
diff --git a/src/main.ts b/src/main.ts
index 94af1fcd9..4d395dbb6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -27,9 +27,9 @@ import { i18n } from './i18n'
 import { isCloud } from '@/platform/distribution/types'
 
 if (isCloud) {
-  const { loadRemoteConfig } =
-    await import('@/platform/remoteConfig/remoteConfig')
-  await loadRemoteConfig()
+  const { refreshRemoteConfig } =
+    await import('@/platform/remoteConfig/refreshRemoteConfig')
+  await refreshRemoteConfig({ useAuth: false })
 }
 
 const ComfyUIPreset = definePreset(Aura, {
diff --git a/src/platform/assets/components/ActiveMediaAssetCard.stories.ts b/src/platform/assets/components/ActiveMediaAssetCard.stories.ts
new file mode 100644
index 000000000..1e32e96b2
--- /dev/null
+++ b/src/platform/assets/components/ActiveMediaAssetCard.stories.ts
@@ -0,0 +1,143 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import type { JobListItem } from '@/composables/queue/useJobList'
+
+import ActiveMediaAssetCard from './ActiveMediaAssetCard.vue'
+
+const meta: Meta<typeof ActiveMediaAssetCard> = {
+  title: 'Platform/Assets/ActiveMediaAssetCard',
+  component: ActiveMediaAssetCard
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const SAMPLE_PREVIEW =
+  'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg'
+
+function createJob(overrides: Partial<JobListItem> = {}): JobListItem {
+  return {
+    id: 'job-1',
+    title: 'Running...',
+    meta: 'Step 5/10',
+    state: 'running',
+    progressTotalPercent: 50,
+    progressCurrentPercent: 75,
+    ...overrides
+  }
+}
+
+export const Running: Story = {
+  decorators: [
+    () => ({
+      template: '<div style="max-width: 220px;"><story /></div>'
+    })
+  ],
+  args: {
+    job: createJob({
+      state: 'running',
+      progressTotalPercent: 65,
+      iconImageUrl: SAMPLE_PREVIEW
+    })
+  }
+}
+
+export const RunningWithoutPreview: Story = {
+  decorators: [
+    () => ({
+      template: '<div style="max-width: 220px;"><story /></div>'
+    })
+  ],
+  args: {
+    job: createJob({
+      state: 'running',
+      progressTotalPercent: 30
+    })
+  }
+}
+
+export const Pending: Story = {
+  decorators: [
+    () => ({
+      template: '<div style="max-width: 220px;"><story /></div>'
+    })
+  ],
+  args: {
+    job: createJob({
+      state: 'pending',
+      title: 'In queue...',
+      progressTotalPercent: undefined
+    })
+  }
+}
+
+export const Initialization: Story = {
+  decorators: [
+    () => ({
+      template: '<div style="max-width: 220px;"><story /></div>'
+    })
+  ],
+  args: {
+    job: createJob({
+      state: 'initialization',
+      title: 'Initializing...',
+      progressTotalPercent: undefined
+    })
+  }
+}
+
+export const Failed: Story = {
+  decorators: [
+    () => ({
+      template: '<div style="max-width: 220px;"><story /></div>'
+    })
+  ],
+  args: {
+    job: createJob({
+      state: 'failed',
+      title: 'Failed'
+    })
+  }
+}
+
+export const GridLayout: Story = {
+  render: () => ({
+    components: { ActiveMediaAssetCard },
+    setup() {
+      const jobs: JobListItem[] = [
+        createJob({
+          id: 'job-1',
+          state: 'running',
+          progressTotalPercent: 75,
+          iconImageUrl: SAMPLE_PREVIEW
+        }),
+        createJob({
+          id: 'job-2',
+          state: 'running',
+          progressTotalPercent: 45
+        }),
+        createJob({
+          id: 'job-3',
+          state: 'pending',
+          title: 'In queue...',
+          progressTotalPercent: undefined
+        }),
+        createJob({
+          id: 'job-4',
+          state: 'failed',
+          title: 'Failed'
+        })
+      ]
+      return { jobs }
+    },
+    template: `
+      <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; padding: 8px;">
+        <ActiveMediaAssetCard
+          v-for="job in jobs"
+          :key="job.id"
+          :job="job"
+        />
+      </div>
+    `
+  })
+}
diff --git a/src/platform/assets/components/ActiveMediaAssetCard.test.ts b/src/platform/assets/components/ActiveMediaAssetCard.test.ts
new file mode 100644
index 000000000..c653ae0be
--- /dev/null
+++ b/src/platform/assets/components/ActiveMediaAssetCard.test.ts
@@ -0,0 +1,111 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import ActiveJobCard from './ActiveMediaAssetCard.vue'
+
+import type { JobListItem } from '@/composables/queue/useJobList'
+
+vi.mock('@/composables/useProgressBarBackground', () => ({
+  useProgressBarBackground: () => ({
+    progressBarPrimaryClass: 'bg-blue-500',
+    hasProgressPercent: (val: number | undefined) => typeof val === 'number',
+    progressPercentStyle: (val: number) => ({ width: `${val}%` })
+  })
+}))
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      sideToolbar: {
+        activeJobStatus: 'Active job: {status}'
+      }
+    }
+  }
+})
+
+const createJob = (overrides: Partial<JobListItem> = {}): JobListItem => ({
+  id: 'test-job-1',
+  title: 'Running...',
+  meta: 'Step 5/10',
+  state: 'running',
+  progressTotalPercent: 50,
+  progressCurrentPercent: 75,
+  ...overrides
+})
+
+const mountComponent = (job: JobListItem) =>
+  mount(ActiveJobCard, {
+    props: { job },
+    global: {
+      plugins: [i18n]
+    }
+  })
+
+describe('ActiveJobCard', () => {
+  it('displays percentage and progress bar when job is running', () => {
+    const wrapper = mountComponent(
+      createJob({ state: 'running', progressTotalPercent: 65 })
+    )
+
+    expect(wrapper.text()).toContain('65%')
+    const progressBar = wrapper.find('.bg-blue-500')
+    expect(progressBar.exists()).toBe(true)
+    expect(progressBar.attributes('style')).toContain('width: 65%')
+  })
+
+  it('displays status text when job is pending', () => {
+    const wrapper = mountComponent(
+      createJob({
+        state: 'pending',
+        title: 'In queue...',
+        progressTotalPercent: undefined
+      })
+    )
+
+    expect(wrapper.text()).toContain('In queue...')
+    const progressBar = wrapper.find('.bg-blue-500')
+    expect(progressBar.exists()).toBe(false)
+  })
+
+  it('shows spinner for pending state', () => {
+    const wrapper = mountComponent(createJob({ state: 'pending' }))
+
+    const spinner = wrapper.find('.icon-\\[lucide--loader-circle\\]')
+    expect(spinner.exists()).toBe(true)
+    expect(spinner.classes()).toContain('animate-spin')
+  })
+
+  it('shows error icon for failed state', () => {
+    const wrapper = mountComponent(
+      createJob({ state: 'failed', title: 'Failed' })
+    )
+
+    const errorIcon = wrapper.find('.icon-\\[lucide--circle-alert\\]')
+    expect(errorIcon.exists()).toBe(true)
+    expect(wrapper.text()).toContain('Failed')
+  })
+
+  it('shows preview image when running with iconImageUrl', () => {
+    const wrapper = mountComponent(
+      createJob({
+        state: 'running',
+        iconImageUrl: 'https://example.com/preview.jpg'
+      })
+    )
+
+    const img = wrapper.find('img')
+    expect(img.exists()).toBe(true)
+    expect(img.attributes('src')).toBe('https://example.com/preview.jpg')
+  })
+
+  it('has proper accessibility attributes', () => {
+    const wrapper = mountComponent(createJob({ title: 'Generating...' }))
+
+    const container = wrapper.find('[role="status"]')
+    expect(container.exists()).toBe(true)
+    expect(container.attributes('aria-label')).toBe('Active job: Generating...')
+  })
+})
diff --git a/src/platform/assets/components/ActiveMediaAssetCard.vue b/src/platform/assets/components/ActiveMediaAssetCard.vue
new file mode 100644
index 000000000..8121d9bc3
--- /dev/null
+++ b/src/platform/assets/components/ActiveMediaAssetCard.vue
@@ -0,0 +1,85 @@
+<template>
+  <div
+    role="status"
+    :aria-label="t('sideToolbar.activeJobStatus', { status: statusText })"
+    class="flex flex-col gap-2 p-2 rounded-lg"
+  >
+    <!-- Thumbnail -->
+    <div class="relative aspect-square overflow-hidden rounded-lg">
+      <!-- Running state with preview image -->
+      <img
+        v-if="isRunning && job.iconImageUrl"
+        :src="job.iconImageUrl"
+        :alt="statusText"
+        class="size-full object-cover"
+      />
+      <!-- Placeholder for queued/failed states or running without preview -->
+      <div
+        v-else
+        class="absolute inset-0 flex items-center justify-center bg-modal-card-placeholder-background"
+      >
+        <!-- Spinner for queued/initialization states -->
+        <i
+          v-if="isQueued"
+          class="icon-[lucide--loader-circle] size-8 animate-spin text-muted-foreground"
+        />
+        <!-- Error icon for failed state -->
+        <i
+          v-else-if="isFailed"
+          class="icon-[lucide--circle-alert] size-8 text-red-500"
+        />
+        <!-- Spinner for running without preview -->
+        <i
+          v-else
+          class="icon-[lucide--loader-circle] size-8 animate-spin text-muted-foreground"
+        />
+      </div>
+    </div>
+
+    <!-- Footer: Progress bar or status text -->
+    <div class="flex gap-1.5 items-center h-5">
+      <!-- Running state: percentage + progress bar -->
+      <template v-if="isRunning && hasProgressPercent(progressPercent)">
+        <span class="shrink-0 text-sm text-muted-foreground">
+          {{ Math.round(progressPercent ?? 0) }}%
+        </span>
+        <div class="flex-1 relative h-1 rounded-sm bg-secondary-background">
+          <div
+            :class="progressBarPrimaryClass"
+            :style="progressPercentStyle(progressPercent)"
+          />
+        </div>
+      </template>
+      <!-- Non-running states: status text only -->
+      <template v-else>
+        <div class="w-full truncate text-center text-sm text-muted-foreground">
+          {{ statusText }}
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import type { JobListItem } from '@/composables/queue/useJobList'
+import { useProgressBarBackground } from '@/composables/useProgressBarBackground'
+
+const { job } = defineProps<{ job: JobListItem }>()
+
+const { t } = useI18n()
+
+const { progressBarPrimaryClass, hasProgressPercent, progressPercentStyle } =
+  useProgressBarBackground()
+
+const statusText = computed(() => job.title)
+const progressPercent = computed(() => job.progressTotalPercent)
+
+const isQueued = computed(
+  () => job.state === 'pending' || job.state === 'initialization'
+)
+const isRunning = computed(() => job.state === 'running')
+const isFailed = computed(() => job.state === 'failed')
+</script>
diff --git a/src/platform/assets/components/AssetBadgeGroup.vue b/src/platform/assets/components/AssetBadgeGroup.vue
index 5c85713e4..46c39e917 100644
--- a/src/platform/assets/components/AssetBadgeGroup.vue
+++ b/src/platform/assets/components/AssetBadgeGroup.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="absolute left-2 bottom-2 flex flex-wrap justify-start gap-1">
+  <div
+    class="absolute left-2 bottom-2 flex flex-wrap justify-start gap-1 select-none"
+  >
     <span
       v-for="badge in badges"
       :key="badge.label"
diff --git a/src/platform/assets/components/AssetBrowserModal.test.ts b/src/platform/assets/components/AssetBrowserModal.test.ts
index 87135b468..6fb027519 100644
--- a/src/platform/assets/components/AssetBrowserModal.test.ts
+++ b/src/platform/assets/components/AssetBrowserModal.test.ts
@@ -6,6 +6,9 @@ import AssetBrowserModal from '@/platform/assets/components/AssetBrowserModal.vu
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import { useAssetsStore } from '@/stores/assetsStore'
 
+const mockAssetsByKey = vi.hoisted(() => new Map<string, AssetItem[]>())
+const mockLoadingByKey = vi.hoisted(() => new Map<string, boolean>())
+
 vi.mock('@/i18n', () => ({
   t: (key: string, params?: Record<string, string>) =>
     params ? `${key}:${JSON.stringify(params)}` : key,
@@ -13,13 +16,20 @@ vi.mock('@/i18n', () => ({
 }))
 
 vi.mock('@/stores/assetsStore', () => {
-  const store = {
-    modelAssetsByNodeType: new Map<string, AssetItem[]>(),
-    modelLoadingByNodeType: new Map<string, boolean>(),
-    updateModelsForNodeType: vi.fn(),
-    updateModelsForTag: vi.fn()
+  const getAssets = vi.fn((key: string) => mockAssetsByKey.get(key) ?? [])
+  const isModelLoading = vi.fn(
+    (key: string) => mockLoadingByKey.get(key) ?? false
+  )
+  const updateModelsForNodeType = vi.fn()
+  const updateModelsForTag = vi.fn()
+  return {
+    useAssetsStore: () => ({
+      getAssets,
+      isModelLoading,
+      updateModelsForNodeType,
+      updateModelsForTag
+    })
   }
-  return { useAssetsStore: () => store }
 })
 
 vi.mock('@/stores/modelToNodeStore', () => ({
@@ -183,12 +193,10 @@ describe('AssetBrowserModal', () => {
     })
   }
 
-  const mockStore = useAssetsStore()
-
   beforeEach(() => {
     vi.resetAllMocks()
-    mockStore.modelAssetsByNodeType.clear()
-    mockStore.modelLoadingByNodeType.clear()
+    mockAssetsByKey.clear()
+    mockLoadingByKey.clear()
   })
 
   describe('Integration with useAssetBrowser', () => {
@@ -197,7 +205,7 @@ describe('AssetBrowserModal', () => {
         createTestAsset('asset1', 'Model A', 'checkpoints'),
         createTestAsset('asset2', 'Model B', 'loras')
       ]
-      mockStore.modelAssetsByNodeType.set('CheckpointLoaderSimple', assets)
+      mockAssetsByKey.set('CheckpointLoaderSimple', assets)
 
       const wrapper = createWrapper({ nodeType: 'CheckpointLoaderSimple' })
       await flushPromises()
@@ -214,7 +222,7 @@ describe('AssetBrowserModal', () => {
         createTestAsset('c1', 'model.safetensors', 'checkpoints'),
         createTestAsset('l1', 'lora.pt', 'loras')
       ]
-      mockStore.modelAssetsByNodeType.set('CheckpointLoaderSimple', assets)
+      mockAssetsByKey.set('CheckpointLoaderSimple', assets)
 
       const wrapper = createWrapper({
         nodeType: 'CheckpointLoaderSimple',
@@ -231,17 +239,18 @@ describe('AssetBrowserModal', () => {
 
   describe('Data fetching', () => {
     it('triggers store refresh for node type on mount', async () => {
+      const store = useAssetsStore()
       createWrapper({ nodeType: 'CheckpointLoaderSimple' })
       await flushPromises()
 
-      expect(mockStore.updateModelsForNodeType).toHaveBeenCalledWith(
+      expect(store.updateModelsForNodeType).toHaveBeenCalledWith(
         'CheckpointLoaderSimple'
       )
     })
 
     it('displays cached assets immediately from store', async () => {
       const assets = [createTestAsset('asset1', 'Cached Model', 'checkpoints')]
-      mockStore.modelAssetsByNodeType.set('CheckpointLoaderSimple', assets)
+      mockAssetsByKey.set('CheckpointLoaderSimple', assets)
 
       const wrapper = createWrapper({ nodeType: 'CheckpointLoaderSimple' })
 
@@ -253,15 +262,16 @@ describe('AssetBrowserModal', () => {
     })
 
     it('triggers store refresh for asset type (tag) on mount', async () => {
+      const store = useAssetsStore()
       createWrapper({ assetType: 'models' })
       await flushPromises()
 
-      expect(mockStore.updateModelsForTag).toHaveBeenCalledWith('models')
+      expect(store.updateModelsForTag).toHaveBeenCalledWith('models')
     })
 
     it('uses tag: prefix for cache key when assetType is provided', async () => {
       const assets = [createTestAsset('asset1', 'Tagged Model', 'models')]
-      mockStore.modelAssetsByNodeType.set('tag:models', assets)
+      mockAssetsByKey.set('tag:models', assets)
 
       const wrapper = createWrapper({ assetType: 'models' })
       await flushPromises()
@@ -277,7 +287,7 @@ describe('AssetBrowserModal', () => {
   describe('Asset Selection', () => {
     it('emits asset-select event when asset is selected', async () => {
       const assets = [createTestAsset('asset1', 'Model A', 'checkpoints')]
-      mockStore.modelAssetsByNodeType.set('CheckpointLoaderSimple', assets)
+      mockAssetsByKey.set('CheckpointLoaderSimple', assets)
 
       const wrapper = createWrapper({ nodeType: 'CheckpointLoaderSimple' })
       await flushPromises()
@@ -290,7 +300,7 @@ describe('AssetBrowserModal', () => {
 
     it('executes onSelect callback when provided', async () => {
       const assets = [createTestAsset('asset1', 'Model A', 'checkpoints')]
-      mockStore.modelAssetsByNodeType.set('CheckpointLoaderSimple', assets)
+      mockAssetsByKey.set('CheckpointLoaderSimple', assets)
 
       const onSelect = vi.fn()
       const wrapper = createWrapper({
@@ -333,7 +343,7 @@ describe('AssetBrowserModal', () => {
         createTestAsset('asset1', 'Model A', 'checkpoints'),
         createTestAsset('asset2', 'Model B', 'loras')
       ]
-      mockStore.modelAssetsByNodeType.set('CheckpointLoaderSimple', assets)
+      mockAssetsByKey.set('CheckpointLoaderSimple', assets)
 
       const wrapper = createWrapper({
         nodeType: 'CheckpointLoaderSimple',
@@ -366,7 +376,7 @@ describe('AssetBrowserModal', () => {
 
     it('passes computed contentTitle to BaseModalLayout when no title prop', async () => {
       const assets = [createTestAsset('asset1', 'Model A', 'checkpoints')]
-      mockStore.modelAssetsByNodeType.set('CheckpointLoaderSimple', assets)
+      mockAssetsByKey.set('CheckpointLoaderSimple', assets)
 
       const wrapper = createWrapper({ nodeType: 'CheckpointLoaderSimple' })
       await flushPromises()
diff --git a/src/platform/assets/components/AssetBrowserModal.vue b/src/platform/assets/components/AssetBrowserModal.vue
index b7db7494c..2fd343d42 100644
--- a/src/platform/assets/components/AssetBrowserModal.vue
+++ b/src/platform/assets/components/AssetBrowserModal.vue
@@ -1,27 +1,31 @@
 <template>
   <BaseModalLayout
+    v-model:right-panel-open="isRightPanelOpen"
     data-component-id="AssetBrowserModal"
     class="size-full max-h-full max-w-full min-w-0"
     :content-title="displayTitle"
+    :right-panel-title="$t('assetBrowser.modelInfo.title')"
     @close="handleClose"
   >
+    <template v-if="shouldShowLeftPanel" #leftPanelHeaderTitle>
+      <i class="icon-[comfy--ai-model] size-4" />
+      <h2 class="flex-auto select-none text-base font-semibold text-nowrap">
+        {{ displayTitle }}
+      </h2>
+    </template>
     <template v-if="shouldShowLeftPanel" #leftPanel>
       <LeftSidePanel
-        v-model="selectedCategory"
+        v-model="selectedNavItem"
         data-component-id="AssetBrowserModal-LeftSidePanel"
-        :nav-items="availableCategories"
-      >
-        <template #header-icon>
-          <div class="icon-[lucide--folder] size-4" />
-        </template>
-        <template #header-title>
-          <span class="capitalize">{{ displayTitle }}</span>
-        </template>
-      </LeftSidePanel>
+        :nav-items
+      />
     </template>
 
     <template #header>
-      <div class="flex w-full items-center justify-between gap-2">
+      <div
+        class="flex w-full items-center justify-between gap-2"
+        @click.self="focusedAsset = null"
+      >
         <SearchBox
           v-model="searchQuery"
           :autofocus="true"
@@ -47,8 +51,8 @@
     <template #contentFilter>
       <AssetFilterBar
         :assets="categoryFilteredAssets"
-        :all-assets="fetchedAssets"
         @filter-change="updateFilters"
+        @click.self="focusedAsset = null"
       />
     </template>
 
@@ -56,16 +60,31 @@
       <AssetGrid
         :assets="filteredAssets"
         :loading="isLoading"
+        :focused-asset-id="focusedAsset?.id"
+        :empty-message
+        @asset-focus="handleAssetFocus"
         @asset-select="handleAssetSelectAndEmit"
         @asset-deleted="refreshAssets"
+        @asset-show-info="handleShowInfo"
+        @click="focusedAsset = null"
       />
     </template>
+
+    <template #rightPanel>
+      <ModelInfoPanel v-if="focusedAsset" :asset="focusedAsset" :cache-key />
+      <div
+        v-else
+        class="flex h-full items-center justify-center break-words p-6 text-center text-muted"
+      >
+        {{ $t('assetBrowser.modelInfo.selectModelPrompt') }}
+      </div>
+    </template>
   </BaseModalLayout>
 </template>
 
 <script setup lang="ts">
 import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
-import { computed, provide } from 'vue'
+import { computed, provide, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import SearchBox from '@/components/common/SearchBox.vue'
@@ -74,8 +93,10 @@ import BaseModalLayout from '@/components/widget/layout/BaseModalLayout.vue'
 import LeftSidePanel from '@/components/widget/panel/LeftSidePanel.vue'
 import AssetFilterBar from '@/platform/assets/components/AssetFilterBar.vue'
 import AssetGrid from '@/platform/assets/components/AssetGrid.vue'
+import ModelInfoPanel from '@/platform/assets/components/modelInfo/ModelInfoPanel.vue'
 import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
 import { useAssetBrowser } from '@/platform/assets/composables/useAssetBrowser'
+import { useModelTypes } from '@/platform/assets/composables/useModelTypes'
 import { useModelUpload } from '@/platform/assets/composables/useModelUpload'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import { formatCategoryLabel } from '@/platform/assets/utils/categoryLabel'
@@ -112,44 +133,47 @@ const cacheKey = computed(() => {
 })
 
 // Read directly from store cache - reactive to any store updates
-const fetchedAssets = computed(
-  () => assetStore.modelAssetsByNodeType.get(cacheKey.value) ?? []
-)
+const fetchedAssets = computed(() => assetStore.getAssets(cacheKey.value))
 
-const isStoreLoading = computed(
-  () => assetStore.modelLoadingByNodeType.get(cacheKey.value) ?? false
-)
+const isStoreLoading = computed(() => assetStore.isModelLoading(cacheKey.value))
 
 // Only show loading spinner when loading AND no cached data
 const isLoading = computed(
   () => isStoreLoading.value && fetchedAssets.value.length === 0
 )
 
-async function refreshAssets(): Promise<AssetItem[]> {
+async function refreshAssets(): Promise<void> {
   if (props.nodeType) {
-    return await assetStore.updateModelsForNodeType(props.nodeType)
+    await assetStore.updateModelsForNodeType(props.nodeType)
+  } else if (props.assetType) {
+    await assetStore.updateModelsForTag(props.assetType)
   }
-  if (props.assetType) {
-    return await assetStore.updateModelsForTag(props.assetType)
-  }
-  return []
 }
 
 // Trigger background refresh on mount
 void refreshAssets()
 
+// Eagerly fetch model types so they're available when ModelInfoPanel loads
+const { fetchModelTypes } = useModelTypes()
+void fetchModelTypes()
+
 const { isUploadButtonEnabled, showUploadDialog } =
   useModelUpload(refreshAssets)
 
 const {
   searchQuery,
+  selectedNavItem,
   selectedCategory,
-  availableCategories,
+  navItems,
   categoryFilteredAssets,
   filteredAssets,
+  isImportedSelected,
   updateFilters
 } = useAssetBrowser(fetchedAssets)
 
+const focusedAsset = ref<AssetDisplayItem | null>(null)
+const isRightPanelOpen = ref(false)
+
 const primaryCategoryTag = computed(() => {
   const assets = fetchedAssets.value ?? []
   const tagFromAssets = assets
@@ -186,15 +210,30 @@ const shouldShowLeftPanel = computed(() => {
   return props.showLeftPanel ?? true
 })
 
+const emptyMessage = computed(() => {
+  if (!isImportedSelected.value) return undefined
+
+  return isUploadButtonEnabled.value
+    ? t('assetBrowser.emptyImported.canImport')
+    : t('assetBrowser.emptyImported.restricted')
+})
+
 function handleClose() {
   props.onClose?.()
   emit('close')
 }
 
+function handleAssetFocus(asset: AssetDisplayItem) {
+  focusedAsset.value = asset
+}
+
+function handleShowInfo(asset: AssetDisplayItem) {
+  focusedAsset.value = asset
+  isRightPanelOpen.value = true
+}
+
 function handleAssetSelectAndEmit(asset: AssetDisplayItem) {
   emit('asset-select', asset)
-  // onSelect callback is provided by dialog composable layer
-  // It handles the appropriate transformation (filename extraction or full asset)
   props.onSelect?.(asset)
 }
 </script>
diff --git a/src/platform/assets/components/AssetCard.vue b/src/platform/assets/components/AssetCard.vue
index 11e404d41..2b1b6fbe4 100644
--- a/src/platform/assets/components/AssetCard.vue
+++ b/src/platform/assets/components/AssetCard.vue
@@ -7,32 +7,30 @@
     :tabindex="interactive ? 0 : -1"
     :class="
       cn(
-        'rounded-2xl overflow-hidden transition-all duration-200 bg-modal-card-background p-2 gap-2 flex flex-col h-full',
+        'select-none rounded-2xl overflow-hidden transition-all duration-200 bg-modal-card-background p-2 gap-2 flex flex-col h-full',
         interactive &&
-          'group appearance-none bg-transparent m-0 outline-none text-left hover:bg-secondary-background focus:bg-secondary-background border-none focus:outline-solid outline-base-foreground outline-4'
+          'group appearance-none bg-transparent m-0 outline-none text-left hover:bg-secondary-background focus:bg-secondary-background border-none focus:outline-solid outline-base-foreground outline-4',
+        focused && 'bg-secondary-background outline-solid'
       )
     "
+    @click.stop="interactive && $emit('focus', asset)"
+    @focus="interactive && $emit('focus', asset)"
     @keydown.enter.self="interactive && $emit('select', asset)"
   >
     <div class="relative aspect-square w-full overflow-hidden rounded-xl">
       <div
         v-if="isLoading || error"
         class="flex size-full cursor-pointer items-center justify-center bg-gradient-to-br from-smoke-400 via-smoke-800 to-charcoal-400"
-        role="button"
-        @click.self="interactive && $emit('select', asset)"
       />
       <img
         v-else
         :src="asset.preview_url"
         :alt="displayName"
         class="size-full object-cover cursor-pointer"
-        role="button"
-        @click.self="interactive && $emit('select', asset)"
       />
 
       <AssetBadgeGroup :badges="asset.badges" />
       <IconGroup
-        v-if="showAssetOptions"
         :class="
           cn(
             'absolute top-2 right-2 invisible group-hover:visible',
@@ -40,18 +38,21 @@
           )
         "
       >
-        <MoreButton ref="dropdown-menu-button" size="sm">
+        <Button
+          v-tooltip.bottom="$t('assetBrowser.modelInfo.title')"
+          :aria-label="$t('assetBrowser.modelInfo.title')"
+          variant="secondary"
+          size="sm"
+          @click.stop="$emit('showInfo', asset)"
+        >
+          <i class="icon-[lucide--info]" />
+        </Button>
+        <MoreButton
+          v-if="showAssetOptions"
+          ref="dropdown-menu-button"
+          size="sm"
+        >
           <template #default>
-            <Button
-              v-if="flags.assetRenameEnabled"
-              variant="secondary"
-              size="md"
-              class="justify-start"
-              @click="startAssetRename"
-            >
-              <i class="icon-[lucide--pencil]" />
-              <span>{{ $t('g.rename') }}</span>
-            </Button>
             <Button
               v-if="flags.assetDeletionEnabled"
               variant="secondary"
@@ -72,43 +73,59 @@
         v-tooltip.top="{ value: displayName, showDelay: tooltipDelay }"
         :class="
           cn(
-            'mb-2 m-0 text-base font-semibold line-clamp-2 wrap-anywhere',
+            'm-0 text-sm font-semibold line-clamp-2 wrap-anywhere',
             'text-base-foreground'
           )
         "
       >
-        <EditableText
-          :model-value="displayName"
-          :is-editing="isEditing"
-          :input-attrs="{ 'data-testid': 'asset-name-input' }"
-          @edit="assetRename"
-          @cancel="assetRename()"
-        />
+        {{ displayName }}
       </h3>
       <p
         :id="descId"
         v-tooltip.top="{ value: asset.description, showDelay: tooltipDelay }"
         :class="
           cn(
-            'm-0 text-sm leading-6 overflow-hidden [-webkit-box-orient:vertical] [-webkit-line-clamp:2] [display:-webkit-box] text-muted-foreground'
+            'm-0 text-sm line-clamp-2 [-webkit-box-orient:vertical] [-webkit-line-clamp:2] [display:-webkit-box] text-muted-foreground'
           )
         "
       >
         {{ asset.description }}
       </p>
-      <div class="flex gap-4 text-xs text-muted-foreground mt-auto">
-        <span v-if="asset.stats.stars" class="flex items-center gap-1">
-          <i class="icon-[lucide--star] size-3" />
-          {{ asset.stats.stars }}
-        </span>
-        <span v-if="asset.stats.downloadCount" class="flex items-center gap-1">
-          <i class="icon-[lucide--download] size-3" />
-          {{ asset.stats.downloadCount }}
-        </span>
-        <span v-if="asset.stats.formattedDate" class="flex items-center gap-1">
-          <i class="icon-[lucide--clock] size-3" />
-          {{ asset.stats.formattedDate }}
-        </span>
+      <div class="flex items-center justify-between gap-2 mt-auto">
+        <div class="flex gap-3 text-xs text-muted-foreground">
+          <span v-if="asset.stats.stars" class="flex items-center gap-1">
+            <i class="icon-[lucide--star] size-3" />
+            {{ asset.stats.stars }}
+          </span>
+          <span
+            v-if="asset.stats.downloadCount"
+            class="flex items-center gap-1"
+          >
+            <i class="icon-[lucide--download] size-3" />
+            {{ asset.stats.downloadCount }}
+          </span>
+          <span
+            v-if="asset.stats.formattedDate"
+            class="flex items-center gap-1"
+          >
+            <i class="icon-[lucide--clock] size-3" />
+            {{ asset.stats.formattedDate }}
+          </span>
+        </div>
+        <Button
+          v-if="interactive"
+          variant="secondary"
+          size="lg"
+          class="shrink-0 relative"
+          @click.stop="handleSelect"
+        >
+          {{ $t('g.use') }}
+          <StatusBadge
+            v-if="isNewlyImported"
+            severity="contrast"
+            class="absolute -top-0.5 -right-0.5"
+          />
+        </Button>
       </div>
     </div>
   </div>
@@ -121,33 +138,37 @@ import { useI18n } from 'vue-i18n'
 
 import IconGroup from '@/components/button/IconGroup.vue'
 import MoreButton from '@/components/button/MoreButton.vue'
-import EditableText from '@/components/common/EditableText.vue'
+import StatusBadge from '@/components/common/StatusBadge.vue'
 import { showConfirmDialog } from '@/components/dialog/confirm/confirmDialog'
 import Button from '@/components/ui/button/Button.vue'
 import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import AssetBadgeGroup from '@/platform/assets/components/AssetBadgeGroup.vue'
 import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
 import { assetService } from '@/platform/assets/services/assetService'
+import { getAssetDisplayName } from '@/platform/assets/utils/assetMetadataUtils'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { useToastStore } from '@/platform/updates/common/toastStore'
+import { useAssetDownloadStore } from '@/stores/assetDownloadStore'
 import { useDialogStore } from '@/stores/dialogStore'
 import { cn } from '@/utils/tailwindUtil'
 
-const { asset, interactive } = defineProps<{
+const { asset, interactive, focused } = defineProps<{
   asset: AssetDisplayItem
   interactive?: boolean
+  focused?: boolean
 }>()
 
 const emit = defineEmits<{
+  focus: [asset: AssetDisplayItem]
   select: [asset: AssetDisplayItem]
   deleted: [asset: AssetDisplayItem]
+  showInfo: [asset: AssetDisplayItem]
 }>()
 
 const { t } = useI18n()
 const settingStore = useSettingStore()
 const { closeDialog } = useDialogStore()
 const { flags } = useFeatureFlags()
-const toastStore = useToastStore()
+const { isDownloadedThisSession, acknowledgeAsset } = useAssetDownloadStore()
 
 const dropdownMenuButton = useTemplateRef<InstanceType<typeof MoreButton>>(
   'dropdown-menu-button'
@@ -156,10 +177,9 @@ const dropdownMenuButton = useTemplateRef<InstanceType<typeof MoreButton>>(
 const titleId = useId()
 const descId = useId()
 
-const isEditing = ref(false)
-const newNameRef = ref<string>()
+const displayName = computed(() => getAssetDisplayName(asset))
 
-const displayName = computed(() => newNameRef.value ?? asset.name)
+const isNewlyImported = computed(() => isDownloadedThisSession(asset.id))
 
 const showAssetOptions = computed(
   () =>
@@ -176,6 +196,11 @@ const { isLoading, error } = useImage({
   alt: asset.name
 })
 
+function handleSelect() {
+  acknowledgeAsset(asset.id)
+  emit('select', asset)
+}
+
 function confirmDeletion() {
   dropdownMenuButton.value?.hide()
   const assetName = toValue(displayName)
@@ -225,32 +250,4 @@ function confirmDeletion() {
     }
   })
 }
-
-function startAssetRename() {
-  dropdownMenuButton.value?.hide()
-  isEditing.value = true
-}
-
-async function assetRename(newName?: string) {
-  isEditing.value = false
-  if (newName) {
-    // Optimistic update
-    newNameRef.value = newName
-    try {
-      const result = await assetService.updateAsset(asset.id, {
-        name: newName
-      })
-      // Update with the actual name once the server responds
-      newNameRef.value = result.name
-    } catch (err: unknown) {
-      console.error(err)
-      toastStore.add({
-        severity: 'error',
-        summary: t('assetBrowser.rename.failed'),
-        life: 10_000
-      })
-      newNameRef.value = undefined
-    }
-  }
-}
 </script>
diff --git a/src/platform/assets/components/AssetFilterBar.test.ts b/src/platform/assets/components/AssetFilterBar.test.ts
index 49d58b55b..410536231 100644
--- a/src/platform/assets/components/AssetFilterBar.test.ts
+++ b/src/platform/assets/components/AssetFilterBar.test.ts
@@ -10,11 +10,15 @@ import {
   createAssetWithoutBaseModel
 } from '@/platform/assets/fixtures/ui-mock-assets'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import { createI18n } from 'vue-i18n'
 
-// Mock @/i18n directly since component imports { t } from '@/i18n'
-vi.mock('@/i18n', () => ({
-  t: (key: string) => key
-}))
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {}
+  }
+})
 
 // Mock components with minimal functionality for business logic testing
 vi.mock('@/components/input/MultiSelect.vue', () => ({
@@ -66,9 +70,7 @@ function mountAssetFilterBar(props = {}) {
   return mount(AssetFilterBar, {
     props,
     global: {
-      mocks: {
-        $t: (key: string) => key
-      }
+      plugins: [i18n]
     }
   })
 }
@@ -86,10 +88,6 @@ function findBaseModelsFilter(wrapper: ReturnType<typeof mountAssetFilterBar>) {
   return wrapper.findComponent('[data-component-id="asset-filter-base-models"]')
 }
 
-function findOwnershipFilter(wrapper: ReturnType<typeof mountAssetFilterBar>) {
-  return wrapper.findComponent('[data-component-id="asset-filter-ownership"]')
-}
-
 function findSortFilter(wrapper: ReturnType<typeof mountAssetFilterBar>) {
   return wrapper.findComponent('[data-component-id="asset-filter-sort"]')
 }
@@ -268,90 +266,5 @@ describe('AssetFilterBar', () => {
       expect(fileFormatSelect.exists()).toBe(false)
       expect(baseModelSelect.exists()).toBe(false)
     })
-
-    it('hides ownership filter when no mutable assets', () => {
-      const assets = [
-        createAssetWithSpecificExtension('safetensors', true) // immutable
-      ]
-      const wrapper = mountAssetFilterBar({ assets })
-
-      const ownershipSelect = findOwnershipFilter(wrapper)
-      expect(ownershipSelect.exists()).toBe(false)
-    })
-
-    it('shows ownership filter when mutable assets exist', () => {
-      const assets = [
-        createAssetWithSpecificExtension('safetensors', false) // mutable
-      ]
-      const wrapper = mountAssetFilterBar({ assets })
-
-      const ownershipSelect = findOwnershipFilter(wrapper)
-      expect(ownershipSelect.exists()).toBe(true)
-    })
-
-    it('shows ownership filter when mixed assets exist', () => {
-      const assets = [
-        createAssetWithSpecificExtension('safetensors', true), // immutable
-        createAssetWithSpecificExtension('ckpt', false) // mutable
-      ]
-      const wrapper = mountAssetFilterBar({ assets })
-
-      const ownershipSelect = findOwnershipFilter(wrapper)
-      expect(ownershipSelect.exists()).toBe(true)
-    })
-
-    it('shows ownership filter with allAssets when provided', () => {
-      const assets = [
-        createAssetWithSpecificExtension('safetensors', true) // immutable
-      ]
-      const allAssets = [
-        createAssetWithSpecificExtension('safetensors', true), // immutable
-        createAssetWithSpecificExtension('ckpt', false) // mutable
-      ]
-      const wrapper = mountAssetFilterBar({ assets, allAssets })
-
-      const ownershipSelect = findOwnershipFilter(wrapper)
-      expect(ownershipSelect.exists()).toBe(true)
-    })
-  })
-
-  describe('Ownership Filter', () => {
-    it('emits ownership filter changes', async () => {
-      const assets = [
-        createAssetWithSpecificExtension('safetensors', false) // mutable
-      ]
-      const wrapper = mountAssetFilterBar({ assets })
-
-      const ownershipSelect = findOwnershipFilter(wrapper)
-      expect(ownershipSelect.exists()).toBe(true)
-
-      const ownershipSelectElement = ownershipSelect.find('select')
-      ownershipSelectElement.element.value = 'my-models'
-      await ownershipSelectElement.trigger('change')
-      await nextTick()
-
-      const emitted = wrapper.emitted('filterChange')
-      expect(emitted).toBeTruthy()
-
-      const filterState = emitted![emitted!.length - 1][0] as FilterState
-      expect(filterState.ownership).toBe('my-models')
-    })
-
-    it('ownership filter defaults to "all"', async () => {
-      const assets = [
-        createAssetWithSpecificExtension('safetensors', false) // mutable
-      ]
-      const wrapper = mountAssetFilterBar({ assets })
-
-      const sortSelect = findSortFilter(wrapper)
-      const sortSelectElement = sortSelect.find('select')
-      sortSelectElement.element.value = 'recent'
-      await sortSelectElement.trigger('change')
-      await nextTick()
-
-      const emitted = wrapper.emitted('filterChange')
-      const filterState = emitted![0][0] as FilterState
-      expect(filterState.ownership).toBe('all')
-    })
   })
 })
diff --git a/src/platform/assets/components/AssetFilterBar.vue b/src/platform/assets/components/AssetFilterBar.vue
index 560e3138e..61ad40ec8 100644
--- a/src/platform/assets/components/AssetFilterBar.vue
+++ b/src/platform/assets/components/AssetFilterBar.vue
@@ -26,16 +26,6 @@
         data-component-id="asset-filter-base-models"
         @update:model-value="handleFilterChange"
       />
-
-      <SingleSelect
-        v-if="hasMutableAssets"
-        v-model="ownership"
-        :label="$t('assetBrowser.ownership')"
-        :options="ownershipOptions"
-        class="min-w-42"
-        data-component-id="asset-filter-ownership"
-        @update:model-value="handleFilterChange"
-      />
     </div>
 
     <div class="flex items-center" data-component-id="asset-filter-bar-right">
@@ -57,55 +47,41 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import MultiSelect from '@/components/input/MultiSelect.vue'
 import SingleSelect from '@/components/input/SingleSelect.vue'
 import type { SelectOption } from '@/components/input/types'
-import { t } from '@/i18n'
-import type { OwnershipOption } from '@/platform/assets/composables/useAssetBrowser'
 import { useAssetFilterOptions } from '@/platform/assets/composables/useAssetFilterOptions'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 
-const SORT_OPTIONS = [
-  { name: t('assetBrowser.sortRecent'), value: 'recent' },
-  { name: t('assetBrowser.sortAZ'), value: 'name-asc' },
-  { name: t('assetBrowser.sortZA'), value: 'name-desc' }
-] as const
+const { t } = useI18n()
 
-type SortOption = (typeof SORT_OPTIONS)[number]['value']
+type SortOption = 'recent' | 'name-asc' | 'name-desc'
 
-const sortOptions = [...SORT_OPTIONS]
-
-const ownershipOptions = [
-  { name: t('assetBrowser.ownershipAll'), value: 'all' },
-  { name: t('assetBrowser.ownershipMyModels'), value: 'my-models' },
-  { name: t('assetBrowser.ownershipPublicModels'), value: 'public-models' }
-]
+const sortOptions = computed(() => [
+  { name: t('assetBrowser.sortRecent'), value: 'recent' as const },
+  { name: t('assetBrowser.sortAZ'), value: 'name-asc' as const },
+  { name: t('assetBrowser.sortZA'), value: 'name-desc' as const }
+])
 
 export interface FilterState {
   fileFormats: string[]
   baseModels: string[]
-  sortBy: string
-  ownership: OwnershipOption
+  sortBy: SortOption
 }
 
-const { assets = [], allAssets = [] } = defineProps<{
+const { assets = [] } = defineProps<{
   assets?: AssetItem[]
-  allAssets?: AssetItem[]
 }>()
 
 const fileFormats = ref<SelectOption[]>([])
 const baseModels = ref<SelectOption[]>([])
 const sortBy = ref<SortOption>('recent')
-const ownership = ref<OwnershipOption>('all')
 
-const { availableFileFormats, availableBaseModels } =
-  useAssetFilterOptions(assets)
-
-const hasMutableAssets = computed(() => {
-  const assetsToCheck = allAssets.length ? allAssets : assets
-  return assetsToCheck.some((asset) => asset.is_immutable === false)
-})
+const { availableFileFormats, availableBaseModels } = useAssetFilterOptions(
+  () => assets
+)
 
 const emit = defineEmits<{
   filterChange: [filters: FilterState]
@@ -115,8 +91,7 @@ function handleFilterChange() {
   emit('filterChange', {
     fileFormats: fileFormats.value.map((option: SelectOption) => option.value),
     baseModels: baseModels.value.map((option: SelectOption) => option.value),
-    sortBy: sortBy.value,
-    ownership: ownership.value
+    sortBy: sortBy.value
   })
 }
 </script>
diff --git a/src/platform/assets/components/AssetGrid.vue b/src/platform/assets/components/AssetGrid.vue
index da3c609b0..03c624a79 100644
--- a/src/platform/assets/components/AssetGrid.vue
+++ b/src/platform/assets/components/AssetGrid.vue
@@ -15,27 +15,33 @@
     </div>
     <div
       v-else-if="assets.length === 0"
-      class="flex h-full flex-col items-center justify-center py-16 text-muted-foreground"
+      class="flex h-full select-none flex-col items-center justify-center py-16 text-muted-foreground"
     >
       <i class="mb-4 icon-[lucide--search] size-10" />
       <h3 class="mb-2 text-lg font-medium">
-        {{ $t('assetBrowser.noAssetsFound') }}
+        {{ emptyTitle ?? $t('assetBrowser.noAssetsFound') }}
       </h3>
-      <p class="text-sm">{{ $t('assetBrowser.tryAdjustingFilters') }}</p>
+      <p class="text-sm">
+        {{ emptyMessage ?? $t('assetBrowser.tryAdjustingFilters') }}
+      </p>
     </div>
     <VirtualGrid
       v-else
       :items="assetsWithKey"
-      :grid-style="gridStyle"
+      :grid-style
       :default-item-height="320"
       :default-item-width="240"
+      :max-columns
     >
       <template #item="{ item }">
         <AssetCard
           :asset="item"
           :interactive="true"
+          :focused="item.id === focusedAssetId"
+          @focus="$emit('assetFocus', $event)"
           @select="$emit('assetSelect', $event)"
           @deleted="$emit('assetDeleted', $event)"
+          @show-info="$emit('assetShowInfo', $event)"
         />
       </template>
     </VirtualGrid>
@@ -43,6 +49,7 @@
 </template>
 
 <script setup lang="ts">
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 import type { CSSProperties } from 'vue'
 import { computed } from 'vue'
 
@@ -50,21 +57,39 @@ import VirtualGrid from '@/components/common/VirtualGrid.vue'
 import AssetCard from '@/platform/assets/components/AssetCard.vue'
 import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
 
-const { assets } = defineProps<{
+const { assets, focusedAssetId, emptyTitle, emptyMessage } = defineProps<{
   assets: AssetDisplayItem[]
   loading?: boolean
+  focusedAssetId?: string | null
+  emptyTitle?: string
+  emptyMessage?: string
 }>()
 
 defineEmits<{
+  assetFocus: [asset: AssetDisplayItem]
   assetSelect: [asset: AssetDisplayItem]
   assetDeleted: [asset: AssetDisplayItem]
+  assetShowInfo: [asset: AssetDisplayItem]
 }>()
 
 const assetsWithKey = computed(() =>
   assets.map((asset) => ({ ...asset, key: asset.id }))
 )
 
-const gridStyle: Partial<CSSProperties> = {
+const breakpoints = useBreakpoints(breakpointsTailwind)
+const is2Xl = breakpoints.greaterOrEqual('2xl')
+const isXl = breakpoints.greaterOrEqual('xl')
+const isLg = breakpoints.greaterOrEqual('lg')
+const isMd = breakpoints.greaterOrEqual('md')
+const maxColumns = computed(() => {
+  if (is2Xl.value) return 5
+  if (isXl.value) return 3
+  if (isLg.value) return 3
+  if (isMd.value) return 2
+  return 1
+})
+
+const gridStyle: CSSProperties = {
   display: 'grid',
   gridTemplateColumns: 'repeat(auto-fill, minmax(15rem, 1fr))',
   gap: '1rem',
diff --git a/src/platform/assets/components/MediaAssetFilterBar.vue b/src/platform/assets/components/MediaAssetFilterBar.vue
index 6a0fcdb93..6e4ec5e4c 100644
--- a/src/platform/assets/components/MediaAssetFilterBar.vue
+++ b/src/platform/assets/components/MediaAssetFilterBar.vue
@@ -1,40 +1,42 @@
 <template>
-  <div class="flex gap-3">
+  <div class="flex gap-3 items-center">
     <SearchBox
       :model-value="searchQuery"
       :placeholder="$t('sideToolbar.searchAssets') + '...'"
       @update:model-value="handleSearchChange"
     />
-    <MediaAssetFilterButton
-      v-if="isCloud"
-      v-tooltip.top="{ value: $t('assetBrowser.filterBy') }"
-      size="md"
-    >
-      <template #default="{ close }">
-        <MediaAssetFilterMenu
-          :media-type-filters="mediaTypeFilters"
-          :close="close"
-          @update:media-type-filters="handleMediaTypeFiltersChange"
-        />
-      </template>
-    </MediaAssetFilterButton>
-    <AssetSortButton
-      v-if="isCloud"
-      v-tooltip.top="{ value: $t('assetBrowser.sortBy') }"
-      size="md"
-    >
-      <template #default="{ close }">
-        <MediaAssetSortMenu
-          v-model:sort-by="sortBy"
-          :show-generation-time-sort
-          :close="close"
-        />
-      </template>
-    </AssetSortButton>
-    <MediaAssetViewModeToggle
-      v-if="isQueuePanelV2Enabled"
-      v-model:view-mode="viewMode"
-    />
+    <div class="flex gap-1.5 items-center">
+      <MediaAssetFilterButton
+        v-if="isCloud"
+        v-tooltip.top="{ value: $t('assetBrowser.filterBy') }"
+        size="md"
+      >
+        <template #default="{ close }">
+          <MediaAssetFilterMenu
+            :media-type-filters
+            :close
+            @update:media-type-filters="handleMediaTypeFiltersChange"
+          />
+        </template>
+      </MediaAssetFilterButton>
+      <AssetSortButton
+        v-if="isCloud"
+        v-tooltip.top="{ value: $t('assetBrowser.sortBy') }"
+        size="md"
+      >
+        <template #default="{ close }">
+          <MediaAssetSortMenu
+            v-model:sort-by="sortBy"
+            :show-generation-time-sort
+            :close
+          />
+        </template>
+      </AssetSortButton>
+      <MediaAssetViewModeToggle
+        v-if="isQueuePanelV2Enabled"
+        v-model:view-mode="viewMode"
+      />
+    </div>
   </div>
 </template>
 
diff --git a/src/platform/assets/components/MediaVideoTop.vue b/src/platform/assets/components/MediaVideoTop.vue
index 62db746ab..4e4542182 100644
--- a/src/platform/assets/components/MediaVideoTop.vue
+++ b/src/platform/assets/components/MediaVideoTop.vue
@@ -7,7 +7,6 @@
     <video
       :controls="shouldShowControls"
       preload="metadata"
-      autoplay
       muted
       loop
       playsinline
diff --git a/src/platform/assets/components/modelInfo/ModelInfoField.vue b/src/platform/assets/components/modelInfo/ModelInfoField.vue
new file mode 100644
index 000000000..448c9a0b6
--- /dev/null
+++ b/src/platform/assets/components/modelInfo/ModelInfoField.vue
@@ -0,0 +1,15 @@
+<template>
+  <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 class="select-none">{{ label }}</span>
+      <slot name="label-action" />
+    </div>
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  label: string
+}>()
+</script>
diff --git a/src/platform/assets/components/modelInfo/ModelInfoPanel.test.ts b/src/platform/assets/components/modelInfo/ModelInfoPanel.test.ts
new file mode 100644
index 000000000..981c1a01e
--- /dev/null
+++ b/src/platform/assets/components/modelInfo/ModelInfoPanel.test.ts
@@ -0,0 +1,171 @@
+import { mount } from '@vue/test-utils'
+import { createTestingPinia } from '@pinia/testing'
+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',
+  messages: { en: {} },
+  missingWarn: false,
+  fallbackWarn: false
+})
+
+describe('ModelInfoPanel', () => {
+  const createMockAsset = (
+    overrides: Partial<AssetDisplayItem> = {}
+  ): AssetDisplayItem => ({
+    id: 'test-id',
+    name: 'test-model.safetensors',
+    asset_hash: 'hash123',
+    size: 1024,
+    mime_type: 'application/octet-stream',
+    tags: ['models', 'checkpoints'],
+    created_at: '2024-01-01T00:00:00Z',
+    updated_at: '2024-01-01T00:00:00Z',
+    last_access_time: '2024-01-01T00:00:00Z',
+    description: 'A test model description',
+    badges: [],
+    stats: {},
+    ...overrides
+  })
+
+  const mountPanel = (asset: AssetDisplayItem) => {
+    return mount(ModelInfoPanel, {
+      props: { asset },
+      global: {
+        plugins: [createTestingPinia({ stubActions: false }), i18n]
+      }
+    })
+  }
+
+  describe('Basic Info Section', () => {
+    it('renders basic info section', () => {
+      const wrapper = mountPanel(createMockAsset())
+      expect(wrapper.text()).toContain('assetBrowser.modelInfo.basicInfo')
+    })
+
+    it('displays asset filename', () => {
+      const asset = createMockAsset({ name: 'my-model.safetensors' })
+      const wrapper = mountPanel(asset)
+      expect(wrapper.text()).toContain('my-model.safetensors')
+    })
+
+    it('displays name from user_metadata when present', () => {
+      const asset = createMockAsset({
+        user_metadata: { name: 'My Custom Model' }
+      })
+      const wrapper = mountPanel(asset)
+      expect(wrapper.text()).toContain('My Custom Model')
+    })
+
+    it('falls back to asset name when user_metadata.name not present', () => {
+      const asset = createMockAsset({ name: 'fallback-model.safetensors' })
+      const wrapper = mountPanel(asset)
+      expect(wrapper.text()).toContain('fallback-model.safetensors')
+    })
+
+    it('renders source link when source_arn is present', () => {
+      const asset = createMockAsset({
+        user_metadata: { source_arn: 'civitai:model:123:version:456' }
+      })
+      const wrapper = mountPanel(asset)
+      const link = wrapper.find(
+        'a[href="https://civitai.com/models/123?modelVersionId=456"]'
+      )
+      expect(link.exists()).toBe(true)
+      expect(link.attributes('target')).toBe('_blank')
+    })
+
+    it('displays Civitai icon for Civitai source', () => {
+      const asset = createMockAsset({
+        user_metadata: { source_arn: 'civitai:model:123:version:456' }
+      })
+      const wrapper = mountPanel(asset)
+      expect(
+        wrapper.find('img[src="/assets/images/civitai.svg"]').exists()
+      ).toBe(true)
+    })
+
+    it('does not render source field when source_arn is absent', () => {
+      const asset = createMockAsset()
+      const wrapper = mountPanel(asset)
+      const links = wrapper.findAll('a')
+      expect(links).toHaveLength(0)
+    })
+  })
+
+  describe('Model Tagging Section', () => {
+    it('renders model tagging section', () => {
+      const wrapper = mountPanel(createMockAsset())
+      expect(wrapper.text()).toContain('assetBrowser.modelInfo.modelTagging')
+    })
+
+    it('renders model type field', () => {
+      const wrapper = mountPanel(createMockAsset())
+      expect(wrapper.text()).toContain('assetBrowser.modelInfo.modelType')
+    })
+
+    it('renders base models field', () => {
+      const asset = createMockAsset({
+        user_metadata: { base_model: ['SDXL'] }
+      })
+      const wrapper = mountPanel(asset)
+      expect(wrapper.text()).toContain(
+        'assetBrowser.modelInfo.compatibleBaseModels'
+      )
+    })
+
+    it('renders additional tags field', () => {
+      const wrapper = mountPanel(createMockAsset())
+      expect(wrapper.text()).toContain('assetBrowser.modelInfo.additionalTags')
+    })
+  })
+
+  describe('Model Description Section', () => {
+    it('renders trigger phrases when present', () => {
+      const asset = createMockAsset({
+        user_metadata: { trained_words: ['trigger1', 'trigger2'] }
+      })
+      const wrapper = mountPanel(asset)
+      expect(wrapper.text()).toContain('trigger1')
+      expect(wrapper.text()).toContain('trigger2')
+    })
+
+    it('renders description section', () => {
+      const wrapper = mountPanel(createMockAsset())
+      expect(wrapper.text()).toContain(
+        'assetBrowser.modelInfo.modelDescription'
+      )
+    })
+
+    it('does not render trigger phrases field when empty', () => {
+      const asset = createMockAsset()
+      const wrapper = mountPanel(asset)
+      expect(wrapper.text()).not.toContain(
+        'assetBrowser.modelInfo.triggerPhrases'
+      )
+    })
+  })
+
+  describe('Accordion Structure', () => {
+    it('renders all three section labels', () => {
+      const wrapper = mountPanel(createMockAsset())
+      expect(wrapper.text()).toContain('assetBrowser.modelInfo.basicInfo')
+      expect(wrapper.text()).toContain('assetBrowser.modelInfo.modelTagging')
+      expect(wrapper.text()).toContain(
+        'assetBrowser.modelInfo.modelDescription'
+      )
+    })
+  })
+})
diff --git a/src/platform/assets/components/modelInfo/ModelInfoPanel.vue b/src/platform/assets/components/modelInfo/ModelInfoPanel.vue
new file mode 100644
index 000000000..d0eeb2e96
--- /dev/null
+++ b/src/platform/assets/components/modelInfo/ModelInfoPanel.vue
@@ -0,0 +1,350 @@
+<template>
+  <div
+    data-component-id="ModelInfoPanel"
+    class="flex h-full flex-col scrollbar-custom"
+  >
+    <PropertiesAccordionItem :class="accordionClass">
+      <template #label>
+        <span class="text-xs uppercase font-inter select-none">
+          {{ t('assetBrowser.modelInfo.basicInfo') }}
+        </span>
+      </template>
+      <ModelInfoField :label="t('assetBrowser.modelInfo.displayName')">
+        <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 text-muted-foreground">{{ asset.name }}</span>
+      </ModelInfoField>
+      <ModelInfoField
+        v-if="sourceUrl"
+        :label="t('assetBrowser.modelInfo.source')"
+      >
+        <a
+          :href="sourceUrl"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="inline-flex items-center gap-1.5 text-muted-foreground no-underline transition-colors hover:text-foreground"
+        >
+          <img
+            v-if="sourceName === 'Civitai'"
+            src="/assets/images/civitai.svg"
+            alt=""
+            class="size-4 shrink-0"
+          />
+          <img
+            v-else-if="sourceName === 'Hugging Face'"
+            src="/assets/images/hf-logo.svg"
+            alt=""
+            class="size-4 shrink-0"
+          />
+          {{ t('assetBrowser.modelInfo.viewOnSource', { source: sourceName }) }}
+          <i class="icon-[lucide--external-link] size-4 shrink-0" />
+        </a>
+      </ModelInfoField>
+    </PropertiesAccordionItem>
+
+    <PropertiesAccordionItem :class="accordionClass">
+      <template #label>
+        <span class="text-xs uppercase font-inter select-none">
+          {{ t('assetBrowser.modelInfo.modelTagging') }}
+        </span>
+      </template>
+      <ModelInfoField :label="t('assetBrowser.modelInfo.modelType')">
+        <Select v-if="!isImmutable" v-model="selectedModelType">
+          <SelectTrigger class="w-full">
+            <SelectValue
+              :placeholder="t('assetBrowser.modelInfo.selectModelType')"
+            />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem
+              v-for="option in modelTypes"
+              :key="option.value"
+              :value="option.value"
+            >
+              {{ option.name }}
+            </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
+          v-slot="{ isEmpty }"
+          v-model="baseModels"
+          :disabled="isImmutable"
+        >
+          <TagsInputItem
+            v-for="model in baseModels"
+            :key="model"
+            :value="model"
+          >
+            <TagsInputItemText />
+            <TagsInputItemDelete />
+          </TagsInputItem>
+          <TagsInputInput
+            :is-empty="isEmpty"
+            :placeholder="
+              isImmutable
+                ? t('assetBrowser.modelInfo.baseModelUnknown')
+                : t('assetBrowser.modelInfo.addBaseModel')
+            "
+          />
+        </TagsInput>
+      </ModelInfoField>
+      <ModelInfoField :label="t('assetBrowser.modelInfo.additionalTags')">
+        <TagsInput
+          v-slot="{ isEmpty }"
+          v-model="additionalTags"
+          :disabled="isImmutable"
+        >
+          <TagsInputItem v-for="tag in additionalTags" :key="tag" :value="tag">
+            <TagsInputItemText />
+            <TagsInputItemDelete />
+          </TagsInputItem>
+          <TagsInputInput
+            :is-empty="isEmpty"
+            :placeholder="
+              isImmutable
+                ? t('assetBrowser.modelInfo.noAdditionalTags')
+                : t('assetBrowser.modelInfo.addTag')
+            "
+          />
+        </TagsInput>
+      </ModelInfoField>
+    </PropertiesAccordionItem>
+
+    <PropertiesAccordionItem :class="accordionClass">
+      <template #label>
+        <span class="text-xs uppercase font-inter select-none">
+          {{ t('assetBrowser.modelInfo.modelDescription') }}
+        </span>
+      </template>
+      <ModelInfoField
+        v-if="triggerPhrases.length > 0"
+        :label="t('assetBrowser.modelInfo.triggerPhrases')"
+      >
+        <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"
+            variant="muted-textonly"
+            size="unset"
+            :title="t('g.copyToClipboard')"
+            class="text-pretty whitespace-normal text-left text-xs"
+            @click="copyToClipboard(phrase)"
+          >
+            {{ phrase }}
+            <i class="icon-[lucide--copy] size-4 min-w-4 min-h-4 opacity-60" />
+          </Button>
+        </div>
+      </ModelInfoField>
+      <ModelInfoField
+        v-if="description"
+        :label="t('assetBrowser.modelInfo.description')"
+      >
+        <p class="text-sm whitespace-pre-wrap">{{ description }}</p>
+      </ModelInfoField>
+      <ModelInfoField :label="t('assetBrowser.modelInfo.description')">
+        <textarea
+          ref="descriptionTextarea"
+          v-model="userDescription"
+          :disabled="isImmutable"
+          :placeholder="
+            isImmutable
+              ? t('assetBrowser.modelInfo.descriptionNotSet')
+              : t('assetBrowser.modelInfo.descriptionPlaceholder')
+          "
+          rows="3"
+          :class="
+            cn(
+              'w-full resize-y rounded-lg border border-transparent bg-transparent px-3 py-2 text-sm text-component-node-foreground outline-none transition-colors focus:bg-component-node-widget-background',
+              isImmutable && 'cursor-not-allowed'
+            )
+          "
+          @keydown.escape.stop="descriptionTextarea?.blur()"
+        />
+      </ModelInfoField>
+    </PropertiesAccordionItem>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useDebounceFn } from '@vueuse/core'
+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'
+import SelectTrigger from '@/components/ui/select/SelectTrigger.vue'
+import SelectValue from '@/components/ui/select/SelectValue.vue'
+import TagsInput from '@/components/ui/tags-input/TagsInput.vue'
+import TagsInputInput from '@/components/ui/tags-input/TagsInputInput.vue'
+import TagsInputItem from '@/components/ui/tags-input/TagsInputItem.vue'
+import TagsInputItemDelete from '@/components/ui/tags-input/TagsInputItemDelete.vue'
+import TagsInputItemText from '@/components/ui/tags-input/TagsInputItemText.vue'
+import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
+import { useModelTypes } from '@/platform/assets/composables/useModelTypes'
+import type { AssetUserMetadata } from '@/platform/assets/schemas/assetSchema'
+import {
+  getAssetAdditionalTags,
+  getAssetBaseModels,
+  getAssetDescription,
+  getAssetDisplayName,
+  getAssetModelType,
+  getAssetSourceUrl,
+  getAssetTriggerPhrases,
+  getAssetUserDescription,
+  getSourceName
+} from '@/platform/assets/utils/assetMetadataUtils'
+import { useAssetsStore } from '@/stores/assetsStore'
+import { cn } from '@/utils/tailwindUtil'
+
+import ModelInfoField from './ModelInfoField.vue'
+
+const { t } = useI18n()
+const { copyToClipboard } = useCopyToClipboard()
+
+const descriptionTextarea = useTemplateRef<HTMLTextAreaElement>(
+  'descriptionTextarea'
+)
+
+const accordionClass = cn(
+  'bg-modal-panel-background border-t border-border-default'
+)
+
+const { asset, cacheKey } = defineProps<{
+  asset: AssetDisplayItem
+  cacheKey?: string
+}>()
+
+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)
+const displayName = computed(
+  () => pendingUpdates.value.name ?? getAssetDisplayName(asset)
+)
+const sourceUrl = computed(() => getAssetSourceUrl(asset))
+const sourceName = computed(() =>
+  sourceUrl.value ? getSourceName(sourceUrl.value) : ''
+)
+const description = computed(() => getAssetDescription(asset))
+const triggerPhrases = computed(() => getAssetTriggerPhrases(asset))
+
+watch(
+  () => asset.user_metadata,
+  () => {
+    pendingUpdates.value = {}
+  }
+)
+
+watch(
+  () => asset.tags,
+  () => {
+    pendingModelType.value = undefined
+  }
+)
+
+const debouncedFlushMetadata = useDebounceFn(() => {
+  if (isImmutable.value) return
+  assetsStore.updateAssetMetadata(
+    asset,
+    { ...(asset.user_metadata ?? {}), ...pendingUpdates.value },
+    cacheKey
+  )
+}, 500)
+
+function queueMetadataUpdate(updates: AssetUserMetadata) {
+  pendingUpdates.value = { ...pendingUpdates.value, ...updates }
+  debouncedFlushMetadata()
+}
+
+function handleDisplayNameEdit(newName: string) {
+  isEditingDisplayName.value = false
+  if (newName && newName !== displayName.value) {
+    queueMetadataUpdate({ name: newName })
+  }
+}
+
+const debouncedSaveModelType = useDebounceFn((newModelType: string) => {
+  if (isImmutable.value) return
+  const currentModelType = getAssetModelType(asset)
+  if (currentModelType === newModelType) return
+  const newTags = asset.tags
+    .filter((tag) => tag !== currentModelType)
+    .concat(newModelType)
+  assetsStore.updateAssetTags(asset, newTags, cacheKey)
+}, 500)
+
+const baseModels = computed({
+  get: () => pendingUpdates.value.base_model ?? getAssetBaseModels(asset),
+  set: (value: string[]) => queueMetadataUpdate({ base_model: value })
+})
+
+const additionalTags = computed({
+  get: () =>
+    pendingUpdates.value.additional_tags ?? getAssetAdditionalTags(asset),
+  set: (value: string[]) => queueMetadataUpdate({ additional_tags: value })
+})
+
+const userDescription = computed({
+  get: () =>
+    pendingUpdates.value.user_description ?? getAssetUserDescription(asset),
+  set: (value: string) => queueMetadataUpdate({ user_description: value })
+})
+
+const selectedModelType = computed({
+  get: () => pendingModelType.value ?? getAssetModelType(asset) ?? undefined,
+  set: (value: string | undefined) => {
+    if (!value) return
+    pendingModelType.value = value
+    debouncedSaveModelType(value)
+  }
+})
+</script>
diff --git a/src/platform/assets/composables/useAssetBrowser.test.ts b/src/platform/assets/composables/useAssetBrowser.test.ts
index 1661e3dbb..f6f4d75c9 100644
--- a/src/platform/assets/composables/useAssetBrowser.test.ts
+++ b/src/platform/assets/composables/useAssetBrowser.test.ts
@@ -1,3 +1,4 @@
+import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick, ref } from 'vue'
 
@@ -8,6 +9,8 @@ vi.mock('@/i18n', () => ({
   t: (key: string) => {
     const translations: Record<string, string> = {
       'assetBrowser.allModels': 'All Models',
+      'assetBrowser.imported': 'Imported',
+      'assetBrowser.byType': 'By type',
       'assetBrowser.assets': 'Assets',
       'assetBrowser.unknown': 'unknown'
     }
@@ -18,6 +21,7 @@ vi.mock('@/i18n', () => ({
 
 describe('useAssetBrowser', () => {
   beforeEach(() => {
+    setActivePinia(createPinia())
     vi.restoreAllMocks()
   })
 
@@ -48,7 +52,7 @@ describe('useAssetBrowser', () => {
         tags: ['models', 'loras']
       })
 
-      const { selectedCategory, categoryFilteredAssets } = useAssetBrowser(
+      const { selectedNavItem, categoryFilteredAssets } = useAssetBrowser(
         ref([checkpointAsset, loraAsset])
       )
 
@@ -56,11 +60,11 @@ describe('useAssetBrowser', () => {
       expect(categoryFilteredAssets.value).toHaveLength(2)
 
       // When category selected, should only show that category
-      selectedCategory.value = 'checkpoints'
+      selectedNavItem.value = 'checkpoints'
       expect(categoryFilteredAssets.value).toHaveLength(1)
       expect(categoryFilteredAssets.value[0].id).toBe('checkpoint-1')
 
-      selectedCategory.value = 'loras'
+      selectedNavItem.value = 'loras'
       expect(categoryFilteredAssets.value).toHaveLength(1)
       expect(categoryFilteredAssets.value[0].id).toBe('lora-1')
     })
@@ -150,9 +154,9 @@ describe('useAssetBrowser', () => {
         createApiAsset({ id: '3', tags: ['models', 'checkpoints'] })
       ]
 
-      const { selectedCategory, filteredAssets } = useAssetBrowser(ref(assets))
+      const { selectedNavItem, filteredAssets } = useAssetBrowser(ref(assets))
 
-      selectedCategory.value = 'checkpoints'
+      selectedNavItem.value = 'checkpoints'
       await nextTick()
 
       expect(filteredAssets.value).toHaveLength(2)
@@ -169,9 +173,9 @@ describe('useAssetBrowser', () => {
         createApiAsset({ id: '2', tags: ['models', 'loras'] })
       ]
 
-      const { selectedCategory, filteredAssets } = useAssetBrowser(ref(assets))
+      const { selectedNavItem, filteredAssets } = useAssetBrowser(ref(assets))
 
-      selectedCategory.value = 'all'
+      selectedNavItem.value = 'all'
       await nextTick()
 
       expect(filteredAssets.value).toHaveLength(2)
@@ -291,8 +295,7 @@ describe('useAssetBrowser', () => {
       updateFilters({
         sortBy: 'name-asc',
         fileFormats: ['safetensors'],
-        baseModels: [],
-        ownership: 'all'
+        baseModels: []
       })
       await nextTick()
 
@@ -327,8 +330,7 @@ describe('useAssetBrowser', () => {
       updateFilters({
         sortBy: 'name-asc',
         fileFormats: [],
-        baseModels: ['SDXL'],
-        ownership: 'all'
+        baseModels: ['SDXL']
       })
       await nextTick()
 
@@ -354,12 +356,12 @@ describe('useAssetBrowser', () => {
         })
       ]
 
-      const { searchQuery, selectedCategory, filteredAssets } = useAssetBrowser(
+      const { searchQuery, selectedNavItem, filteredAssets } = useAssetBrowser(
         ref(assets)
       )
 
       searchQuery.value = 'realistic'
-      selectedCategory.value = 'checkpoints'
+      selectedNavItem.value = 'checkpoints'
       await nextTick()
 
       expect(filteredAssets.value).toHaveLength(1)
@@ -380,10 +382,9 @@ describe('useAssetBrowser', () => {
       const { updateFilters, filteredAssets } = useAssetBrowser(ref(assets))
 
       updateFilters({
-        sortBy: 'name',
+        sortBy: 'name-asc',
         fileFormats: [],
-        baseModels: [],
-        ownership: 'all'
+        baseModels: []
       })
       await nextTick()
 
@@ -407,8 +408,7 @@ describe('useAssetBrowser', () => {
       updateFilters({
         sortBy: 'recent',
         fileFormats: [],
-        baseModels: [],
-        ownership: 'all'
+        baseModels: []
       })
       await nextTick()
 
@@ -440,15 +440,14 @@ describe('useAssetBrowser', () => {
       updateFilters({
         sortBy: 'name-asc',
         fileFormats: [],
-        baseModels: [],
-        ownership: 'all'
+        baseModels: []
       })
       await nextTick()
 
       expect(filteredAssets.value).toHaveLength(3)
     })
 
-    it('filters by ownership - my models only', async () => {
+    it('filters by ownership - imported models only via nav selection', async () => {
       const assets = [
         createApiAsset({ name: 'my-model.safetensors', is_immutable: false }),
         createApiAsset({
@@ -461,14 +460,10 @@ describe('useAssetBrowser', () => {
         })
       ]
 
-      const { updateFilters, filteredAssets } = useAssetBrowser(ref(assets))
+      const { selectedNavItem, filteredAssets } = useAssetBrowser(ref(assets))
 
-      updateFilters({
-        sortBy: 'name-asc',
-        fileFormats: [],
-        baseModels: [],
-        ownership: 'my-models'
-      })
+      // Selecting 'imported' nav item filters to my-models (non-immutable)
+      selectedNavItem.value = 'imported'
       await nextTick()
 
       expect(filteredAssets.value).toHaveLength(2)
@@ -477,7 +472,7 @@ describe('useAssetBrowser', () => {
       )
     })
 
-    it('filters by ownership - public models only', async () => {
+    it('shows all models when nav is "all"', async () => {
       const assets = [
         createApiAsset({ name: 'my-model.safetensors', is_immutable: false }),
         createApiAsset({
@@ -490,41 +485,47 @@ describe('useAssetBrowser', () => {
         })
       ]
 
-      const { updateFilters, filteredAssets } = useAssetBrowser(ref(assets))
+      const { selectedNavItem, filteredAssets } = useAssetBrowser(ref(assets))
 
-      updateFilters({
-        sortBy: 'name-asc',
-        fileFormats: [],
-        baseModels: [],
-        ownership: 'public-models'
-      })
+      // Selecting 'all' nav item shows all models
+      selectedNavItem.value = 'all'
       await nextTick()
 
-      expect(filteredAssets.value).toHaveLength(2)
-      expect(filteredAssets.value.every((asset) => asset.is_immutable)).toBe(
-        true
-      )
+      expect(filteredAssets.value).toHaveLength(3)
     })
   })
 
   describe('Dynamic Category Extraction', () => {
-    it('extracts categories from asset tags', () => {
+    it('extracts categories from asset tags into navItems', () => {
       const assets = [
         createApiAsset({ tags: ['models', 'checkpoints'] }),
         createApiAsset({ tags: ['models', 'loras'] }),
         createApiAsset({ tags: ['models', 'checkpoints'] }) // duplicate
       ]
 
-      const { availableCategories } = useAssetBrowser(ref(assets))
+      const { navItems } = useAssetBrowser(ref(assets))
 
-      expect(availableCategories.value).toEqual([
-        { id: 'all', label: 'All Models', icon: 'icon-[lucide--folder]' },
+      // navItems includes quick filters plus a "By type" group
+      expect(navItems.value).toEqual([
+        { id: 'all', label: 'All Models', icon: 'icon-[lucide--list]' },
         {
-          id: 'checkpoints',
-          label: 'Checkpoints',
-          icon: 'icon-[lucide--package]'
+          id: 'imported',
+          label: 'Imported',
+          icon: 'icon-[lucide--folder-input]',
+          badge: undefined
         },
-        { id: 'loras', label: 'Loras', icon: 'icon-[lucide--package]' }
+        {
+          title: 'By type',
+          collapsible: false,
+          items: [
+            {
+              id: 'checkpoints',
+              label: 'Checkpoints',
+              icon: 'icon-[lucide--folder]'
+            },
+            { id: 'loras', label: 'Loras', icon: 'icon-[lucide--folder]' }
+          ]
+        }
       ])
     })
 
@@ -534,11 +535,21 @@ describe('useAssetBrowser', () => {
         createApiAsset({ tags: ['models', 'vae'] })
       ]
 
-      const { availableCategories } = useAssetBrowser(ref(assets))
+      const { navItems } = useAssetBrowser(ref(assets))
 
-      expect(availableCategories.value).toEqual([
-        { id: 'all', label: 'All Models', icon: 'icon-[lucide--folder]' },
-        { id: 'vae', label: 'Vae', icon: 'icon-[lucide--package]' }
+      expect(navItems.value).toEqual([
+        { id: 'all', label: 'All Models', icon: 'icon-[lucide--list]' },
+        {
+          id: 'imported',
+          label: 'Imported',
+          icon: 'icon-[lucide--folder-input]',
+          badge: undefined
+        },
+        {
+          title: 'By type',
+          collapsible: false,
+          items: [{ id: 'vae', label: 'Vae', icon: 'icon-[lucide--folder]' }]
+        }
       ])
     })
 
@@ -548,31 +559,47 @@ describe('useAssetBrowser', () => {
         createApiAsset({ tags: ['models', 'checkpoints'] })
       ]
 
-      const { availableCategories } = useAssetBrowser(ref(assets))
+      const { navItems } = useAssetBrowser(ref(assets))
 
-      expect(availableCategories.value).toEqual([
-        { id: 'all', label: 'All Models', icon: 'icon-[lucide--folder]' },
+      expect(navItems.value).toEqual([
+        { id: 'all', label: 'All Models', icon: 'icon-[lucide--list]' },
         {
-          id: 'checkpoints',
-          label: 'Checkpoints',
-          icon: 'icon-[lucide--package]'
+          id: 'imported',
+          label: 'Imported',
+          icon: 'icon-[lucide--folder-input]',
+          badge: undefined
+        },
+        {
+          title: 'By type',
+          collapsible: false,
+          items: [
+            {
+              id: 'checkpoints',
+              label: 'Checkpoints',
+              icon: 'icon-[lucide--folder]'
+            }
+          ]
         }
       ])
     })
 
-    it('computes content title from selected category', () => {
+    it('computes content title from selected nav item', () => {
       const assets = [createApiAsset({ tags: ['models', 'checkpoints'] })]
-      const { selectedCategory, contentTitle } = useAssetBrowser(ref(assets))
+      const { selectedNavItem, contentTitle } = useAssetBrowser(ref(assets))
 
       // Default
       expect(contentTitle.value).toBe('All Models')
 
       // Set specific category
-      selectedCategory.value = 'checkpoints'
+      selectedNavItem.value = 'checkpoints'
       expect(contentTitle.value).toBe('Checkpoints')
 
+      // Set imported
+      selectedNavItem.value = 'imported'
+      expect(contentTitle.value).toBe('Imported')
+
       // Unknown category
-      selectedCategory.value = 'unknown'
+      selectedNavItem.value = 'unknown'
       expect(contentTitle.value).toBe('Assets')
     })
 
@@ -596,26 +623,18 @@ describe('useAssetBrowser', () => {
         })
       ]
 
-      const { availableCategories, selectedCategory, categoryFilteredAssets } =
+      const { navItems, selectedNavItem, categoryFilteredAssets } =
         useAssetBrowser(ref(assets))
 
-      // Should group all Chatterbox subfolders under single category
-      expect(availableCategories.value).toEqual([
-        { id: 'all', label: 'All Models', icon: 'icon-[lucide--folder]' },
-        {
-          id: 'Chatterbox',
-          label: 'Chatterbox',
-          icon: 'icon-[lucide--package]'
-        },
-        {
-          id: 'OtherFolder',
-          label: 'OtherFolder',
-          icon: 'icon-[lucide--package]'
-        }
+      // Should group all Chatterbox subfolders under single category in the type group
+      const typeGroup = navItems.value[2] as { items: { id: string }[] }
+      expect(typeGroup.items.map((i) => i.id)).toEqual([
+        'Chatterbox',
+        'OtherFolder'
       ])
 
       // When selecting Chatterbox category, should include all models from its subfolders
-      selectedCategory.value = 'Chatterbox'
+      selectedNavItem.value = 'Chatterbox'
       expect(categoryFilteredAssets.value).toHaveLength(3)
       expect(categoryFilteredAssets.value.map((a) => a.id)).toEqual([
         'asset-1',
@@ -624,7 +643,7 @@ describe('useAssetBrowser', () => {
       ])
 
       // When selecting OtherFolder category, should include only its models
-      selectedCategory.value = 'OtherFolder'
+      selectedNavItem.value = 'OtherFolder'
       expect(categoryFilteredAssets.value).toHaveLength(1)
       expect(categoryFilteredAssets.value[0].id).toBe('asset-4')
     })
diff --git a/src/platform/assets/composables/useAssetBrowser.ts b/src/platform/assets/composables/useAssetBrowser.ts
index 2817be81c..0b1af9c5d 100644
--- a/src/platform/assets/composables/useAssetBrowser.ts
+++ b/src/platform/assets/composables/useAssetBrowser.ts
@@ -2,16 +2,22 @@ import { computed, ref } from 'vue'
 import type { Ref } from 'vue'
 import { useFuse } from '@vueuse/integrations/useFuse'
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
+import { storeToRefs } from 'pinia'
 
 import { d, t } from '@/i18n'
 import type { FilterState } from '@/platform/assets/components/AssetFilterBar.vue'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import {
-  getAssetBaseModel,
-  getAssetDescription
+  getAssetBaseModels,
+  getAssetDescription,
+  getAssetDisplayName
 } from '@/platform/assets/utils/assetMetadataUtils'
+import { useAssetDownloadStore } from '@/stores/assetDownloadStore'
+import type { NavGroupData, NavItemData } from '@/types/navTypes'
 
-export type OwnershipOption = 'all' | 'my-models' | 'public-models'
+type OwnershipOption = 'all' | 'my-models' | 'public-models'
+
+type NavId = 'all' | 'imported' | (string & {})
 
 function filterByCategory(category: string) {
   return (asset: AssetItem) => {
@@ -43,8 +49,8 @@ function filterByBaseModels(models: string[]) {
   return (asset: AssetItem) => {
     if (models.length === 0) return true
     const modelSet = new Set(models)
-    const baseModel = getAssetBaseModel(asset)
-    return baseModel ? modelSet.has(baseModel) : false
+    const assetBaseModels = getAssetBaseModels(asset)
+    return assetBaseModels.some((model) => modelSet.has(model))
   }
 }
 
@@ -81,14 +87,31 @@ export function useAssetBrowser(
   assetsSource: Ref<AssetItem[] | undefined> = ref<AssetItem[] | undefined>([])
 ) {
   const assets = computed<AssetItem[]>(() => assetsSource.value ?? [])
+  const assetDownloadStore = useAssetDownloadStore()
+  const { sessionDownloadCount } = storeToRefs(assetDownloadStore)
+
   // State
   const searchQuery = ref('')
-  const selectedCategory = ref('all')
+  const selectedNavItem = ref<NavId>('all')
   const filters = ref<FilterState>({
     sortBy: 'recent',
     fileFormats: [],
-    baseModels: [],
-    ownership: 'all'
+    baseModels: []
+  })
+
+  const selectedOwnership = computed<OwnershipOption>(() => {
+    if (selectedNavItem.value === 'imported') return 'my-models'
+    return 'all'
+  })
+
+  const selectedCategory = computed(() => {
+    if (
+      selectedNavItem.value === 'all' ||
+      selectedNavItem.value === 'imported'
+    ) {
+      return 'all'
+    }
+    return selectedNavItem.value
   })
 
   // Transform API asset to display asset
@@ -112,18 +135,17 @@ export function useAssetBrowser(
       badges.push({ label: badgeLabel, type: 'type' })
     }
 
-    // Base model badge from metadata
-    const baseModel = getAssetBaseModel(asset)
-    if (baseModel) {
-      badges.push({
-        label: baseModel,
-        type: 'base'
-      })
+    // Base model badges from metadata
+    const baseModels = getAssetBaseModels(asset)
+    for (const model of baseModels) {
+      badges.push({ label: model, type: 'base' })
     }
 
     // Create display stats from API data
     const stats = {
-      formattedDate: d(new Date(asset.created_at), { dateStyle: 'short' }),
+      formattedDate: asset.created_at
+        ? d(new Date(asset.created_at), { dateStyle: 'short' })
+        : undefined,
       downloadCount: undefined, // Not available in API
       stars: undefined // Not available in API
     }
@@ -136,39 +158,69 @@ export function useAssetBrowser(
     }
   }
 
-  const availableCategories = computed(() => {
+  const typeCategories = computed<NavItemData[]>(() => {
     const categories = assets.value
       .filter((asset) => asset.tags[0] === 'models')
       .map((asset) => asset.tags[1])
       .filter((tag): tag is string => typeof tag === 'string' && tag.length > 0)
-      .map((tag) => tag.split('/')[0]) // Extract top-level folder name
+      .map((tag) => tag.split('/')[0])
 
-    const uniqueCategories = Array.from(new Set(categories))
+    return Array.from(new Set(categories))
       .sort()
       .map((category) => ({
         id: category,
         label: category.charAt(0).toUpperCase() + category.slice(1),
-        icon: 'icon-[lucide--package]'
+        icon: 'icon-[lucide--folder]'
       }))
+  })
 
-    return [
+  const navItems = computed<(NavItemData | NavGroupData)[]>(() => {
+    const quickFilters: NavItemData[] = [
       {
         id: 'all',
         label: t('assetBrowser.allModels'),
-        icon: 'icon-[lucide--folder]'
+        icon: 'icon-[lucide--list]'
       },
-      ...uniqueCategories
+      {
+        id: 'imported',
+        label: t('assetBrowser.imported'),
+        icon: 'icon-[lucide--folder-input]',
+        badge:
+          sessionDownloadCount.value > 0
+            ? sessionDownloadCount.value
+            : undefined
+      }
+    ]
+
+    if (typeCategories.value.length === 0) {
+      return quickFilters
+    }
+
+    return [
+      ...quickFilters,
+      {
+        title: t('assetBrowser.byType'),
+        items: typeCategories.value,
+        collapsible: false
+      }
     ]
   })
 
-  // Compute content title from selected category
+  const isImportedSelected = computed(
+    () => selectedNavItem.value === 'imported'
+  )
+
+  // Compute content title from selected nav item
   const contentTitle = computed(() => {
-    if (selectedCategory.value === 'all') {
+    if (selectedNavItem.value === 'all') {
       return t('assetBrowser.allModels')
     }
+    if (selectedNavItem.value === 'imported') {
+      return t('assetBrowser.imported')
+    }
 
-    const category = availableCategories.value.find(
-      (cat) => cat.id === selectedCategory.value
+    const category = typeCategories.value.find(
+      (cat) => cat.id === selectedNavItem.value
     )
     return category?.label || t('assetBrowser.assets')
   })
@@ -182,7 +234,13 @@ export function useAssetBrowser(
     fuseOptions: {
       keys: [
         { name: 'name', weight: 0.4 },
-        { name: 'tags', weight: 0.3 }
+        { name: 'tags', weight: 0.3 },
+        { name: 'user_metadata.name', weight: 0.4 },
+        { name: 'user_metadata.additional_tags', weight: 0.3 },
+        { name: 'user_metadata.trained_words', weight: 0.3 },
+        { name: 'user_metadata.user_description', weight: 0.3 },
+        { name: 'metadata.name', weight: 0.4 },
+        { name: 'metadata.trained_words', weight: 0.3 }
       ],
       threshold: 0.4, // Higher threshold for typo tolerance (0.0 = exact, 1.0 = match all)
       ignoreLocation: true, // Search anywhere in the string, not just at the beginning
@@ -205,22 +263,21 @@ export function useAssetBrowser(
     const filtered = searchFiltered.value
       .filter(filterByFileFormats(filters.value.fileFormats))
       .filter(filterByBaseModels(filters.value.baseModels))
-      .filter(filterByOwnership(filters.value.ownership))
+      .filter(filterByOwnership(selectedOwnership.value))
 
     const sortedAssets = [...filtered]
     sortedAssets.sort((a, b) => {
       switch (filters.value.sortBy) {
         case 'name-desc':
-          return b.name.localeCompare(a.name)
+          return getAssetDisplayName(b).localeCompare(getAssetDisplayName(a))
         case 'recent':
           return (
-            new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
+            new Date(b.created_at ?? 0).getTime() -
+            new Date(a.created_at ?? 0).getTime()
           )
-        case 'popular':
-          return a.name.localeCompare(b.name)
         case 'name-asc':
         default:
-          return a.name.localeCompare(b.name)
+          return getAssetDisplayName(a).localeCompare(getAssetDisplayName(b))
       }
     })
 
@@ -234,11 +291,13 @@ export function useAssetBrowser(
 
   return {
     searchQuery,
+    selectedNavItem,
     selectedCategory,
-    availableCategories,
+    navItems,
     contentTitle,
     categoryFilteredAssets,
     filteredAssets,
+    isImportedSelected,
     updateFilters
   }
 }
diff --git a/src/platform/assets/composables/useAssetFilterOptions.ts b/src/platform/assets/composables/useAssetFilterOptions.ts
index a71fadae2..7396c9572 100644
--- a/src/platform/assets/composables/useAssetFilterOptions.ts
+++ b/src/platform/assets/composables/useAssetFilterOptions.ts
@@ -4,6 +4,7 @@ import type { MaybeRefOrGetter } from 'vue'
 
 import type { SelectOption } from '@/components/input/types'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import { getAssetBaseModels } from '@/platform/assets/utils/assetMetadataUtils'
 
 /**
  * Composable that extracts available filter options from asset data
@@ -37,12 +38,7 @@ export function useAssetFilterOptions(assets: MaybeRefOrGetter<AssetItem[]>) {
    */
   const availableBaseModels = computed<SelectOption[]>(() => {
     const assetList = toValue(assets)
-    const models = assetList
-      .map((asset) => asset.user_metadata?.base_model)
-      .filter(
-        (baseModel): baseModel is string =>
-          baseModel !== undefined && typeof baseModel === 'string'
-      )
+    const models = assetList.flatMap((asset) => getAssetBaseModels(asset))
 
     const uniqueModels = uniqWith(models, (a, b) => a === b)
 
diff --git a/src/platform/assets/composables/useMediaAssetActions.test.ts b/src/platform/assets/composables/useMediaAssetActions.test.ts
new file mode 100644
index 000000000..ef7ccf8ee
--- /dev/null
+++ b/src/platform/assets/composables/useMediaAssetActions.test.ts
@@ -0,0 +1,223 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+
+// Use vi.hoisted to create a mutable reference for isCloud
+const mockIsCloud = vi.hoisted(() => ({ value: false }))
+
+// Track the filename passed to createAnnotatedPath
+const capturedFilenames = vi.hoisted(() => ({ values: [] as string[] }))
+
+vi.mock('@/platform/distribution/types', () => ({
+  get isCloud() {
+    return mockIsCloud.value
+  }
+}))
+
+vi.mock('primevue/usetoast', () => ({
+  useToast: () => ({
+    add: vi.fn()
+  })
+}))
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: (key: string) => key
+  }),
+  createI18n: () => ({
+    global: {
+      t: (key: string) => key
+    }
+  })
+}))
+
+vi.mock('@/stores/dialogStore', () => ({
+  useDialogStore: () => ({
+    showDialog: vi.fn()
+  })
+}))
+
+vi.mock('@/composables/useCopyToClipboard', () => ({
+  useCopyToClipboard: () => ({
+    copyToClipboard: vi.fn()
+  })
+}))
+
+vi.mock('@/platform/workflow/core/services/workflowActionsService', () => ({
+  useWorkflowActionsService: () => ({
+    openWorkflowAction: vi.fn(),
+    exportWorkflowAction: vi.fn()
+  })
+}))
+
+vi.mock('@/services/litegraphService', () => ({
+  useLitegraphService: () => ({
+    addNodeOnGraph: vi.fn().mockReturnValue({
+      widgets: [{ name: 'image', value: '', callback: vi.fn() }],
+      graph: { setDirtyCanvas: vi.fn() }
+    } as unknown as LGraphNode),
+    getCanvasCenter: vi.fn().mockReturnValue([100, 100])
+  })
+}))
+
+vi.mock('@/stores/nodeDefStore', () => ({
+  useNodeDefStore: () => ({
+    nodeDefsByName: {
+      LoadImage: {
+        name: 'LoadImage',
+        display_name: 'Load Image'
+      }
+    }
+  })
+}))
+
+vi.mock('@/utils/createAnnotatedPath', () => ({
+  createAnnotatedPath: vi.fn((item: { filename: string }) => {
+    capturedFilenames.values.push(item.filename)
+    return item.filename
+  })
+}))
+
+vi.mock('@/utils/loaderNodeUtil', () => ({
+  detectNodeTypeFromFilename: vi.fn().mockReturnValue({
+    nodeType: 'LoadImage',
+    widgetName: 'image'
+  })
+}))
+
+vi.mock('@/utils/typeGuardUtil', () => ({
+  isResultItemType: vi.fn().mockReturnValue(true)
+}))
+
+vi.mock('@/platform/assets/utils/assetTypeUtil', () => ({
+  getAssetType: vi.fn().mockReturnValue('input')
+}))
+
+vi.mock('../schemas/assetMetadataSchema', () => ({
+  getOutputAssetMetadata: vi.fn().mockReturnValue(null)
+}))
+
+function createMockAsset(overrides: Partial<AssetItem> = {}): AssetItem {
+  return {
+    id: 'test-asset-id',
+    name: 'original-name.jpeg',
+    size: 1024,
+    created_at: '2025-01-01T00:00:00Z',
+    tags: ['input'],
+    ...overrides
+  }
+}
+
+describe('useMediaAssetActions', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    vi.clearAllMocks()
+    capturedFilenames.values = []
+    mockIsCloud.value = false
+  })
+
+  describe('addWorkflow', () => {
+    describe('OSS mode (isCloud = false)', () => {
+      beforeEach(() => {
+        mockIsCloud.value = false
+      })
+
+      it('should use asset.name as filename', async () => {
+        const { useMediaAssetActions } = await import('./useMediaAssetActions')
+        const actions = useMediaAssetActions()
+
+        const asset = createMockAsset({
+          name: 'my-image.jpeg',
+          asset_hash: 'hash123.jpeg'
+        })
+
+        await actions.addWorkflow(asset)
+
+        expect(capturedFilenames.values).toContain('my-image.jpeg')
+      })
+    })
+
+    describe('Cloud mode (isCloud = true)', () => {
+      beforeEach(() => {
+        mockIsCloud.value = true
+      })
+
+      it('should use asset_hash as filename when available', async () => {
+        const { useMediaAssetActions } = await import('./useMediaAssetActions')
+        const actions = useMediaAssetActions()
+
+        const asset = createMockAsset({
+          name: 'original.jpeg',
+          asset_hash: 'abc123hash.jpeg'
+        })
+
+        await actions.addWorkflow(asset)
+
+        expect(capturedFilenames.values).toContain('abc123hash.jpeg')
+      })
+
+      it('should fall back to asset.name when asset_hash is not available', async () => {
+        const { useMediaAssetActions } = await import('./useMediaAssetActions')
+        const actions = useMediaAssetActions()
+
+        const asset = createMockAsset({
+          name: 'fallback-name.jpeg',
+          asset_hash: undefined
+        })
+
+        await actions.addWorkflow(asset)
+
+        expect(capturedFilenames.values).toContain('fallback-name.jpeg')
+      })
+
+      it('should fall back to asset.name when asset_hash is null', async () => {
+        const { useMediaAssetActions } = await import('./useMediaAssetActions')
+        const actions = useMediaAssetActions()
+
+        const asset = createMockAsset({
+          name: 'fallback-null.jpeg',
+          asset_hash: null
+        })
+
+        await actions.addWorkflow(asset)
+
+        expect(capturedFilenames.values).toContain('fallback-null.jpeg')
+      })
+    })
+  })
+
+  describe('addMultipleToWorkflow', () => {
+    describe('Cloud mode (isCloud = true)', () => {
+      beforeEach(() => {
+        mockIsCloud.value = true
+      })
+
+      it('should use asset_hash for each asset', async () => {
+        const { useMediaAssetActions } = await import('./useMediaAssetActions')
+        const actions = useMediaAssetActions()
+
+        const assets = [
+          createMockAsset({
+            id: '1',
+            name: 'file1.jpeg',
+            asset_hash: 'hash1.jpeg'
+          }),
+          createMockAsset({
+            id: '2',
+            name: 'file2.jpeg',
+            asset_hash: 'hash2.jpeg'
+          })
+        ]
+
+        await actions.addMultipleToWorkflow(assets)
+
+        expect(capturedFilenames.values).toContain('hash1.jpeg')
+        expect(capturedFilenames.values).toContain('hash2.jpeg')
+        expect(capturedFilenames.values).not.toContain('file1.jpeg')
+        expect(capturedFilenames.values).not.toContain('file2.jpeg')
+      })
+    })
+  })
+})
diff --git a/src/platform/assets/composables/useMediaAssetActions.ts b/src/platform/assets/composables/useMediaAssetActions.ts
index 395fae23a..40636b851 100644
--- a/src/platform/assets/composables/useMediaAssetActions.ts
+++ b/src/platform/assets/composables/useMediaAssetActions.ts
@@ -272,10 +272,17 @@ export function useMediaAssetActions() {
     const metadata = getOutputAssetMetadata(targetAsset.user_metadata)
     const assetType = getAssetType(targetAsset, 'input')
 
+    // In Cloud mode, use asset_hash (the actual stored filename)
+    // In OSS mode, use the original name
+    const filename =
+      isCloud && targetAsset.asset_hash
+        ? targetAsset.asset_hash
+        : targetAsset.name
+
     // Create annotated path for the asset
     const annotated = createAnnotatedPath(
       {
-        filename: targetAsset.name,
+        filename,
         subfolder: metadata?.subfolder || '',
         type: isResultItemType(assetType) ? assetType : undefined
       },
@@ -407,9 +414,14 @@ export function useMediaAssetActions() {
       const metadata = getOutputAssetMetadata(asset.user_metadata)
       const assetType = getAssetType(asset, 'input')
 
+      // In Cloud mode, use asset_hash (the actual stored filename)
+      // In OSS mode, use the original name
+      const filename =
+        isCloud && asset.asset_hash ? asset.asset_hash : asset.name
+
       const annotated = createAnnotatedPath(
         {
-          filename: asset.name,
+          filename,
           subfolder: metadata?.subfolder || '',
           type: isResultItemType(assetType) ? assetType : undefined
         },
diff --git a/src/platform/assets/composables/useModelTypes.ts b/src/platform/assets/composables/useModelTypes.ts
index a60d94813..fecb5fdd4 100644
--- a/src/platform/assets/composables/useModelTypes.ts
+++ b/src/platform/assets/composables/useModelTypes.ts
@@ -46,9 +46,10 @@ const DISALLOWED_MODEL_TYPES = ['nlf'] as const
 export const useModelTypes = createSharedComposable(() => {
   const {
     state: modelTypes,
+    isReady,
     isLoading,
     error,
-    execute: fetchModelTypes
+    execute
   } = useAsyncState(
     async (): Promise<ModelTypeOption[]> => {
       const response = await api.getModelFolders()
@@ -74,6 +75,11 @@ export const useModelTypes = createSharedComposable(() => {
     }
   )
 
+  async function fetchModelTypes() {
+    if (isReady.value || isLoading.value) return
+    await execute()
+  }
+
   return {
     modelTypes,
     isLoading,
diff --git a/src/platform/assets/schemas/assetSchema.ts b/src/platform/assets/schemas/assetSchema.ts
index 8a8cf6099..d6941e18c 100644
--- a/src/platform/assets/schemas/assetSchema.ts
+++ b/src/platform/assets/schemas/assetSchema.ts
@@ -10,10 +10,11 @@ const zAsset = z.object({
   tags: z.array(z.string()).optional().default([]),
   preview_id: z.string().nullable().optional(),
   preview_url: z.string().optional(),
-  created_at: z.string(),
+  created_at: z.string().optional(),
   updated_at: z.string().optional(),
   is_immutable: z.boolean().optional(),
   last_access_time: z.string().optional(),
+  metadata: z.record(z.unknown()).optional(), // API allows arbitrary key-value pairs
   user_metadata: z.record(z.unknown()).optional() // API allows arbitrary key-value pairs
 })
 
@@ -90,6 +91,31 @@ export type AsyncUploadResponse = z.infer<typeof zAsyncUploadResponse>
 export type ModelFolder = z.infer<typeof zModelFolder>
 export type ModelFile = z.infer<typeof zModelFile>
 
+/** Payload for updating an asset via PUT /assets/:id */
+export type AssetUpdatePayload = Partial<
+  Pick<AssetItem, 'name' | 'tags' | 'user_metadata'>
+>
+
+/** User-editable metadata fields for model assets */
+const zAssetUserMetadata = z.object({
+  name: z.string().optional(),
+  base_model: z.array(z.string()).optional(),
+  additional_tags: z.array(z.string()).optional(),
+  user_description: z.string().optional()
+})
+
+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.test.ts b/src/platform/assets/services/assetService.test.ts
index ead7902ff..7541a9eec 100644
--- a/src/platform/assets/services/assetService.test.ts
+++ b/src/platform/assets/services/assetService.test.ts
@@ -67,7 +67,7 @@ const MOCK_ASSETS = {
 } as const
 
 // Helper functions
-function mockApiResponse(assets: any[], options = {}) {
+function mockApiResponse(assets: unknown[], options = {}) {
   const response = {
     assets,
     total: assets.length,
@@ -160,7 +160,7 @@ describe('assetService', () => {
       const result = await assetService.getAssetModels('checkpoints')
 
       expect(api.fetchApi).toHaveBeenCalledWith(
-        '/assets?include_tags=models,checkpoints&limit=500'
+        '/assets?include_tags=models%2Ccheckpoints&limit=500'
       )
       expect(result).toEqual([
         expect.objectContaining({ name: 'valid.safetensors', pathIndex: 0 })
@@ -231,9 +231,9 @@ describe('assetService', () => {
       )
       expect(result).toEqual(testAssets)
 
-      // Verify API call includes correct category
+      // Verify API call includes correct category (comma is URL-encoded by URLSearchParams)
       expect(api.fetchApi).toHaveBeenCalledWith(
-        '/assets?include_tags=models,checkpoints&limit=500'
+        '/assets?include_tags=models%2Ccheckpoints&limit=500'
       )
     })
 
@@ -400,7 +400,7 @@ describe('assetService', () => {
       })
 
       expect(api.fetchApi).toHaveBeenCalledWith(
-        '/assets?include_tags=models&limit=500&include_public=true&offset=50'
+        '/assets?include_tags=models&limit=500&offset=50&include_public=true'
       )
       expect(result).toEqual(testAssets)
     })
@@ -415,7 +415,7 @@ describe('assetService', () => {
       })
 
       expect(api.fetchApi).toHaveBeenCalledWith(
-        '/assets?include_tags=input&limit=100&include_public=false&offset=25'
+        '/assets?include_tags=input&limit=100&offset=25&include_public=false'
       )
       expect(result).toEqual(testAssets)
     })
diff --git a/src/platform/assets/services/assetService.ts b/src/platform/assets/services/assetService.ts
index da87681bb..c3b150911 100644
--- a/src/platform/assets/services/assetService.ts
+++ b/src/platform/assets/services/assetService.ts
@@ -1,22 +1,36 @@
 import { fromZodError } from 'zod-validation-error'
 
 import { st } from '@/i18n'
+
 import {
   assetItemSchema,
   assetResponseSchema,
-  asyncUploadResponseSchema
+  asyncUploadResponseSchema,
+  tagsOperationResultSchema
 } from '@/platform/assets/schemas/assetSchema'
 import type {
   AssetItem,
   AssetMetadata,
   AssetResponse,
+  AssetUpdatePayload,
   AsyncUploadResponse,
   ModelFile,
-  ModelFolder
+  ModelFolder,
+  TagsOperationResult
 } from '@/platform/assets/schemas/assetSchema'
 import { api } from '@/scripts/api'
 import { useModelToNodeStore } from '@/stores/modelToNodeStore'
 
+export interface PaginationOptions {
+  limit?: number
+  offset?: number
+}
+
+interface AssetRequestOptions extends PaginationOptions {
+  includeTags: string[]
+  includePublic?: boolean
+}
+
 /**
  * Maps CivitAI validation error codes to localized error messages
  */
@@ -77,9 +91,27 @@ function createAssetService() {
    * Handles API response with consistent error handling and Zod validation
    */
   async function handleAssetRequest(
-    url: string,
+    options: AssetRequestOptions,
     context: string
   ): Promise<AssetResponse> {
+    const {
+      includeTags,
+      limit = DEFAULT_LIMIT,
+      offset,
+      includePublic
+    } = options
+    const queryParams = new URLSearchParams({
+      include_tags: includeTags.join(','),
+      limit: limit.toString()
+    })
+    if (offset !== undefined && offset > 0) {
+      queryParams.set('offset', offset.toString())
+    }
+    if (includePublic !== undefined) {
+      queryParams.set('include_public', includePublic ? 'true' : 'false')
+    }
+
+    const url = `${ASSETS_ENDPOINT}?${queryParams.toString()}`
     const res = await api.fetchApi(url)
     if (!res.ok) {
       throw new Error(
@@ -101,7 +133,7 @@ function createAssetService() {
    */
   async function getAssetModelFolders(): Promise<ModelFolder[]> {
     const data = await handleAssetRequest(
-      `${ASSETS_ENDPOINT}?include_tags=${MODELS_TAG}&limit=${DEFAULT_LIMIT}`,
+      { includeTags: [MODELS_TAG] },
       'model folders'
     )
 
@@ -130,7 +162,7 @@ function createAssetService() {
    */
   async function getAssetModels(folder: string): Promise<ModelFile[]> {
     const data = await handleAssetRequest(
-      `${ASSETS_ENDPOINT}?include_tags=${MODELS_TAG},${folder}&limit=${DEFAULT_LIMIT}`,
+      { includeTags: [MODELS_TAG, folder] },
       `models for ${folder}`
     )
 
@@ -169,9 +201,15 @@ function createAssetService() {
    * and fetching all assets with that category tag
    *
    * @param nodeType - The ComfyUI node type (e.g., 'CheckpointLoaderSimple')
+   * @param options - Pagination options
+   * @param options.limit - Maximum number of assets to return (default: 500)
+   * @param options.offset - Number of assets to skip (default: 0)
    * @returns Promise<AssetItem[]> - Full asset objects with preserved metadata
    */
-  async function getAssetsForNodeType(nodeType: string): Promise<AssetItem[]> {
+  async function getAssetsForNodeType(
+    nodeType: string,
+    { limit = DEFAULT_LIMIT, offset = 0 }: PaginationOptions = {}
+  ): Promise<AssetItem[]> {
     if (!nodeType || typeof nodeType !== 'string') {
       return []
     }
@@ -186,7 +224,7 @@ function createAssetService() {
 
     // Fetch assets for this category using same API pattern as getAssetModels
     const data = await handleAssetRequest(
-      `${ASSETS_ENDPOINT}?include_tags=${MODELS_TAG},${category}&limit=${DEFAULT_LIMIT}`,
+      { includeTags: [MODELS_TAG, category], limit, offset },
       `assets for ${nodeType}`
     )
 
@@ -242,23 +280,10 @@ function createAssetService() {
   async function getAssetsByTag(
     tag: string,
     includePublic: boolean = true,
-    {
-      limit = DEFAULT_LIMIT,
-      offset = 0
-    }: { limit?: number; offset?: number } = {}
+    { limit = DEFAULT_LIMIT, offset = 0 }: PaginationOptions = {}
   ): Promise<AssetItem[]> {
-    const queryParams = new URLSearchParams({
-      include_tags: tag,
-      limit: limit.toString(),
-      include_public: includePublic ? 'true' : 'false'
-    })
-
-    if (offset > 0) {
-      queryParams.set('offset', offset.toString())
-    }
-
     const data = await handleAssetRequest(
-      `${ASSETS_ENDPOINT}?${queryParams.toString()}`,
+      { includeTags: [tag], limit, offset, includePublic },
       `assets for tag ${tag}`
     )
 
@@ -298,7 +323,7 @@ function createAssetService() {
    */
   async function updateAsset(
     id: string,
-    newData: Partial<AssetMetadata>
+    newData: AssetUpdatePayload
   ): Promise<AssetItem> {
     const res = await api.fetchApi(`${ASSETS_ENDPOINT}/${id}`, {
       method: 'PUT',
@@ -448,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
@@ -523,6 +608,8 @@ function createAssetService() {
     getAssetsByTag,
     deleteAsset,
     updateAsset,
+    addAssetTags,
+    removeAssetTags,
     getAssetMetadata,
     uploadAssetFromUrl,
     uploadAssetFromBase64,
diff --git a/src/platform/assets/utils/assetMetadataUtils.test.ts b/src/platform/assets/utils/assetMetadataUtils.test.ts
index 54551f595..9154e9f61 100644
--- a/src/platform/assets/utils/assetMetadataUtils.test.ts
+++ b/src/platform/assets/utils/assetMetadataUtils.test.ts
@@ -2,8 +2,16 @@ import { describe, expect, it } from 'vitest'
 
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import {
+  getAssetAdditionalTags,
   getAssetBaseModel,
-  getAssetDescription
+  getAssetBaseModels,
+  getAssetDescription,
+  getAssetDisplayName,
+  getAssetModelType,
+  getAssetSourceUrl,
+  getAssetTriggerPhrases,
+  getAssetUserDescription,
+  getSourceName
 } from '@/platform/assets/utils/assetMetadataUtils'
 
 describe('assetMetadataUtils', () => {
@@ -20,20 +28,17 @@ describe('assetMetadataUtils', () => {
   }
 
   describe('getAssetDescription', () => {
-    it('should return string description when present', () => {
-      const asset = {
-        ...mockAsset,
-        user_metadata: { description: 'A test model' }
-      }
-      expect(getAssetDescription(asset)).toBe('A test model')
-    })
-
-    it('should return null when description is not a string', () => {
-      const asset = {
-        ...mockAsset,
-        user_metadata: { description: 123 }
-      }
-      expect(getAssetDescription(asset)).toBeNull()
+    it.for([
+      {
+        name: 'returns string description when present',
+        description: 'A test model',
+        expected: 'A test model'
+      },
+      { name: 'returns null for non-string', description: 123, expected: null },
+      { name: 'returns null for null', description: null, expected: null }
+    ])('$name', ({ description, expected }) => {
+      const asset = { ...mockAsset, user_metadata: { description } }
+      expect(getAssetDescription(asset)).toBe(expected)
     })
 
     it('should return null when no metadata', () => {
@@ -42,24 +47,228 @@ describe('assetMetadataUtils', () => {
   })
 
   describe('getAssetBaseModel', () => {
-    it('should return string base_model when present', () => {
-      const asset = {
-        ...mockAsset,
-        user_metadata: { base_model: 'SDXL' }
-      }
-      expect(getAssetBaseModel(asset)).toBe('SDXL')
-    })
-
-    it('should return null when base_model is not a string', () => {
-      const asset = {
-        ...mockAsset,
-        user_metadata: { base_model: 123 }
-      }
-      expect(getAssetBaseModel(asset)).toBeNull()
+    it.for([
+      {
+        name: 'returns string base_model when present',
+        base_model: 'SDXL',
+        expected: 'SDXL'
+      },
+      { name: 'returns null for non-string', base_model: 123, expected: null },
+      { name: 'returns null for null', base_model: null, expected: null }
+    ])('$name', ({ base_model, expected }) => {
+      const asset = { ...mockAsset, user_metadata: { base_model } }
+      expect(getAssetBaseModel(asset)).toBe(expected)
     })
 
     it('should return null when no metadata', () => {
       expect(getAssetBaseModel(mockAsset)).toBeNull()
     })
   })
+
+  describe('getAssetDisplayName', () => {
+    it.for([
+      {
+        name: 'returns name from user_metadata when present',
+        user_metadata: { name: 'My Custom Name' },
+        expected: 'My Custom Name'
+      },
+      {
+        name: 'falls back to asset name for non-string',
+        user_metadata: { name: 123 },
+        expected: 'test-model'
+      },
+      {
+        name: 'falls back to asset name for undefined',
+        user_metadata: undefined,
+        expected: 'test-model'
+      }
+    ])('$name', ({ user_metadata, expected }) => {
+      const asset = { ...mockAsset, user_metadata }
+      expect(getAssetDisplayName(asset)).toBe(expected)
+    })
+  })
+
+  describe('getAssetSourceUrl', () => {
+    it.for([
+      {
+        name: 'constructs URL from civitai format',
+        source_arn: 'civitai:model:123:version:456',
+        expected: 'https://civitai.com/models/123?modelVersionId=456'
+      },
+      { name: 'returns null for non-string', source_arn: 123, expected: null },
+      {
+        name: 'returns null for unrecognized format',
+        source_arn: 'unknown:format',
+        expected: null
+      }
+    ])('$name', ({ source_arn, expected }) => {
+      const asset = { ...mockAsset, user_metadata: { source_arn } }
+      expect(getAssetSourceUrl(asset)).toBe(expected)
+    })
+
+    it('should return null when no metadata', () => {
+      expect(getAssetSourceUrl(mockAsset)).toBeNull()
+    })
+  })
+
+  describe('getAssetTriggerPhrases', () => {
+    it.for([
+      {
+        name: 'returns array when array present',
+        trained_words: ['phrase1', 'phrase2'],
+        expected: ['phrase1', 'phrase2']
+      },
+      {
+        name: 'wraps single string in array',
+        trained_words: 'single phrase',
+        expected: ['single phrase']
+      },
+      {
+        name: 'filters non-string values from array',
+        trained_words: ['valid', 123, 'also valid', null],
+        expected: ['valid', 'also valid']
+      }
+    ])('$name', ({ trained_words, expected }) => {
+      const asset = { ...mockAsset, user_metadata: { trained_words } }
+      expect(getAssetTriggerPhrases(asset)).toEqual(expected)
+    })
+
+    it('should return empty array when no metadata', () => {
+      expect(getAssetTriggerPhrases(mockAsset)).toEqual([])
+    })
+  })
+
+  describe('getAssetAdditionalTags', () => {
+    it.for([
+      {
+        name: 'returns array of tags when present',
+        additional_tags: ['tag1', 'tag2'],
+        expected: ['tag1', 'tag2']
+      },
+      {
+        name: 'filters non-string values from array',
+        additional_tags: ['valid', 123, 'also valid'],
+        expected: ['valid', 'also valid']
+      },
+      {
+        name: 'returns empty array for non-array',
+        additional_tags: 'not an array',
+        expected: []
+      }
+    ])('$name', ({ additional_tags, expected }) => {
+      const asset = { ...mockAsset, user_metadata: { additional_tags } }
+      expect(getAssetAdditionalTags(asset)).toEqual(expected)
+    })
+
+    it('should return empty array when no metadata', () => {
+      expect(getAssetAdditionalTags(mockAsset)).toEqual([])
+    })
+  })
+
+  describe('getSourceName', () => {
+    it.for([
+      {
+        name: 'returns Civitai for civitai.com',
+        url: 'https://civitai.com/models/123',
+        expected: 'Civitai'
+      },
+      {
+        name: 'returns Hugging Face for huggingface.co',
+        url: 'https://huggingface.co/org/model',
+        expected: 'Hugging Face'
+      },
+      {
+        name: 'returns Source for unknown URLs',
+        url: 'https://example.com/model',
+        expected: 'Source'
+      }
+    ])('$name', ({ url, expected }) => {
+      expect(getSourceName(url)).toBe(expected)
+    })
+  })
+
+  describe('getAssetBaseModels', () => {
+    it.for([
+      {
+        name: 'array of strings',
+        base_model: ['SDXL', 'SD1.5', 'Flux'],
+        expected: ['SDXL', 'SD1.5', 'Flux']
+      },
+      {
+        name: 'filters non-string entries',
+        base_model: ['SDXL', 123, 'SD1.5', null, undefined],
+        expected: ['SDXL', 'SD1.5']
+      },
+      {
+        name: 'single string wrapped in array',
+        base_model: 'SDXL',
+        expected: ['SDXL']
+      },
+      {
+        name: 'non-array/string returns empty',
+        base_model: 123,
+        expected: []
+      },
+      { name: 'undefined returns empty', base_model: undefined, expected: [] }
+    ])('$name', ({ base_model, expected }) => {
+      const asset = { ...mockAsset, user_metadata: { base_model } }
+      expect(getAssetBaseModels(asset)).toEqual(expected)
+    })
+
+    it('should return empty array when no metadata', () => {
+      expect(getAssetBaseModels(mockAsset)).toEqual([])
+    })
+  })
+
+  describe('getAssetModelType', () => {
+    it.for([
+      {
+        name: 'returns model type from tags',
+        tags: ['models', 'checkpoints'],
+        expected: 'checkpoints'
+      },
+      {
+        name: 'extracts last segment from path-style tags',
+        tags: ['models', 'models/loras'],
+        expected: 'loras'
+      },
+      {
+        name: 'returns null when only models tag',
+        tags: ['models'],
+        expected: null
+      },
+      { name: 'returns null when tags empty', tags: [], expected: null }
+    ])('$name', ({ tags, expected }) => {
+      const asset = { ...mockAsset, tags }
+      expect(getAssetModelType(asset)).toBe(expected)
+    })
+  })
+
+  describe('getAssetUserDescription', () => {
+    it.for([
+      {
+        name: 'returns description when present',
+        user_description: 'A custom user description',
+        expected: 'A custom user description'
+      },
+      {
+        name: 'returns empty for non-string',
+        user_description: 123,
+        expected: ''
+      },
+      { name: 'returns empty for null', user_description: null, expected: '' },
+      {
+        name: 'returns empty for undefined',
+        user_description: undefined,
+        expected: ''
+      }
+    ])('$name', ({ user_description, expected }) => {
+      const asset = { ...mockAsset, user_metadata: { user_description } }
+      expect(getAssetUserDescription(asset)).toBe(expected)
+    })
+
+    it('should return empty string when no metadata', () => {
+      expect(getAssetUserDescription(mockAsset)).toBe('')
+    })
+  })
 })
diff --git a/src/platform/assets/utils/assetMetadataUtils.ts b/src/platform/assets/utils/assetMetadataUtils.ts
index 2d32fa07f..896a526d4 100644
--- a/src/platform/assets/utils/assetMetadataUtils.ts
+++ b/src/platform/assets/utils/assetMetadataUtils.ts
@@ -1,27 +1,164 @@
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 
 /**
- * Type-safe utilities for extracting metadata from assets
+ * Type-safe utilities for extracting metadata from assets.
+ * These utilities check user_metadata first, then metadata, then fallback.
  */
 
+/**
+ * Helper to get a string property from user_metadata or metadata
+ */
+function getStringProperty(asset: AssetItem, key: string): string | undefined {
+  const userValue = asset.user_metadata?.[key]
+  if (typeof userValue === 'string') return userValue
+
+  const metaValue = asset.metadata?.[key]
+  if (typeof metaValue === 'string') return metaValue
+
+  return undefined
+}
+
 /**
  * Safely extracts string description from asset metadata
+ * Checks user_metadata first, then metadata, then returns null
  * @param asset - The asset to extract description from
  * @returns The description string or null if not present/not a string
  */
 export function getAssetDescription(asset: AssetItem): string | null {
-  return typeof asset.user_metadata?.description === 'string'
-    ? asset.user_metadata.description
-    : null
+  return getStringProperty(asset, 'description') ?? null
 }
 
 /**
  * Safely extracts string base_model from asset metadata
+ * Checks user_metadata first, then metadata, then returns null
  * @param asset - The asset to extract base_model from
  * @returns The base_model string or null if not present/not a string
  */
 export function getAssetBaseModel(asset: AssetItem): string | null {
-  return typeof asset.user_metadata?.base_model === 'string'
-    ? asset.user_metadata.base_model
-    : null
+  return getStringProperty(asset, 'base_model') ?? null
+}
+
+/**
+ * Extracts base models as an array from asset metadata
+ * Checks user_metadata first, then metadata, then returns empty array
+ * @param asset - The asset to extract base models from
+ * @returns Array of base model strings
+ */
+export function getAssetBaseModels(asset: AssetItem): string[] {
+  const baseModel =
+    asset.user_metadata?.base_model ?? asset.metadata?.base_model
+  if (Array.isArray(baseModel)) {
+    return baseModel.filter((m): m is string => typeof m === 'string')
+  }
+  if (typeof baseModel === 'string' && baseModel) {
+    return [baseModel]
+  }
+  return []
+}
+
+/**
+ * Gets the display name for an asset
+ * Checks user_metadata.name first, then metadata.name, then asset.name
+ * @param asset - The asset to get display name from
+ * @returns The display name
+ */
+export function getAssetDisplayName(asset: AssetItem): string {
+  return getStringProperty(asset, 'name') ?? asset.name
+}
+
+/**
+ * Constructs source URL from asset's source_arn
+ * @param asset - The asset to extract source URL from
+ * @returns The source URL or null if not present/parseable
+ */
+export function getAssetSourceUrl(asset: AssetItem): string | null {
+  if (typeof asset.metadata?.repo_url === 'string') {
+    return asset.metadata.repo_url
+  }
+  // Note: Reversed priority for backwards compatibility
+  const sourceArn =
+    asset.metadata?.source_arn ?? asset.user_metadata?.source_arn
+  if (typeof sourceArn !== 'string') return null
+
+  const civitaiMatch = sourceArn.match(
+    /^civitai:model:(\d+):version:(\d+)(?::file:\d+)?$/
+  )
+  if (civitaiMatch) {
+    const [, modelId, versionId] = civitaiMatch
+    return `https://civitai.com/models/${modelId}?modelVersionId=${versionId}`
+  }
+
+  return null
+}
+
+/**
+ * Extracts trigger phrases from asset metadata
+ * Checks user_metadata first, then metadata, then returns empty array
+ * @param asset - The asset to extract trigger phrases from
+ * @returns Array of trigger phrases
+ */
+export function getAssetTriggerPhrases(asset: AssetItem): string[] {
+  const phrases =
+    asset.user_metadata?.trained_words ?? asset.metadata?.trained_words
+  if (Array.isArray(phrases)) {
+    return phrases.filter((p): p is string => typeof p === 'string')
+  }
+  if (typeof phrases === 'string') return [phrases]
+  return []
+}
+
+/**
+ * Extracts additional tags from asset user_metadata
+ * @param asset - The asset to extract tags from
+ * @returns Array of user-defined tags
+ */
+export function getAssetAdditionalTags(asset: AssetItem): string[] {
+  const tags = asset.user_metadata?.additional_tags
+  if (Array.isArray(tags)) {
+    return tags.filter((t): t is string => typeof t === 'string')
+  }
+  return []
+}
+
+/**
+ * Determines the source name from a URL
+ * @param url - The source URL
+ * @returns Human-readable source name
+ */
+export function getSourceName(url: string): string {
+  if (url.includes('civitai.com')) return 'Civitai'
+  if (url.includes('huggingface.co')) return 'Hugging Face'
+  return 'Source'
+}
+
+/**
+ * Extracts the model type from asset tags
+ * @param asset - The asset to extract model type from
+ * @returns The model type string or null if not present
+ */
+export function getAssetModelType(asset: AssetItem): string | null {
+  const typeTag = asset.tags?.find((tag) => tag && tag !== 'models')
+  if (!typeTag) return null
+  return typeTag.includes('/') ? (typeTag.split('/').pop() ?? null) : typeTag
+}
+
+/**
+ * Extracts user description from asset user_metadata
+ * @param asset - The asset to extract user description from
+ * @returns The user description string or empty string if not present
+ */
+export function getAssetUserDescription(asset: AssetItem): string {
+  return typeof asset.user_metadata?.user_description === 'string'
+    ? asset.user_metadata.user_description
+    : ''
+}
+
+/**
+ * Gets the filename for an asset with fallback chain
+ * Checks user_metadata.filename first, then metadata.filename, then asset.name
+ * @param asset - The asset to extract filename from
+ * @returns The filename string
+ */
+export function getAssetFilename(asset: AssetItem): string {
+  return getStringProperty(asset, 'filename') ?? asset.name
 }
diff --git a/src/platform/assets/utils/createModelNodeFromAsset.test.ts b/src/platform/assets/utils/createModelNodeFromAsset.test.ts
index e8b12587b..8594510b6 100644
--- a/src/platform/assets/utils/createModelNodeFromAsset.test.ts
+++ b/src/platform/assets/utils/createModelNodeFromAsset.test.ts
@@ -226,6 +226,30 @@ describe('createModelNodeFromAsset', () => {
       expect(result.success).toBe(true)
       expect(vi.mocked(app).canvas.graph!.add).toHaveBeenCalledWith(mockNode)
     })
+    it('should fallback to asset.metadata.filename when user_metadata.filename missing', async () => {
+      const asset = createMockAsset({
+        user_metadata: {},
+        metadata: { filename: 'models/checkpoints/from-metadata.safetensors' }
+      })
+      const mockNode = await createMockNode()
+      await setupMocks({ createdNode: mockNode })
+      const result = createModelNodeFromAsset(asset)
+      expect(result.success).toBe(true)
+      expect(mockNode.widgets?.[0].value).toBe(
+        'models/checkpoints/from-metadata.safetensors'
+      )
+    })
+    it('should fallback to asset.name when both filename sources missing', async () => {
+      const asset = createMockAsset({
+        user_metadata: {},
+        metadata: undefined
+      })
+      const mockNode = await createMockNode()
+      await setupMocks({ createdNode: mockNode })
+      const result = createModelNodeFromAsset(asset)
+      expect(result.success).toBe(true)
+      expect(mockNode.widgets?.[0].value).toBe('test-model.safetensors')
+    })
     it('should add node to active subgraph when present', async () => {
       const asset = createMockAsset()
       const mockNode = await createMockNode()
@@ -253,27 +277,18 @@ describe('createModelNodeFromAsset', () => {
     })
     it.each([
       {
-        case: 'missing user_metadata',
-        overrides: { user_metadata: undefined },
+        case: 'missing user_metadata with no fallback',
+        overrides: { user_metadata: undefined, metadata: undefined, name: '' },
         expectedCode: 'INVALID_ASSET' as const,
-        errorPattern: /missing required user_metadata/
+        errorPattern: /Invalid filename.*expected non-empty string/
       },
       {
-        case: 'missing filename property',
-        overrides: { user_metadata: {} },
-        expectedCode: 'INVALID_ASSET' as const,
-        errorPattern:
-          /Invalid filename.*expected non-empty string, got undefined/
-      },
-      {
-        case: 'non-string filename',
-        overrides: { user_metadata: { filename: 123 } },
-        expectedCode: 'INVALID_ASSET' as const,
-        errorPattern: /Invalid filename.*expected non-empty string, got number/
-      },
-      {
-        case: 'empty filename',
-        overrides: { user_metadata: { filename: '' } },
+        case: 'empty filename with no fallback',
+        overrides: {
+          user_metadata: { filename: '' },
+          metadata: undefined,
+          name: ''
+        },
         expectedCode: 'INVALID_ASSET' as const,
         errorPattern: /Invalid filename.*expected non-empty string/
       }
diff --git a/src/platform/assets/utils/createModelNodeFromAsset.ts b/src/platform/assets/utils/createModelNodeFromAsset.ts
index b180a0a5d..7bf8b752b 100644
--- a/src/platform/assets/utils/createModelNodeFromAsset.ts
+++ b/src/platform/assets/utils/createModelNodeFromAsset.ts
@@ -6,6 +6,7 @@ import {
   MISSING_TAG,
   MODELS_TAG
 } from '@/platform/assets/services/assetService'
+import { getAssetFilename } from '@/platform/assets/utils/assetMetadataUtils'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { app } from '@/scripts/app'
 import { useLitegraphService } from '@/services/litegraphService'
@@ -69,21 +70,8 @@ export function createModelNodeFromAsset(
 
   const validAsset = validatedAsset.data
 
-  const userMetadata = validAsset.user_metadata
-  if (!userMetadata) {
-    console.error(`Asset ${validAsset.id} missing required user_metadata`)
-    return {
-      success: false,
-      error: {
-        code: 'INVALID_ASSET',
-        message: 'Asset missing required user_metadata',
-        assetId: validAsset.id
-      }
-    }
-  }
-
-  const filename = userMetadata.filename
-  if (typeof filename !== 'string' || filename.length === 0) {
+  const filename = getAssetFilename(validAsset)
+  if (filename.length === 0) {
     console.error(
       `Asset ${validAsset.id} has invalid user_metadata.filename (expected non-empty string, got ${typeof filename})`
     )
diff --git a/src/platform/auth/session/useSessionCookie.ts b/src/platform/auth/session/useSessionCookie.ts
index a919b59eb..295e2ab26 100644
--- a/src/platform/auth/session/useSessionCookie.ts
+++ b/src/platform/auth/session/useSessionCookie.ts
@@ -1,5 +1,5 @@
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { isCloud } from '@/platform/distribution/types'
-import { remoteConfig } from '@/platform/remoteConfig/remoteConfig'
 import { api } from '@/scripts/api'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
 
@@ -19,12 +19,13 @@ export const useSessionCookie = () => {
   const createSession = async (): Promise<void> => {
     if (!isCloud) return
 
+    const { flags } = useFeatureFlags()
     try {
       const authStore = useFirebaseAuthStore()
 
       let authHeader: Record<string, string>
 
-      if (remoteConfig.value.team_workspaces_enabled) {
+      if (flags.teamWorkspacesEnabled) {
         const firebaseToken = await authStore.getIdToken()
         if (!firebaseToken) {
           console.warn(
diff --git a/src/platform/auth/workspace/useWorkspaceAuth.test.ts b/src/platform/auth/workspace/useWorkspaceAuth.test.ts
index 68f5a198c..ca8152d16 100644
--- a/src/platform/auth/workspace/useWorkspaceAuth.test.ts
+++ b/src/platform/auth/workspace/useWorkspaceAuth.test.ts
@@ -26,14 +26,16 @@ vi.mock('@/i18n', () => ({
   t: (key: string) => key
 }))
 
-const mockRemoteConfig = vi.hoisted(() => ({
-  value: {
-    team_workspaces_enabled: true
-  }
-}))
+const mockTeamWorkspacesEnabled = vi.hoisted(() => ({ value: true }))
 
-vi.mock('@/platform/remoteConfig/remoteConfig', () => ({
-  remoteConfig: mockRemoteConfig
+vi.mock('@/composables/useFeatureFlags', () => ({
+  useFeatureFlags: () => ({
+    flags: {
+      get teamWorkspacesEnabled() {
+        return mockTeamWorkspacesEnabled.value
+      }
+    }
+  })
 }))
 
 const mockWorkspace = {
@@ -622,11 +624,11 @@ describe('useWorkspaceAuthStore', () => {
 
   describe('feature flag disabled', () => {
     beforeEach(() => {
-      mockRemoteConfig.value.team_workspaces_enabled = false
+      mockTeamWorkspacesEnabled.value = false
     })
 
     afterEach(() => {
-      mockRemoteConfig.value.team_workspaces_enabled = true
+      mockTeamWorkspacesEnabled.value = true
     })
 
     it('initializeFromSession returns false when flag disabled', () => {
diff --git a/src/platform/auth/workspace/useWorkspaceSwitch.test.ts b/src/platform/auth/workspace/useWorkspaceSwitch.test.ts
index ae71937b2..914c8bf9a 100644
--- a/src/platform/auth/workspace/useWorkspaceSwitch.test.ts
+++ b/src/platform/auth/workspace/useWorkspaceSwitch.test.ts
@@ -1,22 +1,22 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { useWorkspaceSwitch } from '@/platform/auth/workspace/useWorkspaceSwitch'
-import type { WorkspaceWithRole } from '@/platform/auth/workspace/workspaceTypes'
+import type { WorkspaceWithRole } from '@/platform/workspace/api/workspaceApi'
 
 const mockSwitchWorkspace = vi.hoisted(() => vi.fn())
-const mockCurrentWorkspace = vi.hoisted(() => ({
+const mockActiveWorkspace = vi.hoisted(() => ({
   value: null as WorkspaceWithRole | null
 }))
 
-vi.mock('@/stores/workspaceAuthStore', () => ({
-  useWorkspaceAuthStore: () => ({
+vi.mock('@/platform/workspace/stores/teamWorkspaceStore', () => ({
+  useTeamWorkspaceStore: () => ({
     switchWorkspace: mockSwitchWorkspace
   })
 }))
 
 vi.mock('pinia', () => ({
   storeToRefs: () => ({
-    currentWorkspace: mockCurrentWorkspace
+    activeWorkspace: mockActiveWorkspace
   })
 }))
 
@@ -46,19 +46,16 @@ vi.mock('vue-i18n', () => ({
   })
 }))
 
-const mockReload = vi.fn()
-
 describe('useWorkspaceSwitch', () => {
   beforeEach(() => {
     vi.clearAllMocks()
-    mockCurrentWorkspace.value = {
+    mockActiveWorkspace.value = {
       id: 'workspace-1',
       name: 'Test Workspace',
       type: 'personal',
       role: 'owner'
     }
     mockModifiedWorkflows.length = 0
-    vi.stubGlobal('location', { reload: mockReload })
   })
 
   afterEach(() => {
@@ -109,7 +106,6 @@ describe('useWorkspaceSwitch', () => {
       expect(result).toBe(true)
       expect(mockConfirm).not.toHaveBeenCalled()
       expect(mockSwitchWorkspace).toHaveBeenCalledWith('workspace-2')
-      expect(mockReload).toHaveBeenCalled()
     })
 
     it('shows confirmation dialog when there are unsaved changes', async () => {
@@ -136,10 +132,9 @@ describe('useWorkspaceSwitch', () => {
 
       expect(result).toBe(false)
       expect(mockSwitchWorkspace).not.toHaveBeenCalled()
-      expect(mockReload).not.toHaveBeenCalled()
     })
 
-    it('calls switchWorkspace and reloads page after user confirms', async () => {
+    it('calls switchWorkspace after user confirms', async () => {
       mockModifiedWorkflows.push({ isModified: true })
       mockConfirm.mockResolvedValue(true)
       mockSwitchWorkspace.mockResolvedValue(undefined)
@@ -149,7 +144,6 @@ describe('useWorkspaceSwitch', () => {
 
       expect(result).toBe(true)
       expect(mockSwitchWorkspace).toHaveBeenCalledWith('workspace-2')
-      expect(mockReload).toHaveBeenCalled()
     })
 
     it('returns false if switchWorkspace throws an error', async () => {
@@ -160,7 +154,6 @@ describe('useWorkspaceSwitch', () => {
       const result = await switchWithConfirmation('workspace-2')
 
       expect(result).toBe(false)
-      expect(mockReload).not.toHaveBeenCalled()
     })
   })
 })
diff --git a/src/platform/auth/workspace/useWorkspaceSwitch.ts b/src/platform/auth/workspace/useWorkspaceSwitch.ts
index 6fb970d7f..e8983ce41 100644
--- a/src/platform/auth/workspace/useWorkspaceSwitch.ts
+++ b/src/platform/auth/workspace/useWorkspaceSwitch.ts
@@ -2,13 +2,13 @@ import { storeToRefs } from 'pinia'
 import { useI18n } from 'vue-i18n'
 
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
 import { useDialogService } from '@/services/dialogService'
-import { useWorkspaceAuthStore } from '@/stores/workspaceAuthStore'
 
 export function useWorkspaceSwitch() {
   const { t } = useI18n()
-  const workspaceAuthStore = useWorkspaceAuthStore()
-  const { currentWorkspace } = storeToRefs(workspaceAuthStore)
+  const workspaceStore = useTeamWorkspaceStore()
+  const { activeWorkspace } = storeToRefs(workspaceStore)
   const workflowStore = useWorkflowStore()
   const dialogService = useDialogService()
 
@@ -17,7 +17,7 @@ export function useWorkspaceSwitch() {
   }
 
   async function switchWithConfirmation(workspaceId: string): Promise<boolean> {
-    if (currentWorkspace.value?.id === workspaceId) {
+    if (activeWorkspace.value?.id === workspaceId) {
       return true
     }
 
@@ -34,8 +34,8 @@ export function useWorkspaceSwitch() {
     }
 
     try {
-      await workspaceAuthStore.switchWorkspace(workspaceId)
-      window.location.reload()
+      await workspaceStore.switchWorkspace(workspaceId)
+      // Note: switchWorkspace triggers page reload internally
       return true
     } catch {
       return false
diff --git a/src/platform/auth/workspace/workspaceConstants.ts b/src/platform/auth/workspace/workspaceConstants.ts
index cc28d1f47..b56c1644d 100644
--- a/src/platform/auth/workspace/workspaceConstants.ts
+++ b/src/platform/auth/workspace/workspaceConstants.ts
@@ -1,7 +1,10 @@
 export const WORKSPACE_STORAGE_KEYS = {
+  // sessionStorage keys (cleared on browser close)
   CURRENT_WORKSPACE: 'Comfy.Workspace.Current',
   TOKEN: 'Comfy.Workspace.Token',
-  EXPIRES_AT: 'Comfy.Workspace.ExpiresAt'
+  EXPIRES_AT: 'Comfy.Workspace.ExpiresAt',
+  // localStorage key (persists across browser sessions)
+  LAST_WORKSPACE_ID: 'Comfy.Workspace.LastWorkspaceId'
 } as const
 
 export const TOKEN_REFRESH_BUFFER_MS = 5 * 60 * 1000
diff --git a/src/platform/cloud/subscription/components/PricingTable.test.ts b/src/platform/cloud/subscription/components/PricingTable.test.ts
index 2094805d3..7e649e8fc 100644
--- a/src/platform/cloud/subscription/components/PricingTable.test.ts
+++ b/src/platform/cloud/subscription/components/PricingTable.test.ts
@@ -14,7 +14,7 @@ const mockSubscriptionTier = ref<
 const mockIsYearlySubscription = ref(false)
 const mockAccessBillingPortal = vi.fn()
 const mockReportError = vi.fn()
-const mockGetAuthHeader = vi.fn(() =>
+const mockGetFirebaseAuthHeader = vi.fn(() =>
   Promise.resolve({ Authorization: 'Bearer test-token' })
 )
 
@@ -53,7 +53,7 @@ vi.mock('@/composables/useErrorHandling', () => ({
 
 vi.mock('@/stores/firebaseAuthStore', () => ({
   useFirebaseAuthStore: () => ({
-    getAuthHeader: mockGetAuthHeader
+    getFirebaseAuthHeader: mockGetFirebaseAuthHeader
   }),
   FirebaseAuthStoreError: class extends Error {}
 }))
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..4b5dc06a3 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,34 @@
 </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 { computed, 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 = computed(
+  () => 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 +103,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..82bf559e0
--- /dev/null
+++ b/src/platform/cloud/subscription/components/SubscriptionPanelContentWorkspace.vue
@@ -0,0 +1,450 @@
+<template>
+  <div class="grow overflow-auto pt-6">
+    <div class="rounded-2xl border border-interface-stroke p-6">
+      <div>
+        <div
+          class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between md:gap-2"
+        >
+          <!-- OWNER Unsubscribed State -->
+          <template v-if="showSubscribePrompt">
+            <div class="flex flex-col gap-2">
+              <div class="text-sm font-bold text-text-primary">
+                {{ $t('subscription.workspaceNotSubscribed') }}
+              </div>
+              <div class="text-sm text-text-secondary">
+                {{ $t('subscription.subscriptionRequiredMessage') }}
+              </div>
+            </div>
+            <Button
+              variant="primary"
+              size="lg"
+              class="ml-auto rounded-lg px-4 py-2 text-sm font-normal"
+              @click="handleSubscribeWorkspace"
+            >
+              {{ $t('subscription.subscribeNow') }}
+            </Button>
+          </template>
+
+          <!-- MEMBER View - read-only, 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>
+
+            <div
+              v-if="isActiveSubscription && permissions.canManageSubscription"
+              class="flex flex-wrap gap-2 md:ml-auto"
+            >
+              <Button
+                size="lg"
+                variant="secondary"
+                class="rounded-lg px-4 text-sm font-normal text-text-primary bg-interface-menu-component-surface-selected"
+                @click="
+                  async () => {
+                    await authActions.accessBillingPortal()
+                  }
+                "
+              >
+                {{ $t('subscription.managePayment') }}
+              </Button>
+              <Button
+                size="lg"
+                variant="primary"
+                class="rounded-lg px-4 text-sm font-normal text-text-primary"
+                @click="showSubscriptionDialog"
+              >
+                {{ $t('subscription.upgradePlan') }}
+              </Button>
+              <Button
+                v-tooltip="{ value: $t('g.moreOptions'), showDelay: 300 }"
+                variant="secondary"
+                size="lg"
+                :aria-label="$t('g.moreOptions')"
+                @click="planMenu?.toggle($event)"
+              >
+                <i class="pi pi-ellipsis-h" />
+              </Button>
+              <Menu ref="planMenu" :model="planMenuItems" :popup="true" />
+            </div>
+          </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 { useDialogService } from '@/services/dialogService'
+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, isInPersonalWorkspace } =
+  storeToRefs(workspaceStore)
+const { subscribeWorkspace } = workspaceStore
+const { permissions, workspaceRole } = useWorkspaceUI()
+const { t, n } = useI18n()
+const { showBillingComingSoonDialog } = useDialogService()
+
+// Show subscribe prompt to owners without active subscription
+const showSubscribePrompt = computed(() => {
+  if (workspaceRole.value !== 'owner') return false
+  if (isInPersonalWorkspace.value) return !isActiveSubscription.value
+  return !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(
+  () => showSubscribePrompt.value || isMemberView.value
+)
+
+// Subscribe workspace - show billing coming soon dialog for team workspaces
+function handleSubscribeWorkspace() {
+  if (!isInPersonalWorkspace.value) {
+    showBillingComingSoonDialog()
+    return
+  }
+  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/cloud/subscription/utils/subscriptionCheckoutUtil.ts b/src/platform/cloud/subscription/utils/subscriptionCheckoutUtil.ts
index bc77e68e9..746a7d616 100644
--- a/src/platform/cloud/subscription/utils/subscriptionCheckoutUtil.ts
+++ b/src/platform/cloud/subscription/utils/subscriptionCheckoutUtil.ts
@@ -35,8 +35,8 @@ export async function performSubscriptionCheckout(
 ): Promise<void> {
   if (!isCloud) return
 
-  const { getAuthHeader } = useFirebaseAuthStore()
-  const authHeader = await getAuthHeader()
+  const { getFirebaseAuthHeader } = useFirebaseAuthStore()
+  const authHeader = await getFirebaseAuthHeader()
 
   if (!authHeader) {
     throw new FirebaseAuthStoreError(t('toastMessages.userNotAuthenticated'))
diff --git a/src/platform/navigation/preservedQueryManager.ts b/src/platform/navigation/preservedQueryManager.ts
index 358d40144..24d468614 100644
--- a/src/platform/navigation/preservedQueryManager.ts
+++ b/src/platform/navigation/preservedQueryManager.ts
@@ -56,7 +56,9 @@ const writeToStorage = (
 }
 
 export const hydratePreservedQuery = (namespace: string) => {
-  if (preservedQueries.has(namespace)) return
+  if (preservedQueries.has(namespace)) {
+    return
+  }
   const payload = readFromStorage(namespace)
   if (payload) {
     preservedQueries.set(namespace, payload)
@@ -77,7 +79,9 @@ export const capturePreservedQuery = (
     }
   })
 
-  if (Object.keys(payload).length === 0) return
+  if (Object.keys(payload).length === 0) {
+    return
+  }
 
   preservedQueries.set(namespace, payload)
   writeToStorage(namespace, payload)
diff --git a/src/platform/navigation/preservedQueryNamespaces.ts b/src/platform/navigation/preservedQueryNamespaces.ts
index 541f18869..f8fb0a50e 100644
--- a/src/platform/navigation/preservedQueryNamespaces.ts
+++ b/src/platform/navigation/preservedQueryNamespaces.ts
@@ -1,3 +1,4 @@
 export const PRESERVED_QUERY_NAMESPACES = {
-  TEMPLATE: 'template'
+  TEMPLATE: 'template',
+  INVITE: 'invite'
 } as const
diff --git a/src/platform/remoteConfig/refreshRemoteConfig.test.ts b/src/platform/remoteConfig/refreshRemoteConfig.test.ts
new file mode 100644
index 000000000..34b75d123
--- /dev/null
+++ b/src/platform/remoteConfig/refreshRemoteConfig.test.ts
@@ -0,0 +1,109 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { api } from '@/scripts/api'
+
+import { refreshRemoteConfig } from './refreshRemoteConfig'
+import { remoteConfig } from './remoteConfig'
+
+vi.mock('@/scripts/api', () => ({
+  api: {
+    fetchApi: vi.fn()
+  }
+}))
+
+global.fetch = vi.fn()
+
+describe('refreshRemoteConfig', () => {
+  const mockConfig = { feature1: true, feature2: 'value' }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    remoteConfig.value = {}
+    window.__CONFIG__ = {}
+  })
+
+  describe('with auth (default)', () => {
+    it('uses api.fetchApi when useAuth is true', async () => {
+      vi.mocked(api.fetchApi).mockResolvedValue({
+        ok: true,
+        json: async () => mockConfig
+      } as Response)
+
+      await refreshRemoteConfig({ useAuth: true })
+
+      expect(api.fetchApi).toHaveBeenCalledWith('/features', {
+        cache: 'no-store'
+      })
+      expect(global.fetch).not.toHaveBeenCalled()
+      expect(remoteConfig.value).toEqual(mockConfig)
+      expect(window.__CONFIG__).toEqual(mockConfig)
+    })
+
+    it('uses api.fetchApi by default', async () => {
+      vi.mocked(api.fetchApi).mockResolvedValue({
+        ok: true,
+        json: async () => mockConfig
+      } as Response)
+
+      await refreshRemoteConfig()
+
+      expect(api.fetchApi).toHaveBeenCalled()
+      expect(global.fetch).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('without auth', () => {
+    it('uses raw fetch when useAuth is false', async () => {
+      vi.mocked(global.fetch).mockResolvedValue({
+        ok: true,
+        json: async () => mockConfig
+      } as Response)
+
+      await refreshRemoteConfig({ useAuth: false })
+
+      expect(global.fetch).toHaveBeenCalledWith('/api/features', {
+        cache: 'no-store'
+      })
+      expect(api.fetchApi).not.toHaveBeenCalled()
+      expect(remoteConfig.value).toEqual(mockConfig)
+      expect(window.__CONFIG__).toEqual(mockConfig)
+    })
+  })
+
+  describe('error handling', () => {
+    it('clears config on 401 response', async () => {
+      vi.mocked(api.fetchApi).mockResolvedValue({
+        ok: false,
+        status: 401,
+        statusText: 'Unauthorized'
+      } as Response)
+
+      await refreshRemoteConfig()
+
+      expect(remoteConfig.value).toEqual({})
+      expect(window.__CONFIG__).toEqual({})
+    })
+
+    it('clears config on 403 response', async () => {
+      vi.mocked(api.fetchApi).mockResolvedValue({
+        ok: false,
+        status: 403,
+        statusText: 'Forbidden'
+      } as Response)
+
+      await refreshRemoteConfig()
+
+      expect(remoteConfig.value).toEqual({})
+      expect(window.__CONFIG__).toEqual({})
+    })
+
+    it('clears config on fetch error', async () => {
+      vi.mocked(api.fetchApi).mockRejectedValue(new Error('Network error'))
+
+      await refreshRemoteConfig()
+
+      expect(remoteConfig.value).toEqual({})
+      expect(window.__CONFIG__).toEqual({})
+    })
+  })
+})
diff --git a/src/platform/remoteConfig/refreshRemoteConfig.ts b/src/platform/remoteConfig/refreshRemoteConfig.ts
index 5000f2014..8c87bfcdc 100644
--- a/src/platform/remoteConfig/refreshRemoteConfig.ts
+++ b/src/platform/remoteConfig/refreshRemoteConfig.ts
@@ -2,9 +2,28 @@ import { api } from '@/scripts/api'
 
 import { remoteConfig } from './remoteConfig'
 
-export async function refreshRemoteConfig(): Promise<void> {
+interface RefreshRemoteConfigOptions {
+  /**
+   * Whether to use authenticated API (default: true).
+   * Set to false during bootstrap before auth is initialized.
+   */
+  useAuth?: boolean
+}
+
+/**
+ * Loads remote configuration from the backend /features endpoint
+ * and updates the reactive remoteConfig ref
+ */
+export async function refreshRemoteConfig(
+  options: RefreshRemoteConfigOptions = {}
+): Promise<void> {
+  const { useAuth = true } = options
+
   try {
-    const response = await api.fetchApi('/features', { cache: 'no-store' })
+    const response = useAuth
+      ? await api.fetchApi('/features', { cache: 'no-store' })
+      : await fetch('/api/features', { cache: 'no-store' })
+
     if (response.ok) {
       const config = await response.json()
       window.__CONFIG__ = config
@@ -19,5 +38,7 @@ export async function refreshRemoteConfig(): Promise<void> {
     }
   } catch (error) {
     console.error('Failed to fetch remote config:', error)
+    window.__CONFIG__ = {}
+    remoteConfig.value = {}
   }
 }
diff --git a/src/platform/remoteConfig/remoteConfig.ts b/src/platform/remoteConfig/remoteConfig.ts
index 7d8f28c5f..40f36522f 100644
--- a/src/platform/remoteConfig/remoteConfig.ts
+++ b/src/platform/remoteConfig/remoteConfig.ts
@@ -8,7 +8,6 @@
  * - Avoiding vendor lock-in for native apps
  *
  * This module is tree-shaken in OSS builds.
- * Used for initial config load in main.ts and polling in the extension.
  */
 
 import { ref } from 'vue'
@@ -29,26 +28,3 @@ export function configValueOrDefault<K extends keyof RemoteConfig>(
   const configValue = remoteConfig[key]
   return configValue || defaultValue
 }
-
-/**
- * Loads remote configuration from the backend /api/features endpoint
- * and updates the reactive remoteConfig ref
- */
-export async function loadRemoteConfig(): Promise<void> {
-  try {
-    const response = await fetch('/api/features', { cache: 'no-store' })
-    if (response.ok) {
-      const config = await response.json()
-      window.__CONFIG__ = config
-      remoteConfig.value = config
-    } else {
-      console.warn('Failed to load remote config:', response.statusText)
-      window.__CONFIG__ = {}
-      remoteConfig.value = {}
-    }
-  } catch (error) {
-    console.error('Failed to fetch remote config:', error)
-    window.__CONFIG__ = {}
-    remoteConfig.value = {}
-  }
-}
diff --git a/src/platform/settings/components/SettingDialogContent.vue b/src/platform/settings/components/SettingDialogContent.vue
index 13da10437..43377110b 100644
--- a/src/platform/settings/components/SettingDialogContent.vue
+++ b/src/platform/settings/components/SettingDialogContent.vue
@@ -1,14 +1,28 @@
 <template>
-  <div class="settings-container">
-    <ScrollPanel class="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"
-        :placeholder="$t('g.searchSettings') + '...'"
-        :debounce-time="128"
-        autofocus
-        @search="handleSearch"
-      />
+  <div
+    :class="
+      teamWorkspacesEnabled
+        ? 'flex h-full w-full overflow-auto flex-col md:flex-row'
+        : 'settings-container'
+    "
+  >
+    <ScrollPanel
+      :class="
+        teamWorkspacesEnabled
+          ? 'w-full md:w-64 md:min-w-64 md:max-w-64 shrink-0 p-2'
+          : 'settings-sidebar w-48 shrink-0 p-2 2xl:w-64'
+      "
+    >
+      <div :class="teamWorkspacesEnabled ? 'px-4' : ''">
+        <SearchBox
+          v-model:model-value="searchQuery"
+          class="settings-search-box mb-2 w-full"
+          :placeholder="$t('g.searchSettings') + '...'"
+          :debounce-time="128"
+          autofocus
+          @search="handleSearch"
+        />
+      </div>
       <Listbox
         v-model="activeCategory"
         :options="groupedMenuTreeNodes"
@@ -20,16 +34,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-auto scrollbar-custom'
+          : '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 +86,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 +107,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 +127,15 @@ const { defaultPanel } = defineProps<{
     | 'server-config'
     | 'user'
     | 'credits'
+    | 'subscription'
+    | 'workspace'
 }>()
 
+const { flags } = useFeatureFlags()
+const teamWorkspacesEnabled = computed(
+  () => isCloud && flags.teamWorkspacesEnabled
+)
+
 const {
   activeCategory,
   defaultCategory,
@@ -162,6 +210,7 @@ watch(activeCategory, (_, oldValue) => {
 </style>
 
 <style scoped>
+/* Legacy mode styles (when teamWorkspacesEnabled is false) */
 .settings-container {
   display: flex;
   height: 70vh;
@@ -190,7 +239,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/useSettingSearch.test.ts b/src/platform/settings/composables/useSettingSearch.test.ts
index ba63256e8..799eebed5 100644
--- a/src/platform/settings/composables/useSettingSearch.test.ts
+++ b/src/platform/settings/composables/useSettingSearch.test.ts
@@ -8,6 +8,17 @@ import {
   getSettingInfo,
   useSettingStore
 } from '@/platform/settings/settingStore'
+import type { SettingTreeNode } from '@/platform/settings/settingStore'
+
+// Test-specific type for mock settings
+interface MockSettingParams {
+  id: string
+  name: string
+  type: string
+  defaultValue: unknown
+  category?: string[]
+  deprecated?: boolean
+}
 
 // Mock dependencies
 vi.mock('@/i18n', () => ({
@@ -20,8 +31,8 @@ vi.mock('@/platform/settings/settingStore', () => ({
 }))
 
 describe('useSettingSearch', () => {
-  let mockSettingStore: any
-  let mockSettings: any
+  let mockSettingStore: ReturnType<typeof useSettingStore>
+  let mockSettings: Record<string, MockSettingParams>
 
   beforeEach(() => {
     setActivePinia(createPinia())
@@ -70,11 +81,11 @@ describe('useSettingSearch', () => {
     // Mock setting store
     mockSettingStore = {
       settingsById: mockSettings
-    }
+    } as ReturnType<typeof useSettingStore>
     vi.mocked(useSettingStore).mockReturnValue(mockSettingStore)
 
     // Mock getSettingInfo function
-    vi.mocked(getSettingInfo).mockImplementation((setting: any) => {
+    vi.mocked(getSettingInfo).mockImplementation((setting) => {
       const parts = setting.category || setting.id.split('.')
       return {
         category: parts[0] ?? 'Other',
@@ -301,8 +312,8 @@ describe('useSettingSearch', () => {
       const search = useSettingSearch()
       search.filteredSettingIds.value = ['Category.Setting1', 'Other.Setting3']
 
-      const activeCategory = { label: 'Category' } as any
-      const results = search.getSearchResults(activeCategory)
+      const activeCategory: Partial<SettingTreeNode> = { label: 'Category' }
+      const results = search.getSearchResults(activeCategory as SettingTreeNode)
 
       expect(results).toEqual([
         {
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/settings/constants/coreSettings.ts b/src/platform/settings/constants/coreSettings.ts
index 3b6a06879..95e892c49 100644
--- a/src/platform/settings/constants/coreSettings.ts
+++ b/src/platform/settings/constants/coreSettings.ts
@@ -642,6 +642,8 @@ export const CORE_SETTINGS: SettingParams[] = [
     id: 'Comfy.LinkRenderMode',
     category: ['LiteGraph', 'Graph', 'LinkRenderMode'],
     name: 'Link Render Mode',
+    tooltip:
+      'Controls the appearance and visibility of connection links between nodes on the canvas.',
     defaultValue: 2,
     type: 'combo',
     options: [
@@ -793,6 +795,8 @@ export const CORE_SETTINGS: SettingParams[] = [
     id: 'pysssss.SnapToGrid',
     category: ['LiteGraph', 'Canvas', 'AlwaysSnapToGrid'],
     name: 'Always snap to grid',
+    tooltip:
+      'When enabled, nodes will automatically align to the grid when moved or resized.',
     type: 'boolean',
     defaultValue: false,
     versionAdded: '1.3.13'
@@ -960,6 +964,8 @@ export const CORE_SETTINGS: SettingParams[] = [
     id: 'Comfy.Canvas.SelectionToolbox',
     category: ['LiteGraph', 'Canvas', 'SelectionToolbox'],
     name: 'Show selection toolbox',
+    tooltip:
+      'Display a floating toolbar when nodes are selected, providing quick access to common actions.',
     type: 'boolean',
     defaultValue: true,
     versionAdded: '1.10.5'
@@ -1174,5 +1180,15 @@ export const CORE_SETTINGS: SettingParams[] = [
       'Replaces the floating job queue panel with an equivalent job queue embedded in the Assets side panel. You can disable this to return to the floating panel layout.',
     defaultValue: true,
     experimental: true
+  },
+  {
+    id: 'Comfy.Node.AlwaysShowAdvancedWidgets',
+    category: ['LiteGraph', 'Node Widget', 'AlwaysShowAdvancedWidgets'],
+    name: 'Always show advanced widgets on all nodes',
+    tooltip:
+      'When enabled, advanced widgets are always visible on all nodes without needing to expand them individually.',
+    type: 'boolean',
+    defaultValue: false,
+    versionAdded: '1.39.0'
   }
 ]
diff --git a/src/platform/settings/settingStore.test.ts b/src/platform/settings/settingStore.test.ts
index 60d7acd1c..4f800463c 100644
--- a/src/platform/settings/settingStore.test.ts
+++ b/src/platform/settings/settingStore.test.ts
@@ -6,6 +6,7 @@ import {
   useSettingStore
 } from '@/platform/settings/settingStore'
 import type { SettingParams } from '@/platform/settings/types'
+import type { Settings } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 
@@ -45,7 +46,9 @@ describe('useSettingStore', () => {
   describe('loadSettingValues', () => {
     it('should load settings from API', async () => {
       const mockSettings = { 'test.setting': 'value' }
-      vi.mocked(api.getSettings).mockResolvedValue(mockSettings as any)
+      vi.mocked(api.getSettings).mockResolvedValue(
+        mockSettings as Partial<Settings> as Settings
+      )
 
       await store.loadSettingValues()
 
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/surveys/useFeatureUsageTracker.test.ts b/src/platform/surveys/useFeatureUsageTracker.test.ts
new file mode 100644
index 000000000..5313e9eaf
--- /dev/null
+++ b/src/platform/surveys/useFeatureUsageTracker.test.ts
@@ -0,0 +1,131 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const STORAGE_KEY = 'Comfy.FeatureUsage'
+
+describe('useFeatureUsageTracker', () => {
+  beforeEach(() => {
+    localStorage.clear()
+    vi.resetModules()
+  })
+
+  afterEach(() => {
+    localStorage.clear()
+  })
+
+  it('initializes with zero count for new feature', async () => {
+    const { useFeatureUsageTracker } = await import('./useFeatureUsageTracker')
+    const { useCount } = useFeatureUsageTracker('test-feature')
+
+    expect(useCount.value).toBe(0)
+  })
+
+  it('increments count on trackUsage', async () => {
+    const { useFeatureUsageTracker } = await import('./useFeatureUsageTracker')
+    const { useCount, trackUsage } = useFeatureUsageTracker('test-feature')
+
+    expect(useCount.value).toBe(0)
+
+    trackUsage()
+    expect(useCount.value).toBe(1)
+
+    trackUsage()
+    expect(useCount.value).toBe(2)
+  })
+
+  it('sets firstUsed only on first use', async () => {
+    vi.useFakeTimers()
+    const firstTs = 1000000
+    vi.setSystemTime(firstTs)
+    try {
+      const { useFeatureUsageTracker } =
+        await import('./useFeatureUsageTracker')
+      const { usage, trackUsage } = useFeatureUsageTracker('test-feature')
+
+      trackUsage()
+      expect(usage.value?.firstUsed).toBe(firstTs)
+
+      vi.setSystemTime(firstTs + 5000)
+      trackUsage()
+      expect(usage.value?.firstUsed).toBe(firstTs)
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+
+  it('updates lastUsed on each use', async () => {
+    vi.useFakeTimers()
+    try {
+      const { useFeatureUsageTracker } =
+        await import('./useFeatureUsageTracker')
+      const { usage, trackUsage } = useFeatureUsageTracker('test-feature')
+
+      trackUsage()
+      const firstLastUsed = usage.value?.lastUsed ?? 0
+
+      vi.advanceTimersByTime(10)
+      trackUsage()
+
+      expect(usage.value?.lastUsed).toBeGreaterThan(firstLastUsed)
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+
+  it('reset clears feature data', async () => {
+    const { useFeatureUsageTracker } = await import('./useFeatureUsageTracker')
+    const { useCount, trackUsage, reset } =
+      useFeatureUsageTracker('test-feature')
+
+    trackUsage()
+    trackUsage()
+    expect(useCount.value).toBe(2)
+
+    reset()
+    expect(useCount.value).toBe(0)
+  })
+
+  it('tracks multiple features independently', async () => {
+    const { useFeatureUsageTracker } = await import('./useFeatureUsageTracker')
+    const featureA = useFeatureUsageTracker('feature-a')
+    const featureB = useFeatureUsageTracker('feature-b')
+
+    featureA.trackUsage()
+    featureA.trackUsage()
+    featureB.trackUsage()
+
+    expect(featureA.useCount.value).toBe(2)
+    expect(featureB.useCount.value).toBe(1)
+  })
+
+  it('persists to localStorage', async () => {
+    vi.useFakeTimers()
+    try {
+      const { useFeatureUsageTracker } =
+        await import('./useFeatureUsageTracker')
+      const { trackUsage } = useFeatureUsageTracker('persisted-feature')
+
+      trackUsage()
+      await vi.runAllTimersAsync()
+
+      const stored = JSON.parse(localStorage.getItem(STORAGE_KEY) ?? '{}')
+      expect(stored['persisted-feature']?.useCount).toBe(1)
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+
+  it('loads existing data from localStorage', async () => {
+    localStorage.setItem(
+      STORAGE_KEY,
+      JSON.stringify({
+        'existing-feature': { useCount: 5, firstUsed: 1000, lastUsed: 2000 }
+      })
+    )
+
+    vi.resetModules()
+    const { useFeatureUsageTracker } = await import('./useFeatureUsageTracker')
+    const { useCount } = useFeatureUsageTracker('existing-feature')
+
+    expect(useCount.value).toBe(5)
+  })
+})
diff --git a/src/platform/surveys/useFeatureUsageTracker.ts b/src/platform/surveys/useFeatureUsageTracker.ts
new file mode 100644
index 000000000..b8d825db4
--- /dev/null
+++ b/src/platform/surveys/useFeatureUsageTracker.ts
@@ -0,0 +1,46 @@
+import { useStorage } from '@vueuse/core'
+import { computed } from 'vue'
+
+interface FeatureUsage {
+  useCount: number
+  firstUsed: number
+  lastUsed: number
+}
+
+type FeatureUsageRecord = Record<string, FeatureUsage>
+
+const STORAGE_KEY = 'Comfy.FeatureUsage'
+
+/**
+ * Tracks feature usage for survey eligibility.
+ * Persists to localStorage.
+ */
+export function useFeatureUsageTracker(featureId: string) {
+  const usageData = useStorage<FeatureUsageRecord>(STORAGE_KEY, {})
+
+  const usage = computed(() => usageData.value[featureId])
+
+  const useCount = computed(() => usage.value?.useCount ?? 0)
+
+  function trackUsage() {
+    const now = Date.now()
+    const existing = usageData.value[featureId]
+
+    usageData.value[featureId] = {
+      useCount: (existing?.useCount ?? 0) + 1,
+      firstUsed: existing?.firstUsed ?? now,
+      lastUsed: now
+    }
+  }
+
+  function reset() {
+    delete usageData.value[featureId]
+  }
+
+  return {
+    usage,
+    useCount,
+    trackUsage,
+    reset
+  }
+}
diff --git a/src/platform/telemetry/providers/cloud/MixpanelTelemetryProvider.ts b/src/platform/telemetry/providers/cloud/MixpanelTelemetryProvider.ts
index 86b3a5553..6f8c0ccbb 100644
--- a/src/platform/telemetry/providers/cloud/MixpanelTelemetryProvider.ts
+++ b/src/platform/telemetry/providers/cloud/MixpanelTelemetryProvider.ts
@@ -17,6 +17,7 @@ import { reduceAllNodes } from '@/utils/graphTraversalUtil'
 import type {
   AuthMetadata,
   CreditTopupMetadata,
+  EnterLinearMetadata,
   ExecutionContext,
   ExecutionTriggerSource,
   ExecutionErrorMetadata,
@@ -354,6 +355,10 @@ export class MixpanelTelemetryProvider implements TelemetryProvider {
     this.trackEvent(TelemetryEvents.WORKFLOW_OPENED, metadata)
   }
 
+  trackEnterLinear(metadata: EnterLinearMetadata): void {
+    this.trackEvent(TelemetryEvents.ENTER_LINEAR_MODE, metadata)
+  }
+
   trackPageVisibilityChanged(metadata: PageVisibilityMetadata): void {
     this.trackEvent(TelemetryEvents.PAGE_VISIBILITY_CHANGED, metadata)
   }
diff --git a/src/platform/telemetry/types.ts b/src/platform/telemetry/types.ts
index 5609fc7a8..2ce9c7f0f 100644
--- a/src/platform/telemetry/types.ts
+++ b/src/platform/telemetry/types.ts
@@ -37,6 +37,13 @@ export interface SurveyResponses {
   making?: string[]
 }
 
+export interface SurveyResponsesNormalized extends SurveyResponses {
+  industry_normalized?: string
+  industry_raw?: string
+  useCase_normalized?: string
+  useCase_raw?: string
+}
+
 /**
  * Run button tracking properties
  */
@@ -124,6 +131,10 @@ export interface WorkflowImportMetadata {
   open_source?: 'file_button' | 'file_drop' | 'template' | 'unknown'
 }
 
+export interface EnterLinearMetadata {
+  source?: string
+}
+
 /**
  * Workflow open metadata
  */
@@ -297,6 +308,7 @@ export interface TelemetryProvider {
   // Workflow management events
   trackWorkflowImported(metadata: WorkflowImportMetadata): void
   trackWorkflowOpened(metadata: WorkflowImportMetadata): void
+  trackEnterLinear(metadata: EnterLinearMetadata): void
 
   // Page visibility events
   trackPageVisibilityChanged(metadata: PageVisibilityMetadata): void
@@ -372,6 +384,7 @@ export const TelemetryEvents = {
   // Workflow Management
   WORKFLOW_IMPORTED: 'app:workflow_imported',
   WORKFLOW_OPENED: 'app:workflow_opened',
+  ENTER_LINEAR_MODE: 'app:toggle_linear_mode',
 
   // Page Visibility
   PAGE_VISIBILITY_CHANGED: 'app:page_visibility_changed',
@@ -441,3 +454,4 @@ export type TelemetryEventProperties =
   | HelpResourceClickedMetadata
   | HelpCenterClosedMetadata
   | WorkflowCreatedMetadata
+  | EnterLinearMetadata
diff --git a/src/platform/telemetry/utils/__tests__/surveyNormalization.test.ts b/src/platform/telemetry/utils/__tests__/surveyNormalization.test.ts
index ea85bd6eb..059f7d67d 100644
--- a/src/platform/telemetry/utils/__tests__/surveyNormalization.test.ts
+++ b/src/platform/telemetry/utils/__tests__/surveyNormalization.test.ts
@@ -328,9 +328,9 @@ describe('normalizeIndustry', () => {
     })
 
     it('should handle null and invalid inputs', () => {
-      expect(normalizeIndustry(null as any)).toBe('Other / Undefined')
-      expect(normalizeIndustry(undefined as any)).toBe('Other / Undefined')
-      expect(normalizeIndustry(123 as any)).toBe('Other / Undefined')
+      expect(normalizeIndustry(null)).toBe('Other / Undefined')
+      expect(normalizeIndustry(undefined)).toBe('Other / Undefined')
+      expect(normalizeIndustry(123)).toBe('Other / Undefined')
     })
   })
 
@@ -508,7 +508,7 @@ describe('normalizeUseCase', () => {
       expect(normalizeUseCase('none')).toBe('Other / Undefined')
       expect(normalizeUseCase('undefined')).toBe('Other / Undefined')
       expect(normalizeUseCase('')).toBe('Other / Undefined')
-      expect(normalizeUseCase(null as any)).toBe('Other / Undefined')
+      expect(normalizeUseCase(null)).toBe('Other / Undefined')
     })
   })
 
diff --git a/src/platform/telemetry/utils/surveyNormalization.ts b/src/platform/telemetry/utils/surveyNormalization.ts
index ae281ca34..ba126f905 100644
--- a/src/platform/telemetry/utils/surveyNormalization.ts
+++ b/src/platform/telemetry/utils/surveyNormalization.ts
@@ -6,6 +6,7 @@
  * Uses Fuse.js for fuzzy matching against category keywords.
  */
 import Fuse from 'fuse.js'
+import type { SurveyResponses, SurveyResponsesNormalized } from '../types'
 
 interface CategoryMapping {
   name: string
@@ -526,7 +527,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 +555,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'
   }
@@ -583,21 +584,19 @@ export function normalizeUseCase(rawUseCase: string): string {
  * Apply normalization to survey responses
  * Creates both normalized and raw versions of responses
  */
-export function normalizeSurveyResponses(responses: {
-  industry?: string
-  useCase?: string
-  [key: string]: any
-}) {
-  const normalized = { ...responses }
+export function normalizeSurveyResponses(
+  responses: SurveyResponses
+): SurveyResponsesNormalized {
+  const normalized: SurveyResponsesNormalized = { ...responses }
 
   // Normalize industry
-  if (responses.industry) {
+  if (typeof responses.industry === 'string') {
     normalized.industry_normalized = normalizeIndustry(responses.industry)
     normalized.industry_raw = responses.industry
   }
 
   // Normalize use case
-  if (responses.useCase) {
+  if (typeof responses.useCase === 'string') {
     normalized.useCase_normalized = normalizeUseCase(responses.useCase)
     normalized.useCase_raw = responses.useCase
   }
diff --git a/src/platform/workflow/core/services/workflowService.ts b/src/platform/workflow/core/services/workflowService.ts
index 8dc6cbdcf..971e48ac0 100644
--- a/src/platform/workflow/core/services/workflowService.ts
+++ b/src/platform/workflow/core/services/workflowService.ts
@@ -6,10 +6,12 @@ import { LGraph, LGraphCanvas } from '@/lib/litegraph/src/litegraph'
 import type { Point, SerialisableGraph } from '@/lib/litegraph/src/litegraph'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useToastStore } from '@/platform/updates/common/toastStore'
+import { useWorkflowDraftStore } from '@/platform/workflow/persistence/stores/workflowDraftStore'
 import {
   ComfyWorkflow,
   useWorkflowStore
 } from '@/platform/workflow/management/stores/workflowStore'
+import { useTelemetry } from '@/platform/telemetry'
 import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useWorkflowThumbnail } from '@/renderer/core/thumbnail/useWorkflowThumbnail'
@@ -27,6 +29,7 @@ export const useWorkflowService = () => {
   const dialogService = useDialogService()
   const workflowThumbnail = useWorkflowThumbnail()
   const domWidgetStore = useDomWidgetStore()
+  const workflowDraftStore = useWorkflowDraftStore()
 
   async function getFilename(defaultName: string): Promise<string | null> {
     if (settingStore.get('Comfy.PromptFilename')) {
@@ -290,6 +293,27 @@ export const useWorkflowService = () => {
     const activeWorkflow = workflowStore.activeWorkflow
     if (activeWorkflow) {
       activeWorkflow.changeTracker.store()
+      if (settingStore.get('Comfy.Workflow.Persist') && activeWorkflow.path) {
+        const activeState = activeWorkflow.activeState
+        if (activeState) {
+          try {
+            const workflowJson = JSON.stringify(activeState)
+            workflowDraftStore.saveDraft(activeWorkflow.path, {
+              data: workflowJson,
+              updatedAt: Date.now(),
+              name: activeWorkflow.key,
+              isTemporary: activeWorkflow.isTemporary
+            })
+          } catch {
+            toastStore.add({
+              severity: 'error',
+              summary: t('g.error'),
+              detail: t('toastMessages.failedToSaveDraft'),
+              life: 3000
+            })
+          }
+        }
+      }
       // Capture thumbnail before loading new graph
       void workflowThumbnail.storeThumbnail(activeWorkflow)
       domWidgetStore.clear()
@@ -315,8 +339,11 @@ export const useWorkflowService = () => {
     if (
       workflowData.extra?.linearMode !== undefined ||
       !workflowData.nodes.length
-    )
+    ) {
+      if (workflowData.extra?.linearMode && !useCanvasStore().linearMode)
+        useTelemetry()?.trackEnterLinear({ source: 'workflow' })
       useCanvasStore().linearMode = !!workflowData.extra?.linearMode
+    }
 
     if (value === null || typeof value === 'string') {
       const path = value as string | null
diff --git a/src/platform/workflow/management/stores/workflowStore.test.ts b/src/platform/workflow/management/stores/workflowStore.test.ts
index 5b66b2777..705eca570 100644
--- a/src/platform/workflow/management/stores/workflowStore.test.ts
+++ b/src/platform/workflow/management/stores/workflowStore.test.ts
@@ -11,6 +11,7 @@ import {
   useWorkflowBookmarkStore,
   useWorkflowStore
 } from '@/platform/workflow/management/stores/workflowStore'
+import { useWorkflowDraftStore } from '@/platform/workflow/persistence/stores/workflowDraftStore'
 import { api } from '@/scripts/api'
 import { app as comfyApp } from '@/scripts/app'
 import { defaultGraph, defaultGraphJSON } from '@/scripts/defaultGraph'
@@ -66,6 +67,9 @@ describe('useWorkflowStore', () => {
     store = useWorkflowStore()
     bookmarkStore = useWorkflowBookmarkStore()
     vi.clearAllMocks()
+    localStorage.clear()
+    sessionStorage.clear()
+    useWorkflowDraftStore().reset()
 
     // Add default mock implementations
     vi.mocked(api.getUserData).mockResolvedValue({
@@ -235,6 +239,60 @@ describe('useWorkflowStore', () => {
       expect(workflow.isModified).toBe(false)
     })
 
+    it('prefers local draft snapshots when available', async () => {
+      localStorage.clear()
+      await syncRemoteWorkflows(['a.json'])
+      const workflow = store.getWorkflowByPath('workflows/a.json')!
+
+      const draftGraph = {
+        ...defaultGraph,
+        nodes: [...defaultGraph.nodes]
+      }
+
+      useWorkflowDraftStore().saveDraft(workflow.path, {
+        data: JSON.stringify(draftGraph),
+        updatedAt: Date.now(),
+        name: workflow.key,
+        isTemporary: workflow.isTemporary
+      })
+
+      vi.mocked(api.getUserData).mockResolvedValue({
+        status: 200,
+        text: () => Promise.resolve(defaultGraphJSON)
+      } as Response)
+
+      await workflow.load()
+
+      expect(workflow.isModified).toBe(true)
+      expect(workflow.changeTracker?.activeState).toEqual(draftGraph)
+    })
+
+    it('ignores stale drafts when server version is newer', async () => {
+      await syncRemoteWorkflows(['a.json'])
+      const workflow = store.getWorkflowByPath('workflows/a.json')!
+      const draftStore = useWorkflowDraftStore()
+
+      const draftSnapshot = {
+        data: JSON.stringify(defaultGraph),
+        updatedAt: Date.now(),
+        name: workflow.key,
+        isTemporary: workflow.isTemporary
+      }
+
+      draftStore.saveDraft(workflow.path, draftSnapshot)
+      workflow.lastModified = draftSnapshot.updatedAt + 1000
+
+      vi.mocked(api.getUserData).mockResolvedValue({
+        status: 200,
+        text: () => Promise.resolve(defaultGraphJSON)
+      } as Response)
+
+      await workflow.load()
+
+      expect(workflow.isModified).toBe(false)
+      expect(draftStore.getDraft(workflow.path)).toBeUndefined()
+    })
+
     it('should load and open a remote workflow', async () => {
       await syncRemoteWorkflows(['a.json', 'b.json'])
 
@@ -413,6 +471,20 @@ describe('useWorkflowStore', () => {
       expect(store.isOpen(workflow)).toBe(false)
       expect(store.getWorkflowByPath(workflow.path)).toBeNull()
     })
+
+    it('should remove draft when closing temporary workflow', async () => {
+      const workflow = store.createTemporary('test.json')
+      const draftStore = useWorkflowDraftStore()
+      draftStore.saveDraft(workflow.path, {
+        data: defaultGraphJSON,
+        updatedAt: Date.now(),
+        name: workflow.key,
+        isTemporary: true
+      })
+      expect(draftStore.getDraft(workflow.path)).toBeDefined()
+      await store.closeWorkflow(workflow)
+      expect(draftStore.getDraft(workflow.path)).toBeUndefined()
+    })
   })
 
   describe('deleteWorkflow', () => {
diff --git a/src/platform/workflow/management/stores/workflowStore.ts b/src/platform/workflow/management/stores/workflowStore.ts
index 7a3df1942..540df3d94 100644
--- a/src/platform/workflow/management/stores/workflowStore.ts
+++ b/src/platform/workflow/management/stores/workflowStore.ts
@@ -13,6 +13,7 @@ import type {
   ComfyWorkflowJSON,
   NodeId
 } from '@/platform/workflow/validation/schemas/workflowSchema'
+import { useWorkflowDraftStore } from '@/platform/workflow/persistence/stores/workflowDraftStore'
 import { useWorkflowThumbnail } from '@/renderer/core/thumbnail/useWorkflowThumbnail'
 import { api } from '@/scripts/api'
 import { app as comfyApp } from '@/scripts/app'
@@ -86,6 +87,28 @@ export class ComfyWorkflow extends UserFile {
   override async load({ force = false }: { force?: boolean } = {}): Promise<
     this & LoadedComfyWorkflow
   > {
+    const draftStore = useWorkflowDraftStore()
+    let draft = !force ? draftStore.getDraft(this.path) : undefined
+    let draftState: ComfyWorkflowJSON | null = null
+    let draftContent: string | null = null
+
+    if (draft) {
+      if (draft.updatedAt < this.lastModified) {
+        draftStore.removeDraft(this.path)
+        draft = undefined
+      }
+    }
+
+    if (draft) {
+      try {
+        draftState = JSON.parse(draft.data)
+        draftContent = draft.data
+      } catch (err) {
+        console.warn('Failed to parse workflow draft, clearing it', err)
+        draftStore.removeDraft(this.path)
+      }
+    }
+
     await super.load({ force })
     if (!force && this.isLoaded) return this as this & LoadedComfyWorkflow
 
@@ -93,13 +116,14 @@ export class ComfyWorkflow extends UserFile {
       throw new Error('[ASSERT] Workflow content should be loaded')
     }
 
-    // Note: originalContent is populated by super.load()
-    this.changeTracker = markRaw(
-      new ChangeTracker(
-        this,
-        /* initialState= */ JSON.parse(this.originalContent)
-      )
-    )
+    const initialState = JSON.parse(this.originalContent)
+    this.changeTracker = markRaw(new ChangeTracker(this, initialState))
+    if (draftState && draftContent) {
+      this.changeTracker.activeState = draftState
+      this.content = draftContent
+      this._isModified = true
+      draftStore.markDraftUsed(this.path)
+    }
     return this as this & LoadedComfyWorkflow
   }
 
@@ -109,12 +133,14 @@ export class ComfyWorkflow extends UserFile {
   }
 
   override async save() {
+    const draftStore = useWorkflowDraftStore()
     this.content = JSON.stringify(this.activeState)
     // Force save to ensure the content is updated in remote storage incase
     // the isModified state is screwed by changeTracker.
     const ret = await super.save({ force: true })
     this.changeTracker?.reset()
     this.isModified = false
+    draftStore.removeDraft(this.path)
     return ret
   }
 
@@ -124,8 +150,11 @@ export class ComfyWorkflow extends UserFile {
    * @returns this
    */
   override async saveAs(path: string) {
+    const draftStore = useWorkflowDraftStore()
     this.content = JSON.stringify(this.activeState)
-    return await super.saveAs(path)
+    const result = await super.saveAs(path)
+    draftStore.removeDraft(path)
+    return result
   }
 
   async promptSave(): Promise<string | null> {
@@ -436,6 +465,8 @@ export const useWorkflowStore = defineStore('workflow', () => {
     if (workflow.isTemporary) {
       // Clear thumbnail when temporary workflow is closed
       clearThumbnail(workflow.key)
+      // Clear draft when unsaved workflow tab is closed
+      useWorkflowDraftStore().removeDraft(workflow.path)
       delete workflowLookup.value[workflow.path]
     } else {
       workflow.unload()
@@ -565,6 +596,7 @@ export const useWorkflowStore = defineStore('workflow', () => {
       const oldPath = workflow.path
       const oldKey = workflow.key
       const wasBookmarked = bookmarkStore.isBookmarked(oldPath)
+      const draftStore = useWorkflowDraftStore()
 
       const openIndex = detachWorkflow(workflow)
       // Perform the actual rename operation first
@@ -574,6 +606,8 @@ export const useWorkflowStore = defineStore('workflow', () => {
         attachWorkflow(workflow, openIndex)
       }
 
+      draftStore.moveDraft(oldPath, newPath, workflow.key)
+
       // Move thumbnail from old key to new key (using workflow keys, not full paths)
       const newKey = workflow.key
       moveWorkflowThumbnail(oldKey, newKey)
@@ -591,6 +625,7 @@ export const useWorkflowStore = defineStore('workflow', () => {
     isBusy.value = true
     try {
       await workflow.delete()
+      useWorkflowDraftStore().removeDraft(workflow.path)
       if (bookmarkStore.isBookmarked(workflow.path)) {
         await bookmarkStore.setBookmarked(workflow.path, false)
       }
diff --git a/src/platform/workflow/persistence/base/draftCache.test.ts b/src/platform/workflow/persistence/base/draftCache.test.ts
new file mode 100644
index 000000000..8c7dfff3e
--- /dev/null
+++ b/src/platform/workflow/persistence/base/draftCache.test.ts
@@ -0,0 +1,79 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  MAX_DRAFTS,
+  createDraftCacheState,
+  mostRecentDraftPath,
+  moveDraft,
+  removeDraft,
+  touchEntry,
+  upsertDraft
+} from './draftCache'
+import type { WorkflowDraftSnapshot } from './draftCache'
+
+function createSnapshot(name: string): WorkflowDraftSnapshot {
+  return {
+    data: JSON.stringify({ name }),
+    updatedAt: Date.now(),
+    name,
+    isTemporary: true
+  }
+}
+
+describe('draftCache helpers', () => {
+  it('touchEntry moves path to end', () => {
+    expect(touchEntry(['a', 'b'], 'a')).toEqual(['b', 'a'])
+    expect(touchEntry(['a', 'b'], 'c')).toEqual(['a', 'b', 'c'])
+  })
+
+  it('upsertDraft stores snapshot and applies LRU', () => {
+    let state = createDraftCacheState()
+    for (let i = 0; i < MAX_DRAFTS; i++) {
+      const path = `workflows/Draft${i}.json`
+      state = upsertDraft(state, path, createSnapshot(String(i)))
+    }
+
+    expect(Object.keys(state.drafts).length).toBe(MAX_DRAFTS)
+
+    state = upsertDraft(state, 'workflows/New.json', createSnapshot('new'))
+    expect(Object.keys(state.drafts).length).toBe(MAX_DRAFTS)
+    expect(state.drafts).not.toHaveProperty('workflows/Draft0.json')
+    expect(state.order[state.order.length - 1]).toBe('workflows/New.json')
+  })
+
+  it('removeDraft clears entry and order', () => {
+    const state = upsertDraft(
+      createDraftCacheState(),
+      'workflows/test.json',
+      createSnapshot('test')
+    )
+
+    const nextState = removeDraft(state, 'workflows/test.json')
+    expect(nextState.drafts).toEqual({})
+    expect(nextState.order).toEqual([])
+  })
+
+  it('moveDraft renames entry and updates order', () => {
+    const state = upsertDraft(
+      createDraftCacheState(),
+      'workflows/old.json',
+      createSnapshot('old')
+    )
+
+    const nextState = moveDraft(
+      state,
+      'workflows/old.json',
+      'workflows/new.json',
+      'new'
+    )
+    expect(nextState.drafts).not.toHaveProperty('workflows/old.json')
+    expect(nextState.drafts['workflows/new.json']?.name).toBe('new')
+    expect(nextState.order).toEqual(['workflows/new.json'])
+  })
+
+  it('mostRecentDraftPath returns last entry', () => {
+    const state = createDraftCacheState({}, ['a', 'b', 'c'])
+    expect(mostRecentDraftPath(state.order)).toBe('c')
+    expect(mostRecentDraftPath([])).toBeNull()
+  })
+})
diff --git a/src/platform/workflow/persistence/base/draftCache.ts b/src/platform/workflow/persistence/base/draftCache.ts
new file mode 100644
index 000000000..634f355de
--- /dev/null
+++ b/src/platform/workflow/persistence/base/draftCache.ts
@@ -0,0 +1,78 @@
+export interface WorkflowDraftSnapshot {
+  data: string
+  updatedAt: number
+  name: string
+  isTemporary: boolean
+}
+
+export interface DraftCacheState {
+  drafts: Record<string, WorkflowDraftSnapshot>
+  order: string[]
+}
+
+export const MAX_DRAFTS = 32
+
+export const createDraftCacheState = (
+  drafts: Record<string, WorkflowDraftSnapshot> = {},
+  order: string[] = []
+): DraftCacheState => ({ drafts, order })
+
+export const touchEntry = (order: string[], path: string): string[] => {
+  const next = order.filter((entry) => entry !== path)
+  next.push(path)
+  return next
+}
+
+export const upsertDraft = (
+  state: DraftCacheState,
+  path: string,
+  snapshot: WorkflowDraftSnapshot,
+  limit: number = MAX_DRAFTS
+): DraftCacheState => {
+  const effectiveLimit = Math.max(1, limit)
+  const drafts = { ...state.drafts, [path]: snapshot }
+  const order = touchEntry(state.order, path)
+
+  while (order.length > effectiveLimit) {
+    const oldest = order.shift()
+    if (!oldest) continue
+    if (oldest !== path) {
+      delete drafts[oldest]
+    }
+  }
+
+  return createDraftCacheState(drafts, order)
+}
+
+export const removeDraft = (
+  state: DraftCacheState,
+  path: string
+): DraftCacheState => {
+  if (!(path in state.drafts)) return state
+  const drafts = { ...state.drafts }
+  delete drafts[path]
+  const order = state.order.filter((entry) => entry !== path)
+  return createDraftCacheState(drafts, order)
+}
+
+export const moveDraft = (
+  state: DraftCacheState,
+  oldPath: string,
+  newPath: string,
+  name: string
+): DraftCacheState => {
+  const draft = state.drafts[oldPath]
+  if (!draft) return state
+  const updatedDraft = { ...draft, name }
+  const drafts = { ...state.drafts }
+  delete drafts[oldPath]
+  drafts[newPath] = updatedDraft
+  const order = touchEntry(
+    state.order.filter((entry) => entry !== oldPath && entry !== newPath),
+    newPath
+  )
+  return createDraftCacheState(drafts, order)
+}
+
+export const mostRecentDraftPath = (order: string[]): string | null =>
+  order.length ? order[order.length - 1] : null
diff --git a/src/platform/workflow/persistence/composables/useWorkflowPersistence.test.ts b/src/platform/workflow/persistence/composables/useWorkflowPersistence.test.ts
new file mode 100644
index 000000000..76dac06c6
--- /dev/null
+++ b/src/platform/workflow/persistence/composables/useWorkflowPersistence.test.ts
@@ -0,0 +1,254 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import type * as I18n from 'vue-i18n'
+
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import { useWorkflowPersistence } from '@/platform/workflow/persistence/composables/useWorkflowPersistence'
+import { useWorkflowDraftStore } from '@/platform/workflow/persistence/stores/workflowDraftStore'
+import { defaultGraphJSON } from '@/scripts/defaultGraph'
+import { setStorageValue } from '@/scripts/utils'
+
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: vi.fn(() => ({
+    get: vi.fn((key: string) =>
+      key === 'Comfy.Workflow.Persist' ? true : undefined
+    ),
+    set: vi.fn()
+  }))
+}))
+
+const mockToastAdd = vi.fn()
+vi.mock('primevue', () => ({
+  useToast: () => ({
+    add: mockToastAdd
+  })
+}))
+
+vi.mock('vue-i18n', async (importOriginal) => {
+  const actual = await importOriginal<typeof I18n>()
+  return {
+    ...actual,
+    useI18n: () => ({
+      t: (key: string) => key
+    })
+  }
+})
+
+const loadBlankWorkflow = vi.fn()
+vi.mock('@/platform/workflow/core/services/workflowService', () => ({
+  useWorkflowService: () => ({
+    loadBlankWorkflow
+  })
+}))
+
+vi.mock(
+  '@/platform/workflow/templates/composables/useTemplateUrlLoader',
+  () => ({
+    useTemplateUrlLoader: () => ({
+      loadTemplateFromUrlParams: vi.fn()
+    })
+  })
+)
+
+const executeCommand = vi.fn()
+vi.mock('@/stores/commandStore', () => ({
+  useCommandStore: () => ({
+    execute: executeCommand
+  })
+}))
+
+type GraphChangedHandler = (() => void) | null
+
+const mocks = vi.hoisted(() => {
+  const state = {
+    graphChangedHandler: null as GraphChangedHandler,
+    currentGraph: {} as Record<string, unknown>
+  }
+  const serializeMock = vi.fn(() => state.currentGraph)
+  const loadGraphDataMock = vi.fn()
+  const apiMock = {
+    clientId: 'test-client',
+    initialClientId: 'test-client',
+    addEventListener: vi.fn((event: string, handler: () => void) => {
+      if (event === 'graphChanged') {
+        state.graphChangedHandler = handler
+      }
+    }),
+    removeEventListener: vi.fn(),
+    getUserData: vi.fn(),
+    storeUserData: vi.fn(),
+    listUserDataFullInfo: vi.fn(),
+    storeSetting: vi.fn(),
+    getSettings: vi.fn(),
+    deleteUserData: vi.fn(),
+    moveUserData: vi.fn(),
+    apiURL: vi.fn((path: string) => path)
+  }
+  return { state, serializeMock, loadGraphDataMock, apiMock }
+})
+
+vi.mock('@/scripts/app', () => ({
+  app: {
+    graph: {
+      serialize: () => mocks.serializeMock()
+    },
+    rootGraph: {
+      serialize: () => mocks.serializeMock()
+    },
+    loadGraphData: (...args: unknown[]) => mocks.loadGraphDataMock(...args),
+    canvas: {}
+  }
+}))
+
+vi.mock('@/scripts/api', () => ({
+  api: mocks.apiMock
+}))
+
+describe('useWorkflowPersistence', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date('2025-01-01T00:00:00Z'))
+    setActivePinia(createPinia())
+    localStorage.clear()
+    sessionStorage.clear()
+    vi.clearAllMocks()
+    mockToastAdd.mockClear()
+    useWorkflowDraftStore().reset()
+    mocks.state.graphChangedHandler = null
+    mocks.state.currentGraph = { initial: true }
+    mocks.serializeMock.mockImplementation(() => mocks.state.currentGraph)
+    mocks.loadGraphDataMock.mockReset()
+    mocks.apiMock.clientId = 'test-client'
+    mocks.apiMock.initialClientId = 'test-client'
+    mocks.apiMock.addEventListener.mockImplementation(
+      (event: string, handler: () => void) => {
+        if (event === 'graphChanged') {
+          mocks.state.graphChangedHandler = handler
+        }
+      }
+    )
+    mocks.apiMock.removeEventListener.mockImplementation(() => {})
+    mocks.apiMock.listUserDataFullInfo.mockResolvedValue([])
+    mocks.apiMock.getUserData.mockResolvedValue({
+      status: 200,
+      text: () => Promise.resolve(defaultGraphJSON)
+    } as Response)
+    mocks.apiMock.apiURL.mockImplementation((path: string) => path)
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('persists snapshots for multiple workflows', async () => {
+    const workflowStore = useWorkflowStore()
+    const workflowA = workflowStore.createTemporary('DraftA.json')
+    await workflowStore.openWorkflow(workflowA)
+
+    const persistence = useWorkflowPersistence()
+    expect(persistence).toBeDefined()
+    expect(mocks.state.graphChangedHandler).toBeTypeOf('function')
+
+    const graphA = { title: 'A' }
+    mocks.state.currentGraph = graphA
+    mocks.state.graphChangedHandler!()
+    await vi.advanceTimersByTimeAsync(800)
+
+    const workflowB = workflowStore.createTemporary('DraftB.json')
+    await workflowStore.openWorkflow(workflowB)
+    const graphB = { title: 'B' }
+    mocks.state.currentGraph = graphB
+    mocks.state.graphChangedHandler!()
+    await vi.advanceTimersByTimeAsync(800)
+
+    const drafts = JSON.parse(
+      localStorage.getItem('Comfy.Workflow.Drafts') ?? '{}'
+    ) as Record<string, { data: string; isTemporary: boolean }>
+
+    expect(Object.keys(drafts)).toEqual(
+      expect.arrayContaining(['workflows/DraftA.json', 'workflows/DraftB.json'])
+    )
+    expect(JSON.parse(drafts['workflows/DraftA.json'].data)).toEqual(graphA)
+    expect(JSON.parse(drafts['workflows/DraftB.json'].data)).toEqual(graphB)
+    expect(drafts['workflows/DraftA.json'].isTemporary).toBe(true)
+    expect(drafts['workflows/DraftB.json'].isTemporary).toBe(true)
+  })
+
+  it('evicts least recently used drafts beyond the limit', async () => {
+    const workflowStore = useWorkflowStore()
+    useWorkflowPersistence()
+    expect(mocks.state.graphChangedHandler).toBeTypeOf('function')
+
+    for (let i = 0; i < 33; i++) {
+      const workflow = workflowStore.createTemporary(`Draft${i}.json`)
+      await workflowStore.openWorkflow(workflow)
+      mocks.state.currentGraph = { index: i }
+      mocks.state.graphChangedHandler!()
+      await vi.advanceTimersByTimeAsync(800)
+      vi.setSystemTime(new Date(Date.now() + 60000))
+    }
+
+    const drafts = JSON.parse(
+      localStorage.getItem('Comfy.Workflow.Drafts') ?? '{}'
+    ) as Record<string, any>
+
+    expect(Object.keys(drafts).length).toBe(32)
+    expect(drafts['workflows/Draft0.json']).toBeUndefined()
+    expect(drafts['workflows/Draft32.json']).toBeDefined()
+  })
+
+  it('restores temporary tabs from cached drafts', async () => {
+    const workflowStore = useWorkflowStore()
+    const draftStore = useWorkflowDraftStore()
+    const draftData = JSON.parse(defaultGraphJSON)
+    draftStore.saveDraft('workflows/Unsaved Workflow.json', {
+      data: JSON.stringify(draftData),
+      updatedAt: Date.now(),
+      name: 'Unsaved Workflow.json',
+      isTemporary: true
+    })
+    setStorageValue(
+      'Comfy.OpenWorkflowsPaths',
+      JSON.stringify(['workflows/Unsaved Workflow.json'])
+    )
+    setStorageValue('Comfy.ActiveWorkflowIndex', JSON.stringify(0))
+
+    const { restoreWorkflowTabsState } = useWorkflowPersistence()
+    restoreWorkflowTabsState()
+
+    const restored = workflowStore.getWorkflowByPath(
+      'workflows/Unsaved Workflow.json'
+    )
+    expect(restored).toBeTruthy()
+    expect(restored?.isTemporary).toBe(true)
+    expect(
+      workflowStore.openWorkflows.map((workflow) => workflow?.path)
+    ).toContain('workflows/Unsaved Workflow.json')
+  })
+
+  it('shows error toast when draft save fails', async () => {
+    const workflowStore = useWorkflowStore()
+    const draftStore = useWorkflowDraftStore()
+
+    const workflow = workflowStore.createTemporary('FailingDraft.json')
+    await workflowStore.openWorkflow(workflow)
+
+    useWorkflowPersistence()
+    expect(mocks.state.graphChangedHandler).toBeTypeOf('function')
+
+    vi.spyOn(draftStore, 'saveDraft').mockImplementation(() => {
+      throw new Error('Storage quota exceeded')
+    })
+
+    mocks.state.currentGraph = { title: 'Test' }
+    mocks.state.graphChangedHandler!()
+    await vi.advanceTimersByTimeAsync(800)
+
+    expect(mockToastAdd).toHaveBeenCalledWith(
+      expect.objectContaining({
+        severity: 'error',
+        detail: expect.any(String)
+      })
+    )
+  })
+})
diff --git a/src/platform/workflow/persistence/composables/useWorkflowPersistence.ts b/src/platform/workflow/persistence/composables/useWorkflowPersistence.ts
index 09ffd5895..06e7bff61 100644
--- a/src/platform/workflow/persistence/composables/useWorkflowPersistence.ts
+++ b/src/platform/workflow/persistence/composables/useWorkflowPersistence.ts
@@ -1,5 +1,7 @@
+import { useToast } from 'primevue'
 import { tryOnScopeDispose } from '@vueuse/core'
-import { computed, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 
 import {
@@ -9,7 +11,11 @@ import {
 import { PRESERVED_QUERY_NAMESPACES } from '@/platform/navigation/preservedQueryNamespaces'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
-import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import {
+  ComfyWorkflow,
+  useWorkflowStore
+} from '@/platform/workflow/management/stores/workflowStore'
+import { useWorkflowDraftStore } from '@/platform/workflow/persistence/stores/workflowDraftStore'
 import { useTemplateUrlLoader } from '@/platform/workflow/templates/composables/useTemplateUrlLoader'
 import { api } from '@/scripts/api'
 import { app as comfyApp } from '@/scripts/app'
@@ -17,12 +23,15 @@ import { getStorageValue, setStorageValue } from '@/scripts/utils'
 import { useCommandStore } from '@/stores/commandStore'
 
 export function useWorkflowPersistence() {
+  const { t } = useI18n()
   const workflowStore = useWorkflowStore()
   const settingStore = useSettingStore()
   const route = useRoute()
   const router = useRouter()
   const templateUrlLoader = useTemplateUrlLoader()
   const TEMPLATE_NAMESPACE = PRESERVED_QUERY_NAMESPACES.TEMPLATE
+  const workflowDraftStore = useWorkflowDraftStore()
+  const toast = useToast()
 
   const ensureTemplateQueryFromIntent = async () => {
     hydratePreservedQuery(TEMPLATE_NAMESPACE)
@@ -42,14 +51,40 @@ export function useWorkflowPersistence() {
     settingStore.get('Comfy.Workflow.Persist')
   )
 
+  const lastSavedJsonByPath = ref<Record<string, string>>({})
+
   const persistCurrentWorkflow = () => {
     if (!workflowPersistenceEnabled.value) return
-    const workflow = JSON.stringify(comfyApp.rootGraph.serialize())
+    const activeWorkflow = workflowStore.activeWorkflow
+    if (!activeWorkflow) return
+    const graphData = comfyApp.rootGraph.serialize()
+    const workflowJson = JSON.stringify(graphData)
+    const workflowPath = activeWorkflow.path
+
+    if (workflowJson === lastSavedJsonByPath.value[workflowPath]) return
 
     try {
-      localStorage.setItem('workflow', workflow)
+      workflowDraftStore.saveDraft(activeWorkflow.path, {
+        data: workflowJson,
+        updatedAt: Date.now(),
+        name: activeWorkflow.key,
+        isTemporary: activeWorkflow.isTemporary
+      })
+    } catch (error) {
+      console.error('Failed to save draft', error)
+      toast.add({
+        severity: 'error',
+        summary: t('g.error'),
+        detail: t('toastMessages.failedToSaveDraft'),
+        life: 3000
+      })
+      return
+    }
+
+    try {
+      localStorage.setItem('workflow', workflowJson)
       if (api.clientId) {
-        sessionStorage.setItem(`workflow:${api.clientId}`, workflow)
+        sessionStorage.setItem(`workflow:${api.clientId}`, workflowJson)
       }
     } catch (error) {
       // Only log our own keys and aggregate stats
@@ -57,7 +92,7 @@ export function useWorkflowPersistence() {
         (key) => key.startsWith('workflow:') || key === 'workflow'
       )
       console.error('QuotaExceededError details:', {
-        workflowSizeKB: Math.round(workflow.length / 1024),
+        workflowSizeKB: Math.round(workflowJson.length / 1024),
         totalStorageItems: Object.keys(sessionStorage).length,
         ourWorkflowKeys: ourKeys.length,
         ourWorkflowSizes: ourKeys.map((key) => ({
@@ -68,33 +103,25 @@ export function useWorkflowPersistence() {
       })
       throw error
     }
-  }
 
-  const loadWorkflowFromStorage = async (
-    json: string | null,
-    workflowName: string | null
-  ) => {
-    if (!json) return false
-    const workflow = JSON.parse(json)
-    await comfyApp.loadGraphData(workflow, true, true, workflowName)
-    return true
+    lastSavedJsonByPath.value[workflowPath] = workflowJson
+
+    if (!activeWorkflow.isTemporary && !activeWorkflow.isModified) {
+      workflowDraftStore.removeDraft(activeWorkflow.path)
+      return
+    }
   }
 
   const loadPreviousWorkflowFromStorage = async () => {
     const workflowName = getStorageValue('Comfy.PreviousWorkflow')
-    const clientId = api.initialClientId ?? api.clientId
-
-    // Try loading from session storage first
-    if (clientId) {
-      const sessionWorkflow = sessionStorage.getItem(`workflow:${clientId}`)
-      if (await loadWorkflowFromStorage(sessionWorkflow, workflowName)) {
-        return true
-      }
-    }
-
-    // Fall back to local storage
-    const localWorkflow = localStorage.getItem('workflow')
-    return await loadWorkflowFromStorage(localWorkflow, workflowName)
+    const preferredPath = workflowName
+      ? `${ComfyWorkflow.basePath}${workflowName}`
+      : null
+    return await workflowDraftStore.loadPersistedWorkflow({
+      workflowName,
+      preferredPath,
+      fallbackToLatestDraft: !workflowName
+    })
   }
 
   const loadDefaultWorkflow = async () => {
@@ -141,6 +168,7 @@ export function useWorkflowPersistence() {
       persistCurrentWorkflow()
     }
   )
+
   api.addEventListener('graphChanged', persistCurrentWorkflow)
 
   // Clean up event listener when component unmounts
@@ -158,24 +186,33 @@ export function useWorkflowPersistence() {
       }
 
       const paths = openWorkflows.value
-        .filter((workflow) => workflow?.isPersisted)
-        .map((workflow) => workflow.path)
-      const activeIndex = openWorkflows.value.findIndex(
-        (workflow) => workflow.path === activeWorkflow.value?.path
-      )
+        .map((workflow) => workflow?.path)
+        .filter(
+          (path): path is string =>
+            typeof path === 'string' && path.startsWith(ComfyWorkflow.basePath)
+        )
+      const activeIndex = paths.indexOf(activeWorkflow.value.path)
 
       return { paths, activeIndex }
     }
   )
 
   // Get storage values before setting watchers
-  const storedWorkflows = JSON.parse(
+  const parsedWorkflows = JSON.parse(
     getStorageValue('Comfy.OpenWorkflowsPaths') || '[]'
   )
-  const storedActiveIndex = JSON.parse(
+  const storedWorkflows = Array.isArray(parsedWorkflows)
+    ? parsedWorkflows.filter(
+        (entry): entry is string => typeof entry === 'string'
+      )
+    : []
+  const parsedIndex = JSON.parse(
     getStorageValue('Comfy.ActiveWorkflowIndex') || '-1'
   )
-
+  const storedActiveIndex =
+    typeof parsedIndex === 'number' && Number.isFinite(parsedIndex)
+      ? parsedIndex
+      : -1
   watch(restoreState, ({ paths, activeIndex }) => {
     if (workflowPersistenceEnabled.value) {
       setStorageValue('Comfy.OpenWorkflowsPaths', JSON.stringify(paths))
@@ -186,12 +223,29 @@ export function useWorkflowPersistence() {
   const restoreWorkflowTabsState = () => {
     if (!workflowPersistenceEnabled.value) return
     const isRestorable = storedWorkflows?.length > 0 && storedActiveIndex >= 0
-    if (isRestorable) {
-      workflowStore.openWorkflowsInBackground({
-        left: storedWorkflows.slice(0, storedActiveIndex),
-        right: storedWorkflows.slice(storedActiveIndex)
-      })
-    }
+    if (!isRestorable) return
+
+    storedWorkflows.forEach((path: string) => {
+      if (workflowStore.getWorkflowByPath(path)) return
+      const draft = workflowDraftStore.getDraft(path)
+      if (!draft?.isTemporary) return
+      try {
+        const workflowData = JSON.parse(draft.data)
+        workflowStore.createTemporary(draft.name, workflowData)
+      } catch (err) {
+        console.warn(
+          'Failed to parse workflow draft, creating with default',
+          err
+        )
+        workflowDraftStore.removeDraft(path)
+        workflowStore.createTemporary(draft.name)
+      }
+    })
+
+    workflowStore.openWorkflowsInBackground({
+      left: storedWorkflows.slice(0, storedActiveIndex),
+      right: storedWorkflows.slice(storedActiveIndex)
+    })
   }
 
   return {
diff --git a/src/platform/workflow/persistence/stores/workflowDraftStore.ts b/src/platform/workflow/persistence/stores/workflowDraftStore.ts
new file mode 100644
index 000000000..30280e124
--- /dev/null
+++ b/src/platform/workflow/persistence/stores/workflowDraftStore.ts
@@ -0,0 +1,161 @@
+import { useStorage } from '@vueuse/core'
+import { defineStore } from 'pinia'
+import { computed } from 'vue'
+
+import type {
+  DraftCacheState,
+  WorkflowDraftSnapshot
+} from '@/platform/workflow/persistence/base/draftCache'
+import {
+  MAX_DRAFTS,
+  createDraftCacheState,
+  mostRecentDraftPath,
+  moveDraft as moveDraftEntry,
+  removeDraft as removeDraftEntry,
+  touchEntry,
+  upsertDraft
+} from '@/platform/workflow/persistence/base/draftCache'
+import { api } from '@/scripts/api'
+import { app as comfyApp } from '@/scripts/app'
+
+const DRAFTS_STORAGE_KEY = 'Comfy.Workflow.Drafts'
+const ORDER_STORAGE_KEY = 'Comfy.Workflow.DraftOrder'
+
+interface LoadPersistedWorkflowOptions {
+  workflowName: string | null
+  preferredPath?: string | null
+  fallbackToLatestDraft?: boolean
+}
+
+export const useWorkflowDraftStore = defineStore('workflowDraft', () => {
+  const storedDrafts = useStorage<Record<string, WorkflowDraftSnapshot>>(
+    DRAFTS_STORAGE_KEY,
+    {}
+  )
+  const storedOrder = useStorage<string[]>(ORDER_STORAGE_KEY, [])
+
+  const mostRecentDraft = computed(() => mostRecentDraftPath(storedOrder.value))
+
+  const currentState = (): DraftCacheState =>
+    createDraftCacheState(storedDrafts.value, storedOrder.value)
+
+  const updateState = (state: DraftCacheState) => {
+    storedDrafts.value = state.drafts
+    storedOrder.value = state.order
+  }
+
+  const saveDraft = (path: string, snapshot: WorkflowDraftSnapshot) => {
+    try {
+      updateState(upsertDraft(currentState(), path, snapshot, MAX_DRAFTS))
+    } catch (error) {
+      if (
+        error instanceof DOMException &&
+        error.name === 'QuotaExceededError'
+      ) {
+        const state = currentState()
+        if (state.order.length > 0) {
+          const oldestPath = state.order[0]
+          updateState(removeDraftEntry(state, oldestPath))
+          updateState(upsertDraft(currentState(), path, snapshot, MAX_DRAFTS))
+        } else {
+          throw error
+        }
+      } else {
+        throw error
+      }
+    }
+  }
+
+  const removeDraft = (path: string) => {
+    updateState(removeDraftEntry(currentState(), path))
+  }
+
+  const moveDraft = (oldPath: string, newPath: string, name: string) => {
+    updateState(moveDraftEntry(currentState(), oldPath, newPath, name))
+  }
+
+  const markDraftUsed = (path: string) => {
+    if (!(path in storedDrafts.value)) return
+    storedOrder.value = touchEntry(storedOrder.value, path)
+  }
+
+  const getDraft = (path: string) => storedDrafts.value[path]
+
+  const tryLoadGraph = async (
+    payload: string | null,
+    workflowName: string | null,
+    onFailure?: () => void
+  ) => {
+    if (!payload) return false
+    try {
+      const workflow = JSON.parse(payload)
+      await comfyApp.loadGraphData(
+        workflow,
+        /* clean= */ true,
+        /* restore_view= */ true,
+        workflowName
+      )
+      return true
+    } catch (err) {
+      console.error('Failed to load persisted workflow', err)
+      onFailure?.()
+      return false
+    }
+  }
+
+  const loadDraft = async (path: string) => {
+    const draft = getDraft(path)
+    if (!draft) return false
+    const loaded = await tryLoadGraph(draft.data, draft.name, () => {
+      removeDraft(path)
+    })
+    if (loaded) {
+      markDraftUsed(path)
+    }
+    return loaded
+  }
+
+  const loadPersistedWorkflow = async (
+    options: LoadPersistedWorkflowOptions
+  ): Promise<boolean> => {
+    const {
+      workflowName,
+      preferredPath,
+      fallbackToLatestDraft = false
+    } = options
+
+    if (preferredPath && (await loadDraft(preferredPath))) {
+      return true
+    }
+
+    if (!preferredPath && fallbackToLatestDraft) {
+      const fallbackPath = mostRecentDraft.value
+      if (fallbackPath && (await loadDraft(fallbackPath))) {
+        return true
+      }
+    }
+
+    const clientId = api.initialClientId ?? api.clientId
+    if (clientId) {
+      const sessionPayload = sessionStorage.getItem(`workflow:${clientId}`)
+      if (await tryLoadGraph(sessionPayload, workflowName)) {
+        return true
+      }
+    }
+
+    const localPayload = localStorage.getItem('workflow')
+    return await tryLoadGraph(localPayload, workflowName)
+  }
+
+  return {
+    saveDraft,
+    removeDraft,
+    moveDraft,
+    markDraftUsed,
+    getDraft,
+    loadPersistedWorkflow,
+    reset: () => {
+      updateState(createDraftCacheState())
+    }
+  }
+})
diff --git a/src/platform/workspace/api/workspaceApi.ts b/src/platform/workspace/api/workspaceApi.ts
new file mode 100644
index 000000000..d7403f9f3
--- /dev/null
+++ b/src/platform/workspace/api/workspaceApi.ts
@@ -0,0 +1,349 @@
+import axios from 'axios'
+
+import { t } from '@/i18n'
+import { api } from '@/scripts/api'
+import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
+
+export type WorkspaceType = 'personal' | 'team'
+export type WorkspaceRole = 'owner' | 'member'
+
+interface Workspace {
+  id: string
+  name: string
+  type: WorkspaceType
+}
+
+export interface WorkspaceWithRole extends Workspace {
+  role: WorkspaceRole
+}
+
+export interface Member {
+  id: string
+  name: string
+  email: string
+  joined_at: string
+  role: WorkspaceRole
+}
+
+interface PaginationInfo {
+  offset: number
+  limit: number
+  total: number
+}
+
+interface ListMembersResponse {
+  members: Member[]
+  pagination: PaginationInfo
+}
+
+export interface ListMembersParams {
+  offset?: number
+  limit?: number
+}
+
+export interface PendingInvite {
+  id: string
+  email: string
+  token: string
+  invited_at: string
+  expires_at: string
+}
+
+interface ListInvitesResponse {
+  invites: PendingInvite[]
+}
+
+interface CreateInviteRequest {
+  email: string
+}
+
+interface AcceptInviteResponse {
+  workspace_id: string
+  workspace_name: string
+}
+
+interface BillingPortalRequest {
+  return_url: string
+}
+
+interface BillingPortalResponse {
+  billing_portal_url: string
+}
+
+interface CreateWorkspacePayload {
+  name: string
+}
+
+interface UpdateWorkspacePayload {
+  name: string
+}
+
+interface ListWorkspacesResponse {
+  workspaces: WorkspaceWithRole[]
+}
+
+class WorkspaceApiError extends Error {
+  constructor(
+    message: string,
+    public readonly status?: number,
+    public readonly code?: string
+  ) {
+    super(message)
+    this.name = 'WorkspaceApiError'
+  }
+}
+
+const workspaceApiClient = axios.create({
+  headers: {
+    'Content-Type': 'application/json'
+  }
+})
+
+async function getAuthHeaderOrThrow() {
+  const authHeader = await useFirebaseAuthStore().getAuthHeader()
+  if (!authHeader) {
+    throw new WorkspaceApiError(
+      t('toastMessages.userNotAuthenticated'),
+      401,
+      'NOT_AUTHENTICATED'
+    )
+  }
+  return authHeader
+}
+
+async function getFirebaseHeaderOrThrow() {
+  const authHeader = await useFirebaseAuthStore().getFirebaseAuthHeader()
+  if (!authHeader) {
+    throw new WorkspaceApiError(
+      t('toastMessages.userNotAuthenticated'),
+      401,
+      'NOT_AUTHENTICATED'
+    )
+  }
+  return authHeader
+}
+
+function handleAxiosError(err: unknown): never {
+  if (axios.isAxiosError(err)) {
+    const status = err.response?.status
+    const message = err.response?.data?.message ?? err.message
+    throw new WorkspaceApiError(message, status)
+  }
+  throw err
+}
+
+export const workspaceApi = {
+  /**
+   * List all workspaces the user has access to
+   * GET /api/workspaces
+   */
+  async list(): Promise<ListWorkspacesResponse> {
+    const headers = await getAuthHeaderOrThrow()
+    try {
+      const response = await workspaceApiClient.get<ListWorkspacesResponse>(
+        api.apiURL('/workspaces'),
+        { headers }
+      )
+      return response.data
+    } catch (err) {
+      handleAxiosError(err)
+    }
+  },
+
+  /**
+   * Create a new workspace
+   * POST /api/workspaces
+   */
+  async create(payload: CreateWorkspacePayload): Promise<WorkspaceWithRole> {
+    const headers = await getAuthHeaderOrThrow()
+    try {
+      const response = await workspaceApiClient.post<WorkspaceWithRole>(
+        api.apiURL('/workspaces'),
+        payload,
+        { headers }
+      )
+      return response.data
+    } catch (err) {
+      handleAxiosError(err)
+    }
+  },
+
+  /**
+   * Update workspace name
+   * PATCH /api/workspaces/:id
+   */
+  async update(
+    workspaceId: string,
+    payload: UpdateWorkspacePayload
+  ): Promise<WorkspaceWithRole> {
+    const headers = await getAuthHeaderOrThrow()
+    try {
+      const response = await workspaceApiClient.patch<WorkspaceWithRole>(
+        api.apiURL(`/workspaces/${workspaceId}`),
+        payload,
+        { headers }
+      )
+      return response.data
+    } catch (err) {
+      handleAxiosError(err)
+    }
+  },
+
+  /**
+   * Delete a workspace (owner only)
+   * DELETE /api/workspaces/:id
+   */
+  async delete(workspaceId: string): Promise<void> {
+    const headers = await getAuthHeaderOrThrow()
+    try {
+      await workspaceApiClient.delete(
+        api.apiURL(`/workspaces/${workspaceId}`),
+        {
+          headers
+        }
+      )
+    } catch (err) {
+      handleAxiosError(err)
+    }
+  },
+
+  /**
+   * Leave the current workspace.
+   * POST /api/workspace/leave
+   */
+  async leave(): Promise<void> {
+    const headers = await getAuthHeaderOrThrow()
+    try {
+      await workspaceApiClient.post(api.apiURL('/workspace/leave'), null, {
+        headers
+      })
+    } catch (err) {
+      handleAxiosError(err)
+    }
+  },
+
+  /**
+   * List workspace members (paginated).
+   * GET /api/workspace/members
+   */
+  async listMembers(params?: ListMembersParams): Promise<ListMembersResponse> {
+    const headers = await getAuthHeaderOrThrow()
+    try {
+      const response = await workspaceApiClient.get<ListMembersResponse>(
+        api.apiURL('/workspace/members'),
+        { headers, params }
+      )
+      return response.data
+    } catch (err) {
+      handleAxiosError(err)
+    }
+  },
+
+  /**
+   * Remove a member from the workspace.
+   * DELETE /api/workspace/members/:userId
+   */
+  async removeMember(userId: string): Promise<void> {
+    const headers = await getAuthHeaderOrThrow()
+    try {
+      await workspaceApiClient.delete(
+        api.apiURL(`/workspace/members/${userId}`),
+        { headers }
+      )
+    } catch (err) {
+      handleAxiosError(err)
+    }
+  },
+
+  /**
+   * List pending invites for the workspace.
+   * GET /api/workspace/invites
+   */
+  async listInvites(): Promise<ListInvitesResponse> {
+    const headers = await getAuthHeaderOrThrow()
+    try {
+      const response = await workspaceApiClient.get<ListInvitesResponse>(
+        api.apiURL('/workspace/invites'),
+        { headers }
+      )
+      return response.data
+    } catch (err) {
+      handleAxiosError(err)
+    }
+  },
+
+  /**
+   * Create an invite for the workspace.
+   * POST /api/workspace/invites
+   */
+  async createInvite(payload: CreateInviteRequest): Promise<PendingInvite> {
+    const headers = await getAuthHeaderOrThrow()
+    try {
+      const response = await workspaceApiClient.post<PendingInvite>(
+        api.apiURL('/workspace/invites'),
+        payload,
+        { headers }
+      )
+      return response.data
+    } catch (err) {
+      handleAxiosError(err)
+    }
+  },
+
+  /**
+   * Revoke a pending invite.
+   * DELETE /api/workspace/invites/:inviteId
+   */
+  async revokeInvite(inviteId: string): Promise<void> {
+    const headers = await getAuthHeaderOrThrow()
+    try {
+      await workspaceApiClient.delete(
+        api.apiURL(`/workspace/invites/${inviteId}`),
+        { headers }
+      )
+    } catch (err) {
+      handleAxiosError(err)
+    }
+  },
+
+  /**
+   * Accept a workspace invite.
+   * POST /api/invites/:token/accept
+   * Uses Firebase auth (user identity) since the user isn't yet a workspace member.
+   */
+  async acceptInvite(token: string): Promise<AcceptInviteResponse> {
+    const headers = await getFirebaseHeaderOrThrow()
+    try {
+      const response = await workspaceApiClient.post<AcceptInviteResponse>(
+        api.apiURL(`/invites/${token}/accept`),
+        null,
+        { headers }
+      )
+      return response.data
+    } catch (err) {
+      handleAxiosError(err)
+    }
+  },
+
+  /**
+   * Access the billing portal for the current workspace.
+   * POST /api/billing/portal
+   */
+  async accessBillingPortal(
+    returnUrl?: string
+  ): Promise<BillingPortalResponse> {
+    const headers = await getAuthHeaderOrThrow()
+    try {
+      const response = await workspaceApiClient.post<BillingPortalResponse>(
+        api.apiURL('/billing/portal'),
+        {
+          return_url: returnUrl ?? window.location.href
+        } satisfies BillingPortalRequest,
+        { headers }
+      )
+      return response.data
+    } catch (err) {
+      handleAxiosError(err)
+    }
+  }
+}
diff --git a/src/platform/workspace/composables/useInviteUrlLoader.test.ts b/src/platform/workspace/composables/useInviteUrlLoader.test.ts
new file mode 100644
index 000000000..80844f345
--- /dev/null
+++ b/src/platform/workspace/composables/useInviteUrlLoader.test.ts
@@ -0,0 +1,232 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useInviteUrlLoader } from './useInviteUrlLoader'
+
+/**
+ * Unit tests for useInviteUrlLoader composable
+ *
+ * Tests the behavior of accepting workspace invites via URL query parameters:
+ * - ?invite=TOKEN accepts the invite and shows success toast
+ * - Invalid/missing token is handled gracefully
+ * - API errors show error toast
+ * - URL is cleaned up after processing
+ * - Preserved query is restored after login redirect
+ */
+
+const preservedQueryMocks = vi.hoisted(() => ({
+  clearPreservedQuery: vi.fn(),
+  hydratePreservedQuery: vi.fn(),
+  mergePreservedQueryIntoQuery: vi.fn()
+}))
+
+vi.mock(
+  '@/platform/navigation/preservedQueryManager',
+  () => preservedQueryMocks
+)
+
+const mockRouteQuery = vi.hoisted(() => ({
+  value: {} as Record<string, string>
+}))
+const mockRouterReplace = vi.hoisted(() => vi.fn())
+
+vi.mock('vue-router', () => ({
+  useRoute: () => ({
+    query: mockRouteQuery.value
+  }),
+  useRouter: () => ({
+    replace: mockRouterReplace
+  })
+}))
+
+const mockToastAdd = vi.hoisted(() => vi.fn())
+vi.mock('primevue/usetoast', () => ({
+  useToast: () => ({
+    add: mockToastAdd
+  })
+}))
+
+vi.mock('vue-i18n', () => ({
+  createI18n: () => ({
+    global: {
+      t: (key: string) => key
+    }
+  }),
+  useI18n: () => ({
+    t: vi.fn((key: string, params?: Record<string, unknown>) => {
+      if (key === 'workspace.inviteAccepted') return 'Invite Accepted'
+      if (key === 'workspace.addedToWorkspace') {
+        return `You have been added to ${params?.workspaceName}`
+      }
+      if (key === 'workspace.inviteFailed') return 'Failed to Accept Invite'
+      if (key === 'g.unknownError') return 'Unknown error'
+      return key
+    })
+  })
+}))
+
+const mockAcceptInvite = vi.hoisted(() => vi.fn())
+vi.mock('../stores/teamWorkspaceStore', () => ({
+  useTeamWorkspaceStore: () => ({
+    acceptInvite: mockAcceptInvite
+  })
+}))
+
+describe('useInviteUrlLoader', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockRouteQuery.value = {}
+    preservedQueryMocks.mergePreservedQueryIntoQuery.mockReturnValue(null)
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  describe('loadInviteFromUrl', () => {
+    it('does nothing when no invite param present', async () => {
+      mockRouteQuery.value = {}
+
+      const { loadInviteFromUrl } = useInviteUrlLoader()
+      await loadInviteFromUrl()
+
+      expect(mockAcceptInvite).not.toHaveBeenCalled()
+      expect(mockToastAdd).not.toHaveBeenCalled()
+      expect(mockRouterReplace).not.toHaveBeenCalled()
+    })
+
+    it('restores preserved query and processes invite', async () => {
+      mockRouteQuery.value = {}
+      preservedQueryMocks.mergePreservedQueryIntoQuery.mockReturnValue({
+        invite: 'preserved-token'
+      })
+      mockAcceptInvite.mockResolvedValue({
+        workspaceId: 'ws-123',
+        workspaceName: 'Test Workspace'
+      })
+
+      const { loadInviteFromUrl } = useInviteUrlLoader()
+      await loadInviteFromUrl()
+
+      expect(preservedQueryMocks.hydratePreservedQuery).toHaveBeenCalledWith(
+        'invite'
+      )
+      expect(mockRouterReplace).toHaveBeenCalledWith({
+        query: { invite: 'preserved-token' }
+      })
+      expect(mockAcceptInvite).toHaveBeenCalledWith('preserved-token')
+    })
+
+    it('accepts invite and shows success toast on success', async () => {
+      mockRouteQuery.value = { invite: 'valid-token' }
+      mockAcceptInvite.mockResolvedValue({
+        workspaceId: 'ws-123',
+        workspaceName: 'Test Workspace'
+      })
+
+      const { loadInviteFromUrl } = useInviteUrlLoader()
+      await loadInviteFromUrl()
+
+      expect(mockAcceptInvite).toHaveBeenCalledWith('valid-token')
+      expect(mockToastAdd).toHaveBeenCalledWith({
+        severity: 'success',
+        summary: 'Invite Accepted',
+        detail: 'You have been added to Test Workspace',
+        life: 5000
+      })
+    })
+
+    it('shows error toast when invite acceptance fails', async () => {
+      mockRouteQuery.value = { invite: 'invalid-token' }
+      mockAcceptInvite.mockRejectedValue(new Error('Invalid invite'))
+
+      const { loadInviteFromUrl } = useInviteUrlLoader()
+      await loadInviteFromUrl()
+
+      expect(mockAcceptInvite).toHaveBeenCalledWith('invalid-token')
+      expect(mockToastAdd).toHaveBeenCalledWith({
+        severity: 'error',
+        summary: 'Failed to Accept Invite',
+        detail: 'Invalid invite',
+        life: 5000
+      })
+    })
+
+    it('cleans up URL after processing invite', async () => {
+      mockRouteQuery.value = { invite: 'valid-token', other: 'param' }
+      mockAcceptInvite.mockResolvedValue({
+        workspaceId: 'ws-123',
+        workspaceName: 'Test Workspace'
+      })
+
+      const { loadInviteFromUrl } = useInviteUrlLoader()
+      await loadInviteFromUrl()
+
+      // Should replace with query without invite param
+      expect(mockRouterReplace).toHaveBeenCalledWith({
+        query: { other: 'param' }
+      })
+    })
+
+    it('clears preserved query after processing', async () => {
+      mockRouteQuery.value = { invite: 'valid-token' }
+      mockAcceptInvite.mockResolvedValue({
+        workspaceId: 'ws-123',
+        workspaceName: 'Test Workspace'
+      })
+
+      const { loadInviteFromUrl } = useInviteUrlLoader()
+      await loadInviteFromUrl()
+
+      expect(preservedQueryMocks.clearPreservedQuery).toHaveBeenCalledWith(
+        'invite'
+      )
+    })
+
+    it('clears preserved query even on error', async () => {
+      mockRouteQuery.value = { invite: 'invalid-token' }
+      mockAcceptInvite.mockRejectedValue(new Error('Invalid invite'))
+
+      const { loadInviteFromUrl } = useInviteUrlLoader()
+      await loadInviteFromUrl()
+
+      expect(preservedQueryMocks.clearPreservedQuery).toHaveBeenCalledWith(
+        'invite'
+      )
+    })
+
+    it('sends any token format to backend for validation', async () => {
+      mockRouteQuery.value = { invite: 'any-token-format==' }
+      mockAcceptInvite.mockRejectedValue(new Error('Invalid token'))
+
+      const { loadInviteFromUrl } = useInviteUrlLoader()
+      await loadInviteFromUrl()
+
+      // Token is sent to backend, which validates and rejects
+      expect(mockAcceptInvite).toHaveBeenCalledWith('any-token-format==')
+      expect(mockToastAdd).toHaveBeenCalledWith({
+        severity: 'error',
+        summary: 'Failed to Accept Invite',
+        detail: 'Invalid token',
+        life: 5000
+      })
+    })
+
+    it('ignores empty invite param', async () => {
+      mockRouteQuery.value = { invite: '' }
+
+      const { loadInviteFromUrl } = useInviteUrlLoader()
+      await loadInviteFromUrl()
+
+      expect(mockAcceptInvite).not.toHaveBeenCalled()
+    })
+
+    it('ignores non-string invite param', async () => {
+      mockRouteQuery.value = { invite: ['array', 'value'] as unknown as string }
+
+      const { loadInviteFromUrl } = useInviteUrlLoader()
+      await loadInviteFromUrl()
+
+      expect(mockAcceptInvite).not.toHaveBeenCalled()
+    })
+  })
+})
diff --git a/src/platform/workspace/composables/useInviteUrlLoader.ts b/src/platform/workspace/composables/useInviteUrlLoader.ts
new file mode 100644
index 000000000..fe7ce61fb
--- /dev/null
+++ b/src/platform/workspace/composables/useInviteUrlLoader.ts
@@ -0,0 +1,107 @@
+import { useToast } from 'primevue/usetoast'
+import { useI18n } from 'vue-i18n'
+import { useRoute, useRouter } from 'vue-router'
+
+import {
+  clearPreservedQuery,
+  hydratePreservedQuery,
+  mergePreservedQueryIntoQuery
+} from '@/platform/navigation/preservedQueryManager'
+import { PRESERVED_QUERY_NAMESPACES } from '@/platform/navigation/preservedQueryNamespaces'
+
+import { useTeamWorkspaceStore } from '../stores/teamWorkspaceStore'
+
+/**
+ * Composable for loading workspace invites from URL query parameters
+ *
+ * Supports URLs like:
+ * - /?invite=TOKEN (accepts workspace invite)
+ *
+ * The invite token is preserved through login redirects via the
+ * preserved query system (sessionStorage), following the same pattern
+ * as the template URL loader.
+ */
+export function useInviteUrlLoader() {
+  const route = useRoute()
+  const router = useRouter()
+  const { t } = useI18n()
+  const toast = useToast()
+  const workspaceStore = useTeamWorkspaceStore()
+  const INVITE_NAMESPACE = PRESERVED_QUERY_NAMESPACES.INVITE
+
+  /**
+   * Hydrates preserved query from sessionStorage and merges into route.
+   * This restores the invite token after login redirects.
+   */
+  const ensureInviteQueryFromIntent = async () => {
+    hydratePreservedQuery(INVITE_NAMESPACE)
+    const mergedQuery = mergePreservedQueryIntoQuery(
+      INVITE_NAMESPACE,
+      route.query
+    )
+
+    if (mergedQuery) {
+      await router.replace({ query: mergedQuery })
+    }
+
+    return mergedQuery ?? route.query
+  }
+
+  /**
+   * Removes invite parameter from URL using Vue Router
+   */
+  const cleanupUrlParams = () => {
+    const newQuery = { ...route.query }
+    delete newQuery.invite
+    void router.replace({ query: newQuery })
+  }
+
+  /**
+   * Loads and accepts workspace invite from URL query parameters if present.
+   * Handles errors internally and shows appropriate user feedback.
+   *
+   * Flow:
+   * 1. Restore preserved query (for post-login redirect)
+   * 2. Check for invite token in route.query
+   * 3. Accept the invite via API (backend validates token)
+   * 4. Show toast notification
+   * 5. Clean up URL and preserved query
+   */
+  const loadInviteFromUrl = async () => {
+    // Restore preserved query from sessionStorage (handles login redirect case)
+    const query = await ensureInviteQueryFromIntent()
+    const inviteParam = query.invite
+    if (!inviteParam || typeof inviteParam !== 'string') {
+      return
+    }
+
+    try {
+      const result = await workspaceStore.acceptInvite(inviteParam)
+
+      toast.add({
+        severity: 'success',
+        summary: t('workspace.inviteAccepted'),
+        detail: t(
+          'workspace.addedToWorkspace',
+          { workspaceName: result.workspaceName },
+          { escapeParameter: false }
+        ),
+        life: 5000
+      })
+    } catch (error) {
+      toast.add({
+        severity: 'error',
+        summary: t('workspace.inviteFailed'),
+        detail: error instanceof Error ? error.message : t('g.unknownError'),
+        life: 5000
+      })
+    } finally {
+      cleanupUrlParams()
+      clearPreservedQuery(INVITE_NAMESPACE)
+    }
+  }
+
+  return {
+    loadInviteFromUrl
+  }
+}
diff --git a/src/platform/workspace/composables/useWorkspaceUI.ts b/src/platform/workspace/composables/useWorkspaceUI.ts
new file mode 100644
index 000000000..cfe02877a
--- /dev/null
+++ b/src/platform/workspace/composables/useWorkspaceUI.ts
@@ -0,0 +1,177 @@
+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 {
+  canViewOtherMembers: boolean
+  canViewPendingInvites: boolean
+  canInviteMembers: boolean
+  canManageInvites: boolean
+  canRemoveMembers: boolean
+  canLeaveWorkspace: boolean
+  canAccessWorkspaceMenu: boolean
+  canManageSubscription: boolean
+}
+
+/** UI configuration for workspace role */
+interface WorkspaceUIConfig {
+  showMembersList: boolean
+  showPendingTab: boolean
+  showSearch: boolean
+  showDateColumn: boolean
+  showRoleBadge: boolean
+  membersGridCols: string
+  pendingGridCols: string
+  headerGridCols: string
+  showEditWorkspaceMenuItem: boolean
+  workspaceMenuAction: 'leave' | 'delete' | null
+  workspaceMenuDisabledTooltip: string | null
+}
+
+function getPermissions(
+  type: WorkspaceType,
+  role: WorkspaceRole
+): WorkspacePermissions {
+  if (type === 'personal') {
+    return {
+      canViewOtherMembers: false,
+      canViewPendingInvites: false,
+      canInviteMembers: false,
+      canManageInvites: false,
+      canRemoveMembers: false,
+      canLeaveWorkspace: false,
+      canAccessWorkspaceMenu: false,
+      canManageSubscription: true
+    }
+  }
+
+  if (role === 'owner') {
+    return {
+      canViewOtherMembers: true,
+      canViewPendingInvites: true,
+      canInviteMembers: true,
+      canManageInvites: true,
+      canRemoveMembers: true,
+      canLeaveWorkspace: true,
+      canAccessWorkspaceMenu: true,
+      canManageSubscription: true
+    }
+  }
+
+  // member role
+  return {
+    canViewOtherMembers: true,
+    canViewPendingInvites: false,
+    canInviteMembers: false,
+    canManageInvites: false,
+    canRemoveMembers: false,
+    canLeaveWorkspace: true,
+    canAccessWorkspaceMenu: true,
+    canManageSubscription: false
+  }
+}
+
+function getUIConfig(
+  type: WorkspaceType,
+  role: WorkspaceRole
+): WorkspaceUIConfig {
+  if (type === 'personal') {
+    return {
+      showMembersList: false,
+      showPendingTab: false,
+      showSearch: false,
+      showDateColumn: false,
+      showRoleBadge: false,
+      membersGridCols: 'grid-cols-1',
+      pendingGridCols: 'grid-cols-[50%_20%_20%_10%]',
+      headerGridCols: 'grid-cols-1',
+      showEditWorkspaceMenuItem: false,
+      workspaceMenuAction: null,
+      workspaceMenuDisabledTooltip: null
+    }
+  }
+
+  if (role === 'owner') {
+    return {
+      showMembersList: true,
+      showPendingTab: true,
+      showSearch: true,
+      showDateColumn: true,
+      showRoleBadge: true,
+      membersGridCols: 'grid-cols-[50%_40%_10%]',
+      pendingGridCols: 'grid-cols-[50%_20%_20%_10%]',
+      headerGridCols: 'grid-cols-[50%_40%_10%]',
+      showEditWorkspaceMenuItem: true,
+      workspaceMenuAction: 'delete',
+      workspaceMenuDisabledTooltip:
+        'workspacePanel.menu.deleteWorkspaceDisabledTooltip'
+    }
+  }
+
+  // member role
+  return {
+    showMembersList: true,
+    showPendingTab: false,
+    showSearch: true,
+    showDateColumn: true,
+    showRoleBadge: true,
+    membersGridCols: 'grid-cols-[1fr_auto]',
+    pendingGridCols: 'grid-cols-[50%_20%_20%_10%]',
+    headerGridCols: 'grid-cols-[1fr_auto]',
+    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
new file mode 100644
index 000000000..a66be714a
--- /dev/null
+++ b/src/platform/workspace/stores/teamWorkspaceStore.test.ts
@@ -0,0 +1,917 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useTeamWorkspaceStore } from './teamWorkspaceStore'
+
+// Mock workspaceAuthStore
+const mockWorkspaceAuthStore = vi.hoisted(() => ({
+  currentWorkspace: null as {
+    id: string
+    name: string
+    type: 'personal' | 'team'
+    role: 'owner' | 'member'
+  } | null,
+  workspaceToken: null as string | null,
+  isLoading: false,
+  error: null as Error | null,
+  isAuthenticated: false,
+  init: vi.fn(),
+  destroy: vi.fn(),
+  initializeFromSession: vi.fn(),
+  switchWorkspace: vi.fn(),
+  refreshToken: vi.fn(),
+  getWorkspaceAuthHeader: vi.fn(),
+  clearWorkspaceContext: vi.fn()
+}))
+
+vi.mock('@/stores/workspaceAuthStore', () => ({
+  useWorkspaceAuthStore: () => mockWorkspaceAuthStore
+}))
+
+// Mock workspaceApi
+const mockWorkspaceApi = vi.hoisted(() => ({
+  list: vi.fn(),
+  create: vi.fn(),
+  update: vi.fn(),
+  delete: vi.fn(),
+  leave: vi.fn(),
+  listMembers: vi.fn(),
+  removeMember: vi.fn(),
+  listInvites: vi.fn(),
+  createInvite: vi.fn(),
+  revokeInvite: vi.fn(),
+  acceptInvite: vi.fn(),
+  accessBillingPortal: vi.fn()
+}))
+
+const mockWorkspaceApiError = vi.hoisted(
+  () =>
+    class WorkspaceApiError extends Error {
+      constructor(
+        message: string,
+        public readonly status?: number,
+        public readonly code?: string
+      ) {
+        super(message)
+        this.name = 'WorkspaceApiError'
+      }
+    }
+)
+
+vi.mock('../api/workspaceApi', () => ({
+  workspaceApi: mockWorkspaceApi,
+  WorkspaceApiError: mockWorkspaceApiError
+}))
+
+// Mock localStorage
+const mockLocalStorage = vi.hoisted(() => {
+  const store: Record<string, string> = {}
+  return {
+    getItem: vi.fn((_key: string): string | null => store[_key] ?? null),
+    setItem: vi.fn((key: string, value: string) => {
+      store[key] = value
+    }),
+    removeItem: vi.fn((key: string) => {
+      delete store[key]
+    }),
+    clear: vi.fn(() => {
+      Object.keys(store).forEach((key) => delete store[key])
+    })
+  }
+})
+
+// Mock window.location.reload
+const mockReload = vi.fn()
+Object.defineProperty(window, 'location', {
+  value: { reload: mockReload, origin: 'http://localhost' },
+  writable: true
+})
+
+// Test data
+const mockPersonalWorkspace = {
+  id: 'ws-personal-123',
+  name: 'Personal',
+  type: 'personal' as const,
+  role: 'owner' as const
+}
+
+const mockTeamWorkspace = {
+  id: 'ws-team-456',
+  name: 'Team Alpha',
+  type: 'team' as const,
+  role: 'owner' as const
+}
+
+const mockMemberWorkspace = {
+  id: 'ws-team-789',
+  name: 'Team Beta',
+  type: 'team' as const,
+  role: 'member' as const
+}
+
+describe('useTeamWorkspaceStore', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    vi.clearAllMocks()
+    vi.stubGlobal('localStorage', mockLocalStorage)
+    sessionStorage.clear()
+
+    // Reset workspaceAuthStore mock state
+    mockWorkspaceAuthStore.currentWorkspace = null
+    mockWorkspaceAuthStore.workspaceToken = null
+    mockWorkspaceAuthStore.isLoading = false
+    mockWorkspaceAuthStore.error = null
+    mockWorkspaceAuthStore.isAuthenticated = false
+    mockWorkspaceAuthStore.initializeFromSession.mockReturnValue(false)
+    mockWorkspaceAuthStore.switchWorkspace.mockResolvedValue(undefined)
+
+    // Default mock responses
+    mockWorkspaceApi.list.mockResolvedValue({
+      workspaces: [mockPersonalWorkspace, mockTeamWorkspace]
+    })
+    mockLocalStorage.getItem.mockReturnValue(null)
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  describe('initial state', () => {
+    it('has correct initial state values', () => {
+      const store = useTeamWorkspaceStore()
+
+      expect(store.initState).toBe('uninitialized')
+      expect(store.workspaces).toEqual([])
+      expect(store.activeWorkspaceId).toBeNull()
+      expect(store.error).toBeNull()
+      expect(store.isCreating).toBe(false)
+      expect(store.isDeleting).toBe(false)
+      expect(store.isSwitching).toBe(false)
+      expect(store.isFetchingWorkspaces).toBe(false)
+    })
+
+    it('computed properties return correct defaults', () => {
+      const store = useTeamWorkspaceStore()
+
+      expect(store.activeWorkspace).toBeNull()
+      expect(store.personalWorkspace).toBeNull()
+      expect(store.isInPersonalWorkspace).toBe(false)
+      expect(store.sharedWorkspaces).toEqual([])
+      expect(store.ownedWorkspacesCount).toBe(0)
+      expect(store.canCreateWorkspace).toBe(true)
+      expect(store.members).toEqual([])
+      expect(store.pendingInvites).toEqual([])
+    })
+  })
+
+  describe('initialize', () => {
+    it('fetches workspaces and sets active workspace to personal by default', async () => {
+      const store = useTeamWorkspaceStore()
+
+      await store.initialize()
+
+      expect(mockWorkspaceApi.list).toHaveBeenCalledTimes(1)
+      expect(store.initState).toBe('ready')
+      expect(store.workspaces).toHaveLength(2)
+      expect(store.activeWorkspaceId).toBe(mockPersonalWorkspace.id)
+      expect(mockWorkspaceAuthStore.switchWorkspace).toHaveBeenCalledWith(
+        mockPersonalWorkspace.id
+      )
+    })
+
+    it('restores workspace from session if valid', async () => {
+      mockWorkspaceAuthStore.initializeFromSession.mockReturnValue(true)
+      mockWorkspaceAuthStore.currentWorkspace = mockTeamWorkspace
+
+      const store = useTeamWorkspaceStore()
+      await store.initialize()
+
+      expect(store.activeWorkspaceId).toBe(mockTeamWorkspace.id)
+      expect(mockWorkspaceAuthStore.switchWorkspace).not.toHaveBeenCalled()
+    })
+
+    it('falls back to localStorage if no session', async () => {
+      mockLocalStorage.getItem.mockReturnValue(mockTeamWorkspace.id)
+
+      const store = useTeamWorkspaceStore()
+      await store.initialize()
+
+      expect(store.activeWorkspaceId).toBe(mockTeamWorkspace.id)
+    })
+
+    it('falls back to personal if stored workspace not in list', async () => {
+      mockLocalStorage.getItem.mockReturnValue('non-existent-workspace')
+
+      const store = useTeamWorkspaceStore()
+      await store.initialize()
+
+      expect(store.activeWorkspaceId).toBe(mockPersonalWorkspace.id)
+    })
+
+    it('sets error state when workspaces fetch fails after retries', async () => {
+      vi.useFakeTimers()
+      mockWorkspaceApi.list.mockRejectedValue(new Error('Network error'))
+
+      const store = useTeamWorkspaceStore()
+
+      // 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 () => {
+      const store = useTeamWorkspaceStore()
+
+      await store.initialize()
+      await store.initialize()
+
+      expect(mockWorkspaceApi.list).toHaveBeenCalledTimes(1)
+    })
+
+    it('throws when no workspaces available', async () => {
+      mockWorkspaceApi.list.mockResolvedValue({ workspaces: [] })
+
+      const store = useTeamWorkspaceStore()
+
+      await expect(store.initialize()).rejects.toThrow(
+        'No workspaces available'
+      )
+      expect(store.initState).toBe('error')
+    })
+
+    it('continues initialization even if token exchange fails', async () => {
+      mockWorkspaceAuthStore.switchWorkspace.mockRejectedValue(
+        new Error('Token exchange failed')
+      )
+
+      const store = useTeamWorkspaceStore()
+      await store.initialize()
+
+      expect(store.initState).toBe('ready')
+      expect(store.activeWorkspaceId).toBe(mockPersonalWorkspace.id)
+    })
+  })
+
+  describe('switchWorkspace', () => {
+    it('does nothing if switching to current workspace', async () => {
+      const store = useTeamWorkspaceStore()
+      await store.initialize()
+
+      const currentId = store.activeWorkspaceId
+      await store.switchWorkspace(currentId!)
+
+      expect(mockReload).not.toHaveBeenCalled()
+    })
+
+    it('clears context and reloads for valid workspace', async () => {
+      const store = useTeamWorkspaceStore()
+      await store.initialize()
+
+      await store.switchWorkspace(mockTeamWorkspace.id)
+
+      expect(mockWorkspaceAuthStore.clearWorkspaceContext).toHaveBeenCalled()
+      expect(mockReload).toHaveBeenCalled()
+    })
+
+    it('sets isSwitching flag during operation', async () => {
+      const store = useTeamWorkspaceStore()
+      await store.initialize()
+
+      expect(store.isSwitching).toBe(false)
+
+      const switchPromise = store.switchWorkspace(mockTeamWorkspace.id)
+      expect(store.isSwitching).toBe(true)
+
+      await switchPromise
+    })
+
+    it('refreshes workspace list if target not found', async () => {
+      const newWorkspace = {
+        id: 'ws-new-999',
+        name: 'New Workspace',
+        type: 'team' as const,
+        role: 'member' as const
+      }
+
+      mockWorkspaceApi.list
+        .mockResolvedValueOnce({
+          workspaces: [mockPersonalWorkspace, mockTeamWorkspace]
+        })
+        .mockResolvedValueOnce({
+          workspaces: [mockPersonalWorkspace, mockTeamWorkspace, newWorkspace]
+        })
+
+      const store = useTeamWorkspaceStore()
+      await store.initialize()
+
+      await store.switchWorkspace(newWorkspace.id)
+
+      expect(mockWorkspaceApi.list).toHaveBeenCalledTimes(2)
+      expect(mockReload).toHaveBeenCalled()
+    })
+
+    it('throws if workspace not found after refresh', async () => {
+      const store = useTeamWorkspaceStore()
+      await store.initialize()
+
+      await expect(
+        store.switchWorkspace('non-existent-workspace')
+      ).rejects.toThrow('Workspace not found or access denied')
+
+      expect(store.isSwitching).toBe(false)
+    })
+  })
+
+  describe('createWorkspace', () => {
+    it('creates workspace and triggers reload', async () => {
+      const newWorkspace = {
+        id: 'ws-new-created',
+        name: 'Created Workspace',
+        type: 'team' as const,
+        role: 'owner' as const
+      }
+      mockWorkspaceApi.create.mockResolvedValue(newWorkspace)
+
+      const store = useTeamWorkspaceStore()
+      await store.initialize()
+
+      const result = await store.createWorkspace('Created Workspace')
+
+      expect(mockWorkspaceApi.create).toHaveBeenCalledWith({
+        name: 'Created Workspace'
+      })
+      expect(result.id).toBe(newWorkspace.id)
+      expect(store.workspaces).toContainEqual(
+        expect.objectContaining({ id: newWorkspace.id })
+      )
+      expect(mockWorkspaceAuthStore.clearWorkspaceContext).toHaveBeenCalled()
+      expect(mockReload).toHaveBeenCalled()
+    })
+
+    it('sets isCreating flag during operation', async () => {
+      let resolveCreate: (value: unknown) => void
+      const createPromise = new Promise((resolve) => {
+        resolveCreate = resolve
+      })
+      mockWorkspaceApi.create.mockReturnValue(createPromise)
+
+      const store = useTeamWorkspaceStore()
+      await store.initialize()
+
+      expect(store.isCreating).toBe(false)
+
+      const resultPromise = store.createWorkspace('New Workspace')
+      expect(store.isCreating).toBe(true)
+
+      resolveCreate!({
+        id: 'ws-new',
+        name: 'New Workspace',
+        type: 'team',
+        role: 'owner'
+      })
+      await resultPromise
+    })
+
+    it('resets isCreating on error', async () => {
+      mockWorkspaceApi.create.mockRejectedValue(new Error('Creation failed'))
+
+      const store = useTeamWorkspaceStore()
+      await store.initialize()
+
+      await expect(store.createWorkspace('New Workspace')).rejects.toThrow(
+        'Creation failed'
+      )
+      expect(store.isCreating).toBe(false)
+    })
+  })
+
+  describe('deleteWorkspace', () => {
+    it('deletes non-active workspace without reload', async () => {
+      const store = useTeamWorkspaceStore()
+      await store.initialize()
+
+      expect(store.activeWorkspaceId).toBe(mockPersonalWorkspace.id)
+
+      await store.deleteWorkspace(mockTeamWorkspace.id)
+
+      expect(mockWorkspaceApi.delete).toHaveBeenCalledWith(mockTeamWorkspace.id)
+      expect(store.workspaces).not.toContainEqual(
+        expect.objectContaining({ id: mockTeamWorkspace.id })
+      )
+      expect(mockReload).not.toHaveBeenCalled()
+    })
+
+    it('deletes active workspace and reloads to personal', async () => {
+      mockWorkspaceAuthStore.initializeFromSession.mockReturnValue(true)
+      mockWorkspaceAuthStore.currentWorkspace = mockTeamWorkspace
+
+      const store = useTeamWorkspaceStore()
+      await store.initialize()
+
+      expect(store.activeWorkspaceId).toBe(mockTeamWorkspace.id)
+
+      await store.deleteWorkspace()
+
+      expect(mockWorkspaceApi.delete).toHaveBeenCalledWith(mockTeamWorkspace.id)
+      expect(mockWorkspaceAuthStore.clearWorkspaceContext).toHaveBeenCalled()
+      expect(mockReload).toHaveBeenCalled()
+    })
+
+    it('throws when trying to delete personal workspace', async () => {
+      const store = useTeamWorkspaceStore()
+      await store.initialize()
+
+      await expect(
+        store.deleteWorkspace(mockPersonalWorkspace.id)
+      ).rejects.toThrow('Cannot delete personal workspace')
+    })
+
+    it('throws when workspace not found', async () => {
+      const store = useTeamWorkspaceStore()
+      await store.initialize()
+
+      await expect(store.deleteWorkspace('non-existent')).rejects.toThrow(
+        'Workspace not found'
+      )
+    })
+  })
+
+  describe('renameWorkspace', () => {
+    it('updates workspace name locally', async () => {
+      mockWorkspaceApi.update.mockResolvedValue({
+        ...mockTeamWorkspace,
+        name: 'Renamed Workspace'
+      })
+
+      const store = useTeamWorkspaceStore()
+      await store.initialize()
+
+      await store.renameWorkspace(mockTeamWorkspace.id, 'Renamed Workspace')
+
+      expect(mockWorkspaceApi.update).toHaveBeenCalledWith(
+        mockTeamWorkspace.id,
+        { name: 'Renamed Workspace' }
+      )
+
+      const updated = store.workspaces.find(
+        (w) => w.id === mockTeamWorkspace.id
+      )
+      expect(updated?.name).toBe('Renamed Workspace')
+    })
+  })
+
+  describe('leaveWorkspace', () => {
+    it('leaves workspace and reloads to personal', async () => {
+      mockWorkspaceAuthStore.initializeFromSession.mockReturnValue(true)
+      mockWorkspaceAuthStore.currentWorkspace = mockMemberWorkspace
+      mockWorkspaceApi.list.mockResolvedValue({
+        workspaces: [mockPersonalWorkspace, mockMemberWorkspace]
+      })
+
+      const store = useTeamWorkspaceStore()
+      await store.initialize()
+
+      await store.leaveWorkspace()
+
+      expect(mockWorkspaceApi.leave).toHaveBeenCalled()
+      expect(mockWorkspaceAuthStore.clearWorkspaceContext).toHaveBeenCalled()
+      expect(mockReload).toHaveBeenCalled()
+    })
+
+    it('throws when trying to leave personal workspace', async () => {
+      const store = useTeamWorkspaceStore()
+      await store.initialize()
+
+      await expect(store.leaveWorkspace()).rejects.toThrow(
+        'Cannot leave personal workspace'
+      )
+    })
+  })
+
+  describe('computed properties', () => {
+    it('activeWorkspace returns correct workspace', async () => {
+      mockWorkspaceAuthStore.initializeFromSession.mockReturnValue(true)
+      mockWorkspaceAuthStore.currentWorkspace = mockTeamWorkspace
+
+      const store = useTeamWorkspaceStore()
+      await store.initialize()
+
+      expect(store.activeWorkspace?.id).toBe(mockTeamWorkspace.id)
+      expect(store.activeWorkspace?.name).toBe(mockTeamWorkspace.name)
+    })
+
+    it('personalWorkspace returns personal workspace', async () => {
+      const store = useTeamWorkspaceStore()
+      await store.initialize()
+
+      expect(store.personalWorkspace?.id).toBe(mockPersonalWorkspace.id)
+      expect(store.personalWorkspace?.type).toBe('personal')
+    })
+
+    it('isInPersonalWorkspace returns true when in personal', async () => {
+      const store = useTeamWorkspaceStore()
+      await store.initialize()
+
+      expect(store.isInPersonalWorkspace).toBe(true)
+    })
+
+    it('isInPersonalWorkspace returns false when in team', async () => {
+      mockWorkspaceAuthStore.initializeFromSession.mockReturnValue(true)
+      mockWorkspaceAuthStore.currentWorkspace = mockTeamWorkspace
+
+      const store = useTeamWorkspaceStore()
+      await store.initialize()
+
+      expect(store.isInPersonalWorkspace).toBe(false)
+    })
+
+    it('sharedWorkspaces excludes personal workspace', async () => {
+      const store = useTeamWorkspaceStore()
+      await store.initialize()
+
+      expect(store.sharedWorkspaces).toHaveLength(1)
+      expect(store.sharedWorkspaces[0].id).toBe(mockTeamWorkspace.id)
+    })
+
+    it('ownedWorkspacesCount counts owned workspaces', async () => {
+      mockWorkspaceApi.list.mockResolvedValue({
+        workspaces: [
+          mockPersonalWorkspace,
+          mockTeamWorkspace,
+          mockMemberWorkspace
+        ]
+      })
+
+      const store = useTeamWorkspaceStore()
+      await store.initialize()
+
+      expect(store.ownedWorkspacesCount).toBe(2)
+    })
+
+    it('canCreateWorkspace respects limit', async () => {
+      const manyWorkspaces = Array.from({ length: 10 }, (_, i) => ({
+        id: `ws-owned-${i}`,
+        name: `Owned ${i}`,
+        type: 'team' as const,
+        role: 'owner' as const
+      }))
+
+      mockWorkspaceApi.list.mockResolvedValue({
+        workspaces: [mockPersonalWorkspace, ...manyWorkspaces]
+      })
+
+      const store = useTeamWorkspaceStore()
+      await store.initialize()
+
+      expect(store.ownedWorkspacesCount).toBe(11)
+      expect(store.canCreateWorkspace).toBe(false)
+    })
+  })
+
+  describe('member actions', () => {
+    it('fetchMembers updates active workspace members', async () => {
+      const mockMembers = [
+        {
+          id: 'user-1',
+          name: 'User One',
+          email: 'one@test.com',
+          joined_at: '2024-01-01T00:00:00Z'
+        },
+        {
+          id: 'user-2',
+          name: 'User Two',
+          email: 'two@test.com',
+          joined_at: '2024-01-02T00:00:00Z'
+        }
+      ]
+      mockWorkspaceApi.listMembers.mockResolvedValue({
+        members: mockMembers,
+        pagination: { offset: 0, limit: 50, total: 2 }
+      })
+      mockWorkspaceAuthStore.initializeFromSession.mockReturnValue(true)
+      mockWorkspaceAuthStore.currentWorkspace = mockTeamWorkspace
+
+      const store = useTeamWorkspaceStore()
+      await store.initialize()
+
+      const result = await store.fetchMembers()
+
+      expect(result).toHaveLength(2)
+      expect(store.members).toHaveLength(2)
+      expect(store.members[0].name).toBe('User One')
+    })
+
+    it('fetchMembers returns empty for personal workspace', async () => {
+      const store = useTeamWorkspaceStore()
+      await store.initialize()
+
+      const result = await store.fetchMembers()
+
+      expect(result).toEqual([])
+      expect(mockWorkspaceApi.listMembers).not.toHaveBeenCalled()
+    })
+
+    it('removeMember removes from local list', async () => {
+      const mockMembers = [
+        {
+          id: 'user-1',
+          name: 'User One',
+          email: 'one@test.com',
+          joined_at: '2024-01-01T00:00:00Z'
+        },
+        {
+          id: 'user-2',
+          name: 'User Two',
+          email: 'two@test.com',
+          joined_at: '2024-01-02T00:00:00Z'
+        }
+      ]
+      mockWorkspaceApi.listMembers.mockResolvedValue({
+        members: mockMembers,
+        pagination: { offset: 0, limit: 50, total: 2 }
+      })
+      mockWorkspaceAuthStore.initializeFromSession.mockReturnValue(true)
+      mockWorkspaceAuthStore.currentWorkspace = mockTeamWorkspace
+
+      const store = useTeamWorkspaceStore()
+      await store.initialize()
+      await store.fetchMembers()
+
+      expect(store.members).toHaveLength(2)
+
+      await store.removeMember('user-1')
+
+      expect(mockWorkspaceApi.removeMember).toHaveBeenCalledWith('user-1')
+      expect(store.members).toHaveLength(1)
+      expect(store.members[0].id).toBe('user-2')
+    })
+  })
+
+  describe('invite actions', () => {
+    it('fetchPendingInvites updates active workspace invites', async () => {
+      const mockInvites = [
+        {
+          id: 'inv-1',
+          email: 'invite@test.com',
+          token: 'token-abc',
+          invited_at: '2024-01-01T00:00:00Z',
+          expires_at: '2024-01-08T00:00:00Z'
+        }
+      ]
+      mockWorkspaceApi.listInvites.mockResolvedValue({ invites: mockInvites })
+      mockWorkspaceAuthStore.initializeFromSession.mockReturnValue(true)
+      mockWorkspaceAuthStore.currentWorkspace = mockTeamWorkspace
+
+      const store = useTeamWorkspaceStore()
+      await store.initialize()
+
+      const result = await store.fetchPendingInvites()
+
+      expect(result).toHaveLength(1)
+      expect(store.pendingInvites).toHaveLength(1)
+      expect(store.pendingInvites[0].email).toBe('invite@test.com')
+    })
+
+    it('createInvite adds to local list', async () => {
+      const newInvite = {
+        id: 'inv-new',
+        email: 'new@test.com',
+        token: 'token-new',
+        invited_at: '2024-01-01T00:00:00Z',
+        expires_at: '2024-01-08T00:00:00Z'
+      }
+      mockWorkspaceApi.createInvite.mockResolvedValue(newInvite)
+      mockWorkspaceAuthStore.initializeFromSession.mockReturnValue(true)
+      mockWorkspaceAuthStore.currentWorkspace = mockTeamWorkspace
+
+      const store = useTeamWorkspaceStore()
+      await store.initialize()
+
+      const result = await store.createInvite('new@test.com')
+
+      expect(mockWorkspaceApi.createInvite).toHaveBeenCalledWith({
+        email: 'new@test.com'
+      })
+      expect(result.email).toBe('new@test.com')
+      expect(store.pendingInvites).toContainEqual(
+        expect.objectContaining({ email: 'new@test.com' })
+      )
+    })
+
+    it('revokeInvite removes from local list', async () => {
+      const mockInvites = [
+        {
+          id: 'inv-1',
+          email: 'one@test.com',
+          token: 'token-1',
+          invited_at: '2024-01-01T00:00:00Z',
+          expires_at: '2024-01-08T00:00:00Z'
+        },
+        {
+          id: 'inv-2',
+          email: 'two@test.com',
+          token: 'token-2',
+          invited_at: '2024-01-01T00:00:00Z',
+          expires_at: '2024-01-08T00:00:00Z'
+        }
+      ]
+      mockWorkspaceApi.listInvites.mockResolvedValue({ invites: mockInvites })
+      mockWorkspaceAuthStore.initializeFromSession.mockReturnValue(true)
+      mockWorkspaceAuthStore.currentWorkspace = mockTeamWorkspace
+
+      const store = useTeamWorkspaceStore()
+      await store.initialize()
+      await store.fetchPendingInvites()
+
+      await store.revokeInvite('inv-1')
+
+      expect(mockWorkspaceApi.revokeInvite).toHaveBeenCalledWith('inv-1')
+      expect(store.pendingInvites).toHaveLength(1)
+      expect(store.pendingInvites[0].id).toBe('inv-2')
+    })
+
+    it('acceptInvite refreshes workspace list', async () => {
+      mockWorkspaceApi.acceptInvite.mockResolvedValue({
+        workspace_id: 'ws-joined',
+        workspace_name: 'Joined Workspace'
+      })
+
+      const store = useTeamWorkspaceStore()
+      await store.initialize()
+
+      const result = await store.acceptInvite('invite-token')
+
+      expect(mockWorkspaceApi.acceptInvite).toHaveBeenCalledWith('invite-token')
+      expect(result.workspaceId).toBe('ws-joined')
+      expect(result.workspaceName).toBe('Joined Workspace')
+      expect(mockWorkspaceApi.list).toHaveBeenCalledTimes(2)
+    })
+  })
+
+  describe('invite link helpers', () => {
+    it('getInviteLink returns link for existing invite', async () => {
+      const mockInvites = [
+        {
+          id: 'inv-1',
+          email: 'test@test.com',
+          token: 'secret-token',
+          invited_at: '2024-01-01T00:00:00Z',
+          expires_at: '2024-01-08T00:00:00Z'
+        }
+      ]
+      mockWorkspaceApi.listInvites.mockResolvedValue({ invites: mockInvites })
+      mockWorkspaceAuthStore.initializeFromSession.mockReturnValue(true)
+      mockWorkspaceAuthStore.currentWorkspace = mockTeamWorkspace
+
+      const store = useTeamWorkspaceStore()
+      await store.initialize()
+      await store.fetchPendingInvites()
+
+      const link = store.getInviteLink('inv-1')
+
+      expect(link).toContain('?invite=secret-token')
+    })
+
+    it('getInviteLink returns null for non-existent invite', async () => {
+      const store = useTeamWorkspaceStore()
+      await store.initialize()
+
+      const link = store.getInviteLink('non-existent')
+
+      expect(link).toBeNull()
+    })
+
+    it('createInviteLink creates invite and returns link', async () => {
+      const newInvite = {
+        id: 'inv-new',
+        email: 'new@test.com',
+        token: 'new-token',
+        invited_at: '2024-01-01T00:00:00Z',
+        expires_at: '2024-01-08T00:00:00Z'
+      }
+      mockWorkspaceApi.createInvite.mockResolvedValue(newInvite)
+      mockWorkspaceAuthStore.initializeFromSession.mockReturnValue(true)
+      mockWorkspaceAuthStore.currentWorkspace = mockTeamWorkspace
+
+      const store = useTeamWorkspaceStore()
+      await store.initialize()
+
+      const link = await store.createInviteLink('new@test.com')
+
+      expect(link).toContain('?invite=new-token')
+    })
+  })
+
+  describe('cleanup', () => {
+    it('destroy calls workspaceAuthStore.destroy', async () => {
+      const store = useTeamWorkspaceStore()
+      await store.initialize()
+
+      store.destroy()
+
+      expect(mockWorkspaceAuthStore.destroy).toHaveBeenCalled()
+    })
+  })
+
+  describe('totalMemberSlots and isInviteLimitReached', () => {
+    it('calculates total slots from members and invites', async () => {
+      const mockMembers = [
+        {
+          id: 'user-1',
+          name: 'User One',
+          email: 'one@test.com',
+          joined_at: '2024-01-01T00:00:00Z'
+        }
+      ]
+      const mockInvites = [
+        {
+          id: 'inv-1',
+          email: 'invite@test.com',
+          token: 'token-1',
+          invited_at: '2024-01-01T00:00:00Z',
+          expires_at: '2024-01-08T00:00:00Z'
+        },
+        {
+          id: 'inv-2',
+          email: 'invite2@test.com',
+          token: 'token-2',
+          invited_at: '2024-01-01T00:00:00Z',
+          expires_at: '2024-01-08T00:00:00Z'
+        }
+      ]
+      mockWorkspaceApi.listMembers.mockResolvedValue({
+        members: mockMembers,
+        pagination: { offset: 0, limit: 50, total: 1 }
+      })
+      mockWorkspaceApi.listInvites.mockResolvedValue({ invites: mockInvites })
+      mockWorkspaceAuthStore.initializeFromSession.mockReturnValue(true)
+      mockWorkspaceAuthStore.currentWorkspace = mockTeamWorkspace
+
+      const store = useTeamWorkspaceStore()
+      await store.initialize()
+      await store.fetchMembers()
+      await store.fetchPendingInvites()
+
+      expect(store.totalMemberSlots).toBe(3)
+      expect(store.isInviteLimitReached).toBe(false)
+    })
+
+    it('isInviteLimitReached returns true at 50 slots', async () => {
+      const mockMembers = Array.from({ length: 48 }, (_, i) => ({
+        id: `user-${i}`,
+        name: `User ${i}`,
+        email: `user${i}@test.com`,
+        joined_at: '2024-01-01T00:00:00Z'
+      }))
+      const mockInvites = [
+        {
+          id: 'inv-1',
+          email: 'invite1@test.com',
+          token: 'token-1',
+          invited_at: '2024-01-01T00:00:00Z',
+          expires_at: '2024-01-08T00:00:00Z'
+        },
+        {
+          id: 'inv-2',
+          email: 'invite2@test.com',
+          token: 'token-2',
+          invited_at: '2024-01-01T00:00:00Z',
+          expires_at: '2024-01-08T00:00:00Z'
+        }
+      ]
+      mockWorkspaceApi.listMembers.mockResolvedValue({
+        members: mockMembers,
+        pagination: { offset: 0, limit: 50, total: 48 }
+      })
+      mockWorkspaceApi.listInvites.mockResolvedValue({ invites: mockInvites })
+      mockWorkspaceAuthStore.initializeFromSession.mockReturnValue(true)
+      mockWorkspaceAuthStore.currentWorkspace = mockTeamWorkspace
+
+      const store = useTeamWorkspaceStore()
+      await store.initialize()
+      await store.fetchMembers()
+      await store.fetchPendingInvites()
+
+      expect(store.totalMemberSlots).toBe(50)
+      expect(store.isInviteLimitReached).toBe(true)
+    })
+  })
+})
diff --git a/src/platform/workspace/stores/teamWorkspaceStore.ts b/src/platform/workspace/stores/teamWorkspaceStore.ts
new file mode 100644
index 000000000..567690fe6
--- /dev/null
+++ b/src/platform/workspace/stores/teamWorkspaceStore.ts
@@ -0,0 +1,676 @@
+import { defineStore } from 'pinia'
+import { computed, ref, shallowRef } from 'vue'
+
+import { WORKSPACE_STORAGE_KEYS } from '@/platform/auth/workspace/workspaceConstants'
+import { clearPreservedQuery } from '@/platform/navigation/preservedQueryManager'
+import { PRESERVED_QUERY_NAMESPACES } from '@/platform/navigation/preservedQueryNamespaces'
+import { useWorkspaceAuthStore } from '@/stores/workspaceAuthStore'
+
+import type {
+  ListMembersParams,
+  Member,
+  PendingInvite as ApiPendingInvite,
+  WorkspaceWithRole
+} from '../api/workspaceApi'
+import { workspaceApi } from '../api/workspaceApi'
+
+export interface WorkspaceMember {
+  id: string
+  name: string
+  email: string
+  joinDate: Date
+  role: 'owner' | 'member'
+}
+
+export interface PendingInvite {
+  id: string
+  email: string
+  token: string
+  inviteDate: Date
+  expiryDate: Date
+}
+
+type SubscriptionPlan = 'PRO_MONTHLY' | 'PRO_YEARLY' | null
+
+interface WorkspaceState extends WorkspaceWithRole {
+  isSubscribed: boolean
+  subscriptionPlan: SubscriptionPlan
+  members: WorkspaceMember[]
+  pendingInvites: PendingInvite[]
+}
+
+type InitState = 'uninitialized' | 'loading' | 'ready' | 'error'
+
+function mapApiMemberToWorkspaceMember(member: Member): WorkspaceMember {
+  return {
+    id: member.id,
+    name: member.name,
+    email: member.email,
+    joinDate: new Date(member.joined_at),
+    role: member.role
+  }
+}
+
+function mapApiInviteToPendingInvite(invite: ApiPendingInvite): PendingInvite {
+  return {
+    id: invite.id,
+    email: invite.email,
+    token: invite.token,
+    inviteDate: new Date(invite.invited_at),
+    expiryDate: new Date(invite.expires_at)
+  }
+}
+
+function createWorkspaceState(workspace: WorkspaceWithRole): WorkspaceState {
+  return {
+    ...workspace,
+    // Personal workspaces use user-scoped subscription from useSubscription()
+    isSubscribed: workspace.type === 'personal',
+    subscriptionPlan: null,
+    members: [],
+    pendingInvites: []
+  }
+}
+
+function getLastWorkspaceId(): string | null {
+  try {
+    return localStorage.getItem(WORKSPACE_STORAGE_KEYS.LAST_WORKSPACE_ID)
+  } catch {
+    return null
+  }
+}
+
+function setLastWorkspaceId(workspaceId: string): void {
+  try {
+    localStorage.setItem(WORKSPACE_STORAGE_KEYS.LAST_WORKSPACE_ID, workspaceId)
+  } catch {
+    console.warn('Failed to persist last workspace ID to localStorage')
+  }
+}
+
+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')
+  const workspaces = shallowRef<WorkspaceState[]>([])
+  const activeWorkspaceId = ref<string | null>(null)
+  const error = ref<Error | null>(null)
+
+  const isCreating = ref(false)
+  const isDeleting = ref(false)
+  const isSwitching = ref(false)
+  const isFetchingWorkspaces = ref(false)
+
+  const activeWorkspace = computed(
+    () => workspaces.value.find((w) => w.id === activeWorkspaceId.value) ?? null
+  )
+
+  const personalWorkspace = computed(
+    () => workspaces.value.find((w) => w.type === 'personal') ?? null
+  )
+
+  const isInPersonalWorkspace = computed(
+    () => activeWorkspace.value?.type === 'personal'
+  )
+
+  const sharedWorkspaces = computed(() =>
+    workspaces.value.filter((w) => w.type !== 'personal')
+  )
+
+  const ownedWorkspacesCount = computed(
+    () => workspaces.value.filter((w) => w.role === 'owner').length
+  )
+
+  const canCreateWorkspace = computed(
+    () => ownedWorkspacesCount.value < MAX_OWNED_WORKSPACES
+  )
+
+  const members = computed<WorkspaceMember[]>(
+    () => activeWorkspace.value?.members ?? []
+  )
+
+  const pendingInvites = computed<PendingInvite[]>(
+    () => activeWorkspace.value?.pendingInvites ?? []
+  )
+
+  const totalMemberSlots = computed(
+    () => members.value.length + pendingInvites.value.length
+  )
+
+  const isInviteLimitReached = computed(
+    () => totalMemberSlots.value >= MAX_WORKSPACE_MEMBERS
+  )
+
+  const workspaceId = computed(() => activeWorkspace.value?.id ?? null)
+
+  const workspaceName = computed(() => activeWorkspace.value?.name ?? '')
+
+  const isWorkspaceSubscribed = computed(
+    () => activeWorkspace.value?.isSubscribed ?? false
+  )
+
+  const subscriptionPlan = computed(
+    () => activeWorkspace.value?.subscriptionPlan ?? null
+  )
+
+  function updateWorkspace(
+    workspaceId: string,
+    updates: Partial<WorkspaceState>
+  ) {
+    const index = workspaces.value.findIndex((w) => w.id === workspaceId)
+    if (index === -1) return
+
+    const current = workspaces.value[index]
+    const updated = { ...current, ...updates }
+    workspaces.value = [
+      ...workspaces.value.slice(0, index),
+      updated,
+      ...workspaces.value.slice(index + 1)
+    ]
+  }
+
+  function updateActiveWorkspace(updates: Partial<WorkspaceState>) {
+    if (!activeWorkspaceId.value) return
+    updateWorkspace(activeWorkspaceId.value, updates)
+  }
+
+  /**
+   * 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> {
+    if (initState.value !== 'uninitialized') return
+
+    initState.value = 'loading'
+    isFetchingWorkspaces.value = true
+    error.value = null
+
+    const workspaceAuthStore = useWorkspaceAuthStore()
+
+    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 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)
+
+        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))
+      }
+    }
+
+    isFetchingWorkspaces.value = false
+  }
+
+  /**
+   * Re-fetch workspaces from API without changing active workspace.
+   */
+  async function refreshWorkspaces(): Promise<void> {
+    isFetchingWorkspaces.value = true
+    try {
+      const response = await workspaceApi.list()
+      workspaces.value = response.workspaces.map(createWorkspaceState)
+    } finally {
+      isFetchingWorkspaces.value = false
+    }
+  }
+
+  /**
+   * Switch to a different workspace.
+   * Clears workspace context and reloads the page.
+   */
+  async function switchWorkspace(workspaceId: string): Promise<void> {
+    if (workspaceId === activeWorkspaceId.value) return
+
+    const workspaceAuthStore = useWorkspaceAuthStore()
+
+    isSwitching.value = true
+
+    try {
+      // Verify workspace exists in our list (user has access)
+      const workspace = workspaces.value.find((w) => w.id === workspaceId)
+      if (!workspace) {
+        // Workspace not in list - try refetching in case it was added
+        await refreshWorkspaces()
+        const refreshedWorkspace = workspaces.value.find(
+          (w) => w.id === workspaceId
+        )
+        if (!refreshedWorkspace) {
+          throw new Error('Workspace not found or access denied')
+        }
+      }
+
+      // Clear current workspace context and persist new workspace ID
+      workspaceAuthStore.clearWorkspaceContext()
+      setLastWorkspaceId(workspaceId)
+
+      // Reload to reinitialize with new workspace
+      window.location.reload()
+      // Code after this won't run (page reloads)
+    } catch (e) {
+      isSwitching.value = false
+      throw e
+    }
+  }
+
+  /**
+   * Create a new workspace and switch to it.
+   */
+  async function createWorkspace(name: string): Promise<WorkspaceState> {
+    const workspaceAuthStore = useWorkspaceAuthStore()
+
+    isCreating.value = true
+
+    try {
+      const newWorkspace = await workspaceApi.create({ name })
+      const workspaceState = createWorkspaceState(newWorkspace)
+
+      // Add to local list
+      workspaces.value = [...workspaces.value, workspaceState]
+
+      // Clear context and switch to new workspace
+      workspaceAuthStore.clearWorkspaceContext()
+      // Clear any preserved invite query to prevent stale invites from being
+      // processed after the reload (prevents owner adding themselves as member)
+      clearPreservedQuery(PRESERVED_QUERY_NAMESPACES.INVITE)
+      setLastWorkspaceId(newWorkspace.id)
+      window.location.reload()
+
+      // Code after this won't run (page reloads)
+      return workspaceState
+    } catch (e) {
+      isCreating.value = false
+      throw e
+    }
+  }
+
+  /**
+   * Delete a workspace.
+   * If deleting active workspace, switches to personal.
+   */
+  async function deleteWorkspace(workspaceId?: string): Promise<void> {
+    const targetId = workspaceId ?? activeWorkspaceId.value
+    if (!targetId) throw new Error('No workspace to delete')
+
+    const workspace = workspaces.value.find((w) => w.id === targetId)
+    if (!workspace) throw new Error('Workspace not found')
+    if (workspace.type === 'personal') {
+      throw new Error('Cannot delete personal workspace')
+    }
+
+    const workspaceAuthStore = useWorkspaceAuthStore()
+
+    isDeleting.value = true
+
+    try {
+      await workspaceApi.delete(targetId)
+
+      if (targetId === activeWorkspaceId.value) {
+        // Deleted active workspace - go to personal
+        const personal = personalWorkspace.value
+        workspaceAuthStore.clearWorkspaceContext()
+        if (personal) {
+          setLastWorkspaceId(personal.id)
+        }
+        window.location.reload()
+        // Code after this won't run (page reloads)
+      } else {
+        // Deleted non-active workspace - just update local list
+        workspaces.value = workspaces.value.filter((w) => w.id !== targetId)
+        isDeleting.value = false
+      }
+    } catch (e) {
+      isDeleting.value = false
+      throw e
+    }
+  }
+
+  /**
+   * Rename a workspace. No reload needed.
+   */
+  async function renameWorkspace(
+    workspaceId: string,
+    newName: string
+  ): Promise<void> {
+    const updated = await workspaceApi.update(workspaceId, { name: newName })
+    updateWorkspace(workspaceId, { name: updated.name })
+  }
+
+  /**
+   * Update workspace name (convenience for current workspace).
+   */
+  async function updateWorkspaceName(name: string): Promise<void> {
+    if (!activeWorkspaceId.value) {
+      throw new Error('No active workspace')
+    }
+    await renameWorkspace(activeWorkspaceId.value, name)
+  }
+
+  /**
+   * Leave the current workspace.
+   * Switches to personal workspace after leaving.
+   */
+  async function leaveWorkspace(): Promise<void> {
+    const current = activeWorkspace.value
+    if (!current || current.type === 'personal') {
+      throw new Error('Cannot leave personal workspace')
+    }
+
+    const workspaceAuthStore = useWorkspaceAuthStore()
+
+    await workspaceApi.leave()
+
+    // Go to personal workspace
+    const personal = personalWorkspace.value
+    workspaceAuthStore.clearWorkspaceContext()
+    if (personal) {
+      setLastWorkspaceId(personal.id)
+    }
+    window.location.reload()
+    // Code after this won't run (page reloads)
+  }
+
+  /**
+   * Fetch members for the current workspace.
+   */
+  async function fetchMembers(
+    params?: ListMembersParams
+  ): Promise<WorkspaceMember[]> {
+    if (!activeWorkspaceId.value) return []
+    if (activeWorkspace.value?.type === 'personal') return []
+
+    const response = await workspaceApi.listMembers(params)
+    const members = response.members.map(mapApiMemberToWorkspaceMember)
+    updateActiveWorkspace({ members })
+    return members
+  }
+
+  /**
+   * Remove a member from the current workspace.
+   */
+  async function removeMember(userId: string): Promise<void> {
+    await workspaceApi.removeMember(userId)
+    const current = activeWorkspace.value
+    if (current) {
+      updateActiveWorkspace({
+        members: current.members.filter((m) => m.id !== userId)
+      })
+    }
+  }
+
+  /**
+   * Fetch pending invites for the current workspace.
+   */
+  async function fetchPendingInvites(): Promise<PendingInvite[]> {
+    if (!activeWorkspaceId.value) return []
+    if (activeWorkspace.value?.type === 'personal') return []
+
+    const response = await workspaceApi.listInvites()
+    const invites = response.invites.map(mapApiInviteToPendingInvite)
+    updateActiveWorkspace({ pendingInvites: invites })
+    return invites
+  }
+
+  /**
+   * Create an invite for the current workspace.
+   */
+  async function createInvite(email: string): Promise<PendingInvite> {
+    const response = await workspaceApi.createInvite({ email })
+    const invite = mapApiInviteToPendingInvite(response)
+
+    const current = activeWorkspace.value
+    if (current) {
+      updateActiveWorkspace({
+        pendingInvites: [...current.pendingInvites, invite]
+      })
+    }
+
+    return invite
+  }
+
+  /**
+   * Revoke a pending invite.
+   */
+  async function revokeInvite(inviteId: string): Promise<void> {
+    await workspaceApi.revokeInvite(inviteId)
+    const current = activeWorkspace.value
+    if (current) {
+      updateActiveWorkspace({
+        pendingInvites: current.pendingInvites.filter((i) => i.id !== inviteId)
+      })
+    }
+  }
+
+  /**
+   * Accept a workspace invite.
+   * Returns workspace info so UI can offer "View Workspace" button.
+   */
+  async function acceptInvite(
+    token: string
+  ): Promise<{ workspaceId: string; workspaceName: string }> {
+    const response = await workspaceApi.acceptInvite(token)
+
+    // Refresh workspace list to include newly joined workspace
+    await refreshWorkspaces()
+
+    return {
+      workspaceId: response.workspace_id,
+      workspaceName: response.workspace_name
+    }
+  }
+
+  // ════════════════════════════════════════════════════════════
+  // INVITE LINK HELPERS
+  // ════════════════════════════════════════════════════════════
+
+  function buildInviteLink(token: string): string {
+    const baseUrl = window.location.origin
+    return `${baseUrl}?invite=${encodeURIComponent(token)}`
+  }
+
+  /**
+   * Get the invite link for a pending invite.
+   */
+  function getInviteLink(inviteId: string): string | null {
+    const invite = activeWorkspace.value?.pendingInvites.find(
+      (i) => i.id === inviteId
+    )
+    return invite ? buildInviteLink(invite.token) : null
+  }
+
+  /**
+   * Create an invite link for a given email.
+   */
+  async function createInviteLink(email: string): Promise<string> {
+    const invite = await createInvite(email)
+    return buildInviteLink(invite.token)
+  }
+
+  /**
+   * Copy an invite link to clipboard.
+   */
+  async function copyInviteLink(inviteId: string): Promise<string> {
+    const invite = activeWorkspace.value?.pendingInvites.find(
+      (i) => i.id === inviteId
+    )
+    if (!invite) {
+      throw new Error('Invite not found')
+    }
+    const inviteLink = buildInviteLink(invite.token)
+    await navigator.clipboard.writeText(inviteLink)
+    return inviteLink
+  }
+
+  //TODO: when billing lands update this
+  function subscribeWorkspace(plan: SubscriptionPlan = 'PRO_MONTHLY') {
+    console.warn(plan, 'Billing endpoint has not been added yet.')
+  }
+
+  /**
+   * Clean up store resources.
+   * Delegates to workspaceAuthStore for token cleanup.
+   */
+  function destroy(): void {
+    const workspaceAuthStore = useWorkspaceAuthStore()
+    workspaceAuthStore.destroy()
+  }
+
+  return {
+    // State
+    initState,
+    workspaces,
+    activeWorkspaceId,
+    error,
+    isCreating,
+    isDeleting,
+    isSwitching,
+    isFetchingWorkspaces,
+
+    // Computed
+    activeWorkspace,
+    personalWorkspace,
+    isInPersonalWorkspace,
+    sharedWorkspaces,
+    ownedWorkspacesCount,
+    canCreateWorkspace,
+    members,
+    pendingInvites,
+    totalMemberSlots,
+    isInviteLimitReached,
+    workspaceId,
+    workspaceName,
+    isWorkspaceSubscribed,
+    subscriptionPlan,
+
+    // Initialization & Cleanup
+    initialize,
+    destroy,
+    refreshWorkspaces,
+
+    // Workspace Actions
+    switchWorkspace,
+    createWorkspace,
+    deleteWorkspace,
+    renameWorkspace,
+    updateWorkspaceName,
+    leaveWorkspace,
+
+    // Member Actions
+    fetchMembers,
+    removeMember,
+
+    // Invite Actions
+    fetchPendingInvites,
+    createInvite,
+    revokeInvite,
+    acceptInvite,
+    getInviteLink,
+    createInviteLink,
+    copyInviteLink,
+
+    // Subscription
+    subscribeWorkspace
+  }
+})
diff --git a/src/renderer/extensions/linearMode/LinearPreview.vue b/src/renderer/extensions/linearMode/LinearPreview.vue
index 4dacf93a7..281697138 100644
--- a/src/renderer/extensions/linearMode/LinearPreview.vue
+++ b/src/renderer/extensions/linearMode/LinearPreview.vue
@@ -45,7 +45,7 @@ const timeOptions = {
   second: 'numeric'
 } as const
 
-function formatTime(time: string) {
+function formatTime(time?: string) {
   if (!time) return ''
   const date = new Date(time)
   return `${d(date, dateOptions)} | ${d(date, timeOptions)}`
@@ -159,7 +159,7 @@ async function rerun(e: Event) {
   <VideoPreview
     v-else-if="getMediaType(selectedOutput) === 'video'"
     :src="selectedOutput!.url"
-    class="object-contain flex-1 md:contain-size"
+    class="object-contain flex-1 md:contain-size md:p-3"
   />
   <audio
     v-else-if="getMediaType(selectedOutput) === 'audio'"
diff --git a/src/renderer/extensions/linearMode/OutputHistory.vue b/src/renderer/extensions/linearMode/OutputHistory.vue
index c5948ecfa..4ef2bfa84 100644
--- a/src/renderer/extensions/linearMode/OutputHistory.vue
+++ b/src/renderer/extensions/linearMode/OutputHistory.vue
@@ -1,12 +1,20 @@
 <script setup lang="ts">
-import { useEventListener, useInfiniteScroll, useScroll } from '@vueuse/core'
-import { computed, ref, toRaw, useTemplateRef, watch } from 'vue'
+import {
+  useAsyncState,
+  useEventListener,
+  useInfiniteScroll,
+  useScroll
+} from '@vueuse/core'
+import { computed, ref, toRaw, toValue, useTemplateRef, watch } from 'vue'
+import type { MaybeRef } from 'vue'
 
 import ModeToggle from '@/components/sidebar/ModeToggle.vue'
 import SidebarIcon from '@/components/sidebar/SidebarIcon.vue'
 import SidebarTemplatesButton from '@/components/sidebar/SidebarTemplatesButton.vue'
 import WorkflowsSidebarTab from '@/components/sidebar/tabs/WorkflowsSidebarTab.vue'
 import Button from '@/components/ui/button/Button.vue'
+import { useProgressBarBackground } from '@/composables/useProgressBarBackground'
+import { useQueueProgress } from '@/composables/queue/useQueueProgress'
 import { CanvasPointer } from '@/lib/litegraph/src/CanvasPointer'
 import { useMediaAssets } from '@/platform/assets/composables/media/useMediaAssets'
 import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
@@ -16,13 +24,21 @@ import {
   getMediaType,
   mediaTypes
 } from '@/renderer/extensions/linearMode/mediaTypes'
-import { useQueueStore } from '@/stores/queueStore'
-import type { ResultItemImpl } from '@/stores/queueStore'
+import type { NodeExecutionOutput, ResultItem } from '@/schemas/apiSchema'
+import { getJobDetail } from '@/services/jobOutputCache'
+import { useQueueStore, ResultItemImpl } from '@/stores/queueStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { cn } from '@/utils/tailwindUtil'
 
 const displayWorkflows = ref(false)
 const outputs = useMediaAssets('output')
+const {
+  progressBarContainerClass,
+  progressBarPrimaryClass,
+  progressBarSecondaryClass,
+  progressPercentStyle
+} = useProgressBarBackground()
+const { totalPercent, currentNodePercent } = useQueueProgress()
 const queueStore = useQueueStore()
 const settingStore = useSettingStore()
 
@@ -46,14 +62,14 @@ defineExpose({ onWheel })
 
 const selectedIndex = ref<[number, number]>([-1, 0])
 
-watch(selectedIndex, () => {
+function doEmit() {
   const [index] = selectedIndex.value
   emit('updateSelection', [
     outputs.media.value[index],
     selectedOutput.value,
     selectedIndex.value[0] <= 0
   ])
-})
+}
 
 const outputsRef = useTemplateRef('outputsRef')
 const { reset: resetInfiniteScroll } = useInfiniteScroll(
@@ -72,36 +88,76 @@ watch(selectedIndex, () => {
   const [index, key] = selectedIndex.value
   if (!outputsRef.value) return
 
-  const outputElement = outputsRef.value?.children?.[index]?.children?.[key]
+  const outputElement = outputsRef.value?.querySelectorAll(
+    `[data-output-index="${index}"]`
+  )?.[key]
   if (!outputElement) return
 
   //container: 'nearest' is nice, but bleeding edge and chrome only
   outputElement.scrollIntoView({ block: 'nearest' })
 })
 
-function allOutputs(item?: AssetItem) {
+function outputCount(item?: AssetItem) {
   const user_metadata = getOutputAssetMetadata(item?.user_metadata)
-  if (!user_metadata?.allOutputs) return []
+  return user_metadata?.outputCount ?? 0
+}
 
-  return user_metadata.allOutputs
+const outputsCache: Record<string, MaybeRef<ResultItemImpl[]>> = {}
+
+function flattenNodeOutput([nodeId, nodeOutput]: [
+  string | number,
+  NodeExecutionOutput
+]): ResultItemImpl[] {
+  const knownOutputs: Record<string, ResultItem[]> = {}
+  if (nodeOutput.audio) knownOutputs.audio = nodeOutput.audio
+  if (nodeOutput.images) knownOutputs.images = nodeOutput.images
+  if (nodeOutput.video) knownOutputs.video = nodeOutput.video
+  if (nodeOutput.gifs) knownOutputs.gifs = nodeOutput.gifs as ResultItem[]
+  if (nodeOutput['3d']) knownOutputs['3d'] = nodeOutput['3d'] as ResultItem[]
+
+  return Object.entries(knownOutputs).flatMap(([mediaType, outputs]) =>
+    outputs.map(
+      (output) => new ResultItemImpl({ ...output, mediaType, nodeId })
+    )
+  )
+}
+
+function allOutputs(item?: AssetItem): MaybeRef<ResultItemImpl[]> {
+  if (item?.id && outputsCache[item.id]) return outputsCache[item.id]
+
+  const user_metadata = getOutputAssetMetadata(item?.user_metadata)
+  if (!user_metadata) return []
+  if (
+    user_metadata.allOutputs &&
+    user_metadata.outputCount &&
+    user_metadata.outputCount < user_metadata.allOutputs.length
+  )
+    return user_metadata.allOutputs
+
+  const outputRef = useAsyncState(
+    getJobDetail(user_metadata.promptId).then((jobDetail) => {
+      if (!jobDetail?.outputs) return []
+      return Object.entries(jobDetail.outputs).flatMap(flattenNodeOutput)
+    }),
+    []
+  ).state
+  outputsCache[item!.id] = outputRef
+  return outputRef
 }
 
 const selectedOutput = computed(() => {
   const [index, key] = selectedIndex.value
   if (index < 0) return undefined
 
-  const output = allOutputs(outputs.media.value[index])[key]
-  if (output) return output
-
-  return allOutputs(outputs.media.value[0])[0]
+  return toValue(allOutputs(outputs.media.value[index]))[key]
 })
 
+watch([selectedIndex, selectedOutput], doEmit)
 watch(
   () => outputs.media.value,
   (newAssets, oldAssets) => {
     if (newAssets.length === oldAssets.length || oldAssets.length === 0) return
     if (selectedIndex.value[0] <= 0) {
-      //force update
       selectedIndex.value = [0, 0]
       return
     }
@@ -120,8 +176,7 @@ function gotoNextOutput() {
     selectedIndex.value = [0, 0]
     return
   }
-  const currentItem = outputs.media.value[index]
-  if (allOutputs(currentItem)[key + 1]) {
+  if (key + 1 < outputCount(outputs.media.value[index])) {
     selectedIndex.value = [index, key + 1]
     return
   }
@@ -139,8 +194,8 @@ function gotoPreviousOutput() {
   }
 
   if (index > 0) {
-    const currentItem = outputs.media.value[index - 1]
-    selectedIndex.value = [index - 1, allOutputs(currentItem).length - 1]
+    const len = outputCount(outputs.media.value[index - 1])
+    selectedIndex.value = [index - 1, len - 1]
     return
   }
 
@@ -246,12 +301,24 @@ useEventListener(document.body, 'keydown', (e: KeyboardEvent) => {
             queueStore.runningTasks.length + queueStore.pendingTasks.length
           "
         />
+        <div class="absolute -bottom-1 w-full h-3 rounded-sm overflow-clip">
+          <div :class="progressBarContainerClass">
+            <div
+              :class="progressBarPrimaryClass"
+              :style="progressPercentStyle(totalPercent)"
+            />
+            <div
+              :class="progressBarSecondaryClass"
+              :style="progressPercentStyle(currentNodePercent)"
+            />
+          </div>
+        </div>
       </section>
       <template v-for="(item, index) in outputs.media.value" :key="index">
         <div
           class="border-border-subtle not-md:border-l md:border-t first:border-none not-md:h-21 md:w-full m-3"
         />
-        <template v-for="(output, key) in allOutputs(item)" :key>
+        <template v-for="(output, key) in toValue(allOutputs(item))" :key>
           <img
             v-if="getMediaType(output) === 'images'"
             :class="
@@ -262,6 +329,7 @@ useEventListener(document.body, 'keydown', (e: KeyboardEvent) => {
                   'border-2'
               )
             "
+            :data-output-index="index"
             :src="output.url"
             @click="selectedIndex = [index, key]"
           />
@@ -275,6 +343,7 @@ useEventListener(document.body, 'keydown', (e: KeyboardEvent) => {
                   'border-2'
               )
             "
+            :data-output-index="index"
             @click="selectedIndex = [index, key]"
           >
             <i
diff --git a/src/renderer/extensions/linearMode/Preview3d.vue b/src/renderer/extensions/linearMode/Preview3d.vue
index 25e4c355e..554f0cddc 100644
--- a/src/renderer/extensions/linearMode/Preview3d.vue
+++ b/src/renderer/extensions/linearMode/Preview3d.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { useTemplateRef, watch } from 'vue'
+import { ref, useTemplateRef, watch } from 'vue'
 
+import Load3DControls from '@/components/load3d/Load3DControls.vue'
 import AnimationControls from '@/components/load3d/controls/AnimationControls.vue'
 import { useLoad3dViewer } from '@/composables/useLoad3dViewer'
 
@@ -10,12 +11,12 @@ const { modelUrl } = defineProps<{
 
 const containerRef = useTemplateRef('containerRef')
 
-const viewer = useLoad3dViewer()
+const viewer = ref(useLoad3dViewer())
 
 watch([containerRef, () => modelUrl], async () => {
   if (!containerRef.value || !modelUrl) return
 
-  await viewer.initializeStandaloneViewer(containerRef.value, modelUrl)
+  await viewer.value.initializeStandaloneViewer(containerRef.value, modelUrl)
 })
 
 //TODO: refactor to add control buttons
@@ -29,14 +30,25 @@ watch([containerRef, () => modelUrl], async () => {
     @resize="viewer.handleResize"
   >
     <div class="pointer-events-none absolute top-0 left-0 size-full">
+      <Load3DControls
+        v-model:scene-config="viewer"
+        v-model:model-config="viewer"
+        v-model:camera-config="viewer"
+        v-model:light-config="viewer"
+        :is-splat-model="viewer.isSplatModel"
+        :is-ply-model="viewer.isPlyModel"
+        :has-skeleton="viewer.hasSkeleton"
+        @update-background-image="viewer.handleBackgroundImageUpdate"
+        @export-model="viewer.exportModel"
+      />
       <AnimationControls
-        v-if="viewer.animations.value && viewer.animations.value.length > 0"
-        v-model:animations="viewer.animations.value"
-        v-model:playing="viewer.playing.value"
-        v-model:selected-speed="viewer.selectedSpeed.value"
-        v-model:selected-animation="viewer.selectedAnimation.value"
-        v-model:animation-progress="viewer.animationProgress.value"
-        v-model:animation-duration="viewer.animationDuration.value"
+        v-if="viewer.animations && viewer.animations.length > 0"
+        v-model:animations="viewer.animations"
+        v-model:playing="viewer.playing"
+        v-model:selected-speed="viewer.selectedSpeed"
+        v-model:selected-animation="viewer.selectedAnimation"
+        v-model:animation-progress="viewer.animationProgress"
+        v-model:animation-duration="viewer.animationDuration"
         @seek="viewer.handleSeek"
       />
     </div>
diff --git a/src/renderer/extensions/vueNodes/components/LGraphNode.vue b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
index 1d96cda83..d602e4062 100644
--- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue
+++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
@@ -130,10 +130,16 @@
                 'transition-all cursor-pointer hover:bg-accent-background duration-150 active:scale-95'
               )
             "
-            @click.stop="handleShowAdvancedInputs"
+            @click.stop="showAdvancedState = !showAdvancedState"
           >
-            <i class="icon-[lucide--settings-2] size-4" />
-            <span>{{ t('rightSidePanel.showAdvancedInputsButton') }}</span>
+            <template v-if="showAdvancedState">
+              <i class="icon-[lucide--chevron-up] size-4" />
+              <span>{{ t('rightSidePanel.hideAdvancedInputsButton') }}</span>
+            </template>
+            <template v-else>
+              <i class="icon-[lucide--settings-2] size-4" />
+              <span>{{ t('rightSidePanel.showAdvancedInputsButton') }} </span>
+            </template>
           </button>
         </div>
       </div>
@@ -152,7 +158,15 @@
 
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
-import { computed, nextTick, onErrorCaptured, onMounted, ref, watch } from 'vue'
+import {
+  computed,
+  customRef,
+  nextTick,
+  onErrorCaptured,
+  onMounted,
+  ref,
+  watch
+} from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
@@ -212,6 +226,8 @@ const { nodeData, error = null } = defineProps<LGraphNodeProps>()
 
 const { t } = useI18n()
 
+const settingStore = useSettingStore()
+
 const { handleNodeCollapse, handleNodeTitleUpdate, handleNodeRightClick } =
   useNodeEventHandlers()
 const { bringNodeToFront } = useNodeZIndex()
@@ -248,7 +264,7 @@ const bypassed = computed(
 const muted = computed((): boolean => nodeData.mode === LGraphEventMode.NEVER)
 
 const nodeOpacity = computed(() => {
-  const globalOpacity = useSettingStore().get('Comfy.Node.Opacity') ?? 1
+  const globalOpacity = settingStore.get('Comfy.Node.Opacity') ?? 1
 
   // For muted/bypassed nodes, apply the 0.5 multiplier on top of global opacity
   if (bypassed.value || muted.value) {
@@ -493,20 +509,45 @@ const showAdvancedInputsButton = computed(() => {
 
   // For regular nodes: show button if there are advanced widgets and they're currently hidden
   const hasAdvancedWidgets = nodeData.widgets?.some((w) => w.options?.advanced)
-  return hasAdvancedWidgets && !node.showAdvanced
+  const alwaysShowAdvanced = settingStore.get(
+    'Comfy.Node.AlwaysShowAdvancedWidgets'
+  )
+  return hasAdvancedWidgets && !alwaysShowAdvanced
 })
 
-function handleShowAdvancedInputs() {
-  const node = lgraphNode.value
-  if (!node) return
+const showAdvancedState = customRef((track, trigger) => {
+  let internalState = false
 
-  if (node instanceof SubgraphNode) {
-    const rightSidePanelStore = useRightSidePanelStore()
-    rightSidePanelStore.focusSection('advanced-inputs')
-  } else {
-    node.showAdvanced = true
+  const node = lgraphNode.value
+  if (node && !(node instanceof SubgraphNode)) {
+    internalState = !!node.showAdvanced
   }
-}
+
+  return {
+    get() {
+      track()
+      return internalState
+    },
+    set(value: boolean) {
+      const node = lgraphNode.value
+      if (!node) return
+
+      if (node instanceof SubgraphNode) {
+        // Do not modify internalState for subgraph nodes
+        const rightSidePanelStore = useRightSidePanelStore()
+        if (value) {
+          rightSidePanelStore.focusSection('advanced-inputs')
+        } else {
+          rightSidePanelStore.closePanel()
+        }
+      } else {
+        node.showAdvanced = value
+        internalState = value
+      }
+      trigger()
+    }
+  }
+})
 
 const nodeMedia = computed(() => {
   const newOutputs = nodeOutputs.nodeOutputs[nodeOutputLocatorId.value]
diff --git a/src/renderer/extensions/vueNodes/components/NodeHeader.test.ts b/src/renderer/extensions/vueNodes/components/NodeHeader.test.ts
index 0c755116b..a813e88af 100644
--- a/src/renderer/extensions/vueNodes/components/NodeHeader.test.ts
+++ b/src/renderer/extensions/vueNodes/components/NodeHeader.test.ts
@@ -154,7 +154,7 @@ describe('NodeHeader.vue', () => {
     // Edit and confirm (EditableText uses blur or enter to emit)
     const input = wrapper.get('[data-testid="node-title-input"]')
     await input.setValue('My Custom Sampler')
-    await input.trigger('keyup.enter')
+    await input.trigger('keydown.enter')
     await input.trigger('blur')
 
     // NodeHeader should emit update:title with trimmed value
@@ -169,7 +169,7 @@ describe('NodeHeader.vue', () => {
     await wrapper.get('[data-testid="node-header-1"]').trigger('dblclick')
     const input = wrapper.get('[data-testid="node-title-input"]')
     await input.setValue('Should Not Save')
-    await input.trigger('keyup.escape')
+    await input.trigger('keydown.escape')
 
     // Should not emit update:title
     expect(wrapper.emitted('update:title')).toBeFalsy()
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/components/NodeWidgets.vue b/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
index f3fb64f38..000050451 100644
--- a/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
@@ -25,7 +25,10 @@
       :key="`widget-${index}-${widget.name}`"
     >
       <div
-        v-if="!widget.simplified.options?.hidden"
+        v-if="
+          !widget.simplified.options?.hidden &&
+          (!widget.simplified.options?.advanced || showAdvanced)
+        "
         class="lg-node-widget group col-span-full grid grid-cols-subgrid items-stretch"
       >
         <!-- Widget Input Slot Dot -->
@@ -75,6 +78,7 @@ import type {
   VueNodeData,
   WidgetSlotMetadata
 } from '@/composables/graph/useGraphNodeManager'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { st } from '@/i18n'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
@@ -145,6 +149,12 @@ onErrorCaptured((error) => {
 })
 
 const nodeType = computed(() => nodeData?.type || '')
+const settingStore = useSettingStore()
+const showAdvanced = computed(
+  () =>
+    nodeData?.showAdvanced ||
+    settingStore.get('Comfy.Node.AlwaysShowAdvancedWidgets')
+)
 const { getWidgetTooltip, createTooltipConfig } = useNodeTooltips(
   nodeType.value
 )
@@ -170,7 +180,7 @@ const processedWidgets = computed((): ProcessedWidget[] => {
     if (!shouldRenderAsVue(widget)) continue
 
     const vueComponent =
-      getComponent(widget.type, widget.name) ||
+      getComponent(widget.type) ||
       (widget.isDOMWidget ? WidgetDOM : WidgetLegacy)
 
     const { slotMetadata, options } = widget
@@ -226,7 +236,12 @@ const gridTemplateRows = computed((): string => {
   if (!nodeData?.widgets) return ''
   const processedNames = new Set(toValue(processedWidgets).map((w) => w.name))
   return nodeData.widgets
-    .filter((w) => processedNames.has(w.name) && !w.options?.hidden)
+    .filter(
+      (w) =>
+        processedNames.has(w.name) &&
+        !w.options?.hidden &&
+        (!w.options?.advanced || showAdvanced.value)
+    )
     .map((w) =>
       shouldExpand(w.type) || w.hasLayoutSize ? 'auto' : 'min-content'
     )
diff --git a/src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue b/src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue
index 3921128b0..67c978a0b 100644
--- a/src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue
+++ b/src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue
@@ -13,18 +13,29 @@ const props = defineProps<{
   multi?: boolean
 }>()
 
+const clipPath = computed(() => {
+  switch (props.slotData?.shape) {
+    case 6:
+      return 'url(#square)'
+    case 7:
+      return 'url(#hollow)'
+    default:
+      return undefined
+  }
+})
+
 const slotElRef = useTemplateRef('slot-el')
 
-function getTypes() {
+const types = computed(() => {
   if (props.hasError) return ['var(--color-error)']
   //TODO Support connected/disconnected colors?
   if (!props.slotData) return [getSlotColor()]
+  if (props.slotData.type === '*') return ['']
   const typesSet = new Set(
     `${props.slotData.type}`.split(',').map(getSlotColor)
   )
   return [...typesSet].slice(0, 3)
-}
-const types = getTypes()
+})
 
 defineExpose({
   slotElRef
@@ -52,26 +63,65 @@ const slotClass = computed(() =>
     "
   >
     <div
-      v-if="types.length === 1"
+      v-if="types.length === 1 && slotData?.shape == undefined"
       ref="slot-el"
-      :style="{ backgroundColor: types[0] }"
+      :style="{ backgroundColor: types.length === 1 ? types[0] : undefined }"
       :class="slotClass"
     />
-    <div
+    <svg
       v-else
       ref="slot-el"
-      :style="{
-        '--type1': types[0],
-        '--type2': types[1],
-        '--type3': types[2]
-      }"
       :class="slotClass"
+      viewBox="0 0 100 100"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <i-comfy:node-slot2
-        v-if="types.length === 2"
-        class="size-full -translate-y-1/2"
+      <defs>
+        <clipPath id="square">
+          <rect x="20" y="20" width="60" height="60" />
+        </clipPath>
+        <clipPath id="hollow">
+          <path
+            d="M-50 50
+           A100 100 0 0 1 150 50
+           A100 100 0 0 1 -50 50
+           M30 50
+           A20 20 0 0 0 70 50
+           A20 20 0 0 0 30 50"
+          />
+        </clipPath>
+      </defs>
+      <circle
+        v-if="types.length === 1"
+        :clip-path
+        cx="50"
+        cy="50"
+        r="50"
+        :fill="types[0]"
       />
-      <i-comfy:node-slot3 v-else class="size-full -translate-y-1/2" />
-    </div>
+      <g v-else-if="types.length === 2" :clip-path stroke-width="4">
+        <path d="M0 50 A 50 50 0 0 1 100 50" :fill="types[0]" />
+        <path d="M100 50 A 50 50 0 0 1 0 50" :fill="types[1]" />
+        <path d="M0 50L100 50" stroke="var(--inner-stroke, black)" />
+        <path
+          d="M50 2A48 48 0 0 1 50 98A48 48 0 0 1 50 2"
+          fill="transparent"
+          stroke="var(--outer-stroke, transparent)"
+        />
+      </g>
+      <g v-else :clip-path stroke-width="4">
+        <path d="M0 50A50 50 0 0 0 75 93L50 50" :fill="types[0]" />
+        <path d="M75 93A50 50 0 0 0 75 7L50 50" :fill="types[1]" />
+        <path d="M75 7A50 50 0 0 0 0 50L50 50" :fill="types[2]" />
+        <path
+          d="M50 50L0 50M50 50L75 93M50 50L75 7"
+          stroke="var(--inner-stroke, black)"
+        />
+        <path
+          d="M50 2A48 48 0 0 1 50 98A48 48 0 0 1 50 2"
+          fill="transparent"
+          stroke="var(--outer-stroke, transparent)"
+        />
+      </g>
+    </svg>
   </div>
 </template>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetAudioUI.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetAudioUI.vue
deleted file mode 100644
index 7b46670d2..000000000
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetAudioUI.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-  <div
-    class="w-full col-span-2 widget-expands grid grid-cols-[minmax(80px,max-content)_minmax(125px,auto)] gap-y-3 p-3"
-  >
-    <WidgetSelect v-model="modelValue" :widget class="col-span-2" />
-    <AudioPreviewPlayer
-      class="col-span-2"
-      :audio-url="audioUrlFromWidget"
-      :readonly="readonly"
-      :hide-when-empty="isOutputNodeRef"
-      :show-options-button="true"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { app } from '@/scripts/app'
-import type { SimplifiedWidget } from '@/types/simplifiedWidget'
-import { isOutputNode } from '@/utils/nodeFilterUtil'
-
-import { getAudioUrlFromPath } from '../utils/audioUtils'
-import WidgetSelect from './WidgetSelect.vue'
-import AudioPreviewPlayer from './audio/AudioPreviewPlayer.vue'
-
-const props = defineProps<{
-  widget: SimplifiedWidget<string | undefined>
-  readonly?: boolean
-  nodeId: string
-}>()
-
-const modelValue = defineModel<string>('modelValue')
-
-defineEmits<{
-  'update:modelValue': [value: string]
-}>()
-
-// Get litegraph node
-const litegraphNode = computed(() => {
-  if (!props.nodeId || !app.canvas.graph) return null
-  return app.canvas.graph.getNodeById(props.nodeId) as LGraphNode | null
-})
-
-// Check if this is an output node (PreviewAudio, SaveAudio, etc)
-const isOutputNodeRef = computed(() => {
-  const node = litegraphNode.value
-  if (!node) return false
-  return isOutputNode(node)
-})
-
-const audioFilePath = computed(() => props.widget.value as string)
-
-// Computed audio URL from widget value (for input files)
-const audioUrlFromWidget = computed(() => {
-  const path = audioFilePath.value
-  if (!path) return ''
-  return getAudioUrlFromPath(path, 'input')
-})
-</script>
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/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue b/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue
index bf69add86..b351d7f25 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue
@@ -1,17 +1,13 @@
 <template>
   <div class="relative">
     <div
-      v-if="!hidden"
-      :class="
-        cn(
-          'bg-component-node-widget-background box-border flex gap-4 items-center justify-start relative rounded-lg w-full h-16 px-4 py-0',
-          { hidden: hideWhenEmpty && !hasAudio }
-        )
-      "
+      v-if="!hideWhenEmpty || modelValue"
+      class="bg-component-node-widget-background box-border flex gap-4 items-center justify-start relative rounded-lg w-full h-16 px-4 py-0"
     >
       <!-- Hidden audio element -->
       <audio
         ref="audioRef"
+        :src="modelValue"
         @loadedmetadata="handleLoadedMetadata"
         @timeupdate="handleTimeUpdate"
         @ended="handleEnded"
@@ -137,18 +133,13 @@
 <script setup lang="ts">
 import Slider from 'primevue/slider'
 import TieredMenu from 'primevue/tieredmenu'
-import { computed, nextTick, onUnmounted, ref, watch } from 'vue'
+import { computed, ref, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { whenever } from '@vueuse/core'
 
-import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
-import { api } from '@/scripts/api'
-import { app } from '@/scripts/app'
-import { useNodeOutputStore } from '@/stores/imagePreviewStore'
-import { getLocatorIdFromNodeData } from '@/utils/graphTraversalUtil'
-import { isOutputNode } from '@/utils/nodeFilterUtil'
 import { cn } from '@/utils/tailwindUtil'
 
-import { formatTime, getResourceURL } from '../../utils/audioUtils'
+import { formatTime } from '../../utils/audioUtils'
 
 const { t } = useI18n()
 
@@ -156,8 +147,6 @@ const props = withDefaults(
   defineProps<{
     hideWhenEmpty?: boolean
     showOptionsButton?: boolean
-    nodeId?: string
-    audioUrl?: string
   }>(),
   {
     hideWhenEmpty: true
@@ -165,14 +154,13 @@ const props = withDefaults(
 )
 
 // Refs
-const audioRef = ref<HTMLAudioElement>()
+const audioRef = useTemplateRef('audioRef')
 const optionsMenu = ref()
 const isPlaying = ref(false)
 const isMuted = ref(false)
 const volume = ref(1)
 const currentTime = ref(0)
 const duration = ref(0)
-const hasAudio = ref(false)
 const playbackRate = ref(1)
 
 // Computed
@@ -180,61 +168,11 @@ const progressPercentage = computed(() => {
   if (!duration.value || duration.value === 0) return 0
   return (currentTime.value / duration.value) * 100
 })
+const modelValue = defineModel<string>()
 
 const showVolumeTwo = computed(() => !isMuted.value && volume.value > 0.5)
 const showVolumeOne = computed(() => isMuted.value && volume.value > 0)
 
-const litegraphNode = computed(() => {
-  if (!props.nodeId || !app.canvas.graph) return null
-  return app.canvas.graph.getNodeById(props.nodeId) as LGraphNode | null
-})
-
-const hidden = computed(() => {
-  if (!litegraphNode.value) return false
-  // dont show if its a LoadAudio and we have nodeId
-  const isLoadAudio =
-    litegraphNode.value.constructor?.comfyClass === 'LoadAudio'
-  return isLoadAudio && !!props.nodeId
-})
-
-// Check if this is an output node
-const isOutputNodeRef = computed(() => {
-  const node = litegraphNode.value
-  return !!node && isOutputNode(node)
-})
-
-const nodeLocatorId = computed(() => {
-  const node = litegraphNode.value
-  if (!node) return null
-  return getLocatorIdFromNodeData(node)
-})
-
-const nodeOutputStore = useNodeOutputStore()
-
-// Computed audio URL from node output (for output nodes)
-const audioUrlFromOutput = computed(() => {
-  if (!isOutputNodeRef.value || !nodeLocatorId.value) return ''
-
-  const nodeOutput = nodeOutputStore.nodeOutputs[nodeLocatorId.value]
-  if (!nodeOutput?.audio || nodeOutput.audio.length === 0) return ''
-
-  const audio = nodeOutput.audio[0]
-  if (!audio.filename) return ''
-
-  return api.apiURL(
-    getResourceURL(
-      audio.subfolder || '',
-      audio.filename,
-      audio.type || 'output'
-    )
-  )
-})
-
-// Combined audio URL (output takes precedence for output nodes)
-const finalAudioUrl = computed(() => {
-  return audioUrlFromOutput.value || props.audioUrl || ''
-})
-
 // Playback controls
 const togglePlayPause = () => {
   if (!audioRef.value || !audioRef.value.src) {
@@ -335,36 +273,15 @@ const menuItems = computed(() => [
   }
 ])
 
-// Load audio from URL
-const loadAudioFromUrl = (url: string) => {
-  if (!audioRef.value) return
-  isPlaying.value = false
-  audioRef.value.pause()
-  audioRef.value.src = url
-  void audioRef.value.load()
-  hasAudio.value = !!url
-}
-
-// Watch for finalAudioUrl changes
-watch(
-  finalAudioUrl,
-  (newUrl) => {
-    if (newUrl) {
-      void nextTick(() => {
-        loadAudioFromUrl(newUrl)
-      })
-    }
+whenever(
+  modelValue,
+  () => {
+    isPlaying.value = false
+    audioRef.value?.pause()
+    void audioRef.value?.load()
   },
   { immediate: true }
 )
-
-// Cleanup
-onUnmounted(() => {
-  if (audioRef.value) {
-    audioRef.value.pause()
-    audioRef.value.src = ''
-  }
-})
 </script>
 
 <style scoped>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue
index 22d6db5ff..5041d8cf4 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue
@@ -78,6 +78,8 @@ const maxSelectable = computed(() => {
   return 1
 })
 
+const itemsKey = computed(() => props.items.map((item) => item.id).join('|'))
+
 const filteredItems = ref<DropdownItem[]>([])
 
 const defaultSorter = computed<SortOption['sorter']>(() => {
@@ -209,6 +211,7 @@ async function customSearcher(
         :items="sortedItems"
         :is-selected="internalIsSelected"
         :max-selectable="maxSelectable"
+        :update-key="itemsKey"
         @close="closeDropdown"
         @item-click="handleSelection"
       />
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue
index 71ff863dd..89dbb5eb8 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { MaybeRefOrGetter } from 'vue'
+
 import { cn } from '@/utils/tailwindUtil'
 
 import FormDropdownMenuActions from './FormDropdownMenuActions.vue'
@@ -21,6 +23,7 @@ interface Props {
     query: string,
     onCleanup: (cleanupFn: () => void) => void
   ) => Promise<void>
+  updateKey?: MaybeRefOrGetter<unknown>
 }
 
 defineProps<Props>()
@@ -54,6 +57,7 @@ const searchQuery = defineModel<string>('searchQuery')
       v-model:search-query="searchQuery"
       :sort-options="sortOptions"
       :searcher
+      :update-key="updateKey"
     />
     <!-- List -->
     <div class="relative flex h-full mt-2 overflow-y-scroll">
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
index d0766afe2..23475a489 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { MaybeRefOrGetter } from 'vue'
+
 import Popover from 'primevue/popover'
 import { ref, useTemplateRef } from 'vue'
 
@@ -13,6 +15,7 @@ defineProps<{
     onCleanup: (cleanupFn: () => void) => void
   ) => Promise<void>
   sortOptions: SortOption[]
+  updateKey?: MaybeRefOrGetter<unknown>
 }>()
 
 const layoutMode = defineModel<LayoutMode>('layoutMode')
@@ -53,6 +56,7 @@ function handleSortSelected(item: SortOption) {
     <FormSearchInput
       v-model="searchQuery"
       :searcher
+      :update-key="updateKey"
       :class="
         cn(
           actionButtonStyle,
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/shared.test.ts b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/shared.test.ts
new file mode 100644
index 000000000..0366378e4
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/shared.test.ts
@@ -0,0 +1,151 @@
+import { describe, expect, it } from 'vitest'
+
+import { defaultSearcher, getDefaultSortOptions } from './shared'
+import type { DropdownItem } from './types'
+
+function createItem(name: string, label?: string): DropdownItem {
+  return {
+    id: name,
+    mediaSrc: '',
+    name,
+    label,
+    metadata: ''
+  }
+}
+
+describe('defaultSearcher', () => {
+  const items: DropdownItem[] = [
+    createItem('apple.png'),
+    createItem('banana.jpg'),
+    createItem('cherry.gif')
+  ]
+
+  it('returns all items when query is empty', async () => {
+    const result = await defaultSearcher('', items)
+    expect(result).toEqual(items)
+  })
+
+  it('returns all items when query is whitespace', async () => {
+    const result = await defaultSearcher('   ', items)
+    expect(result).toEqual(items)
+  })
+
+  it('filters items by single word', async () => {
+    const result = await defaultSearcher('apple', items)
+    expect(result).toHaveLength(1)
+    expect(result[0].name).toBe('apple.png')
+  })
+
+  it('filters items case-insensitively', async () => {
+    const result = await defaultSearcher('APPLE', items)
+    expect(result).toHaveLength(1)
+    expect(result[0].name).toBe('apple.png')
+  })
+
+  it('filters items by multiple words (AND logic)', async () => {
+    const result = await defaultSearcher('a png', items)
+    expect(result).toHaveLength(1)
+    expect(result[0].name).toBe('apple.png')
+  })
+
+  it('returns empty array when no matches', async () => {
+    const result = await defaultSearcher('xyz', items)
+    expect(result).toHaveLength(0)
+  })
+})
+
+describe('getDefaultSortOptions', () => {
+  const sortOptions = getDefaultSortOptions()
+
+  describe('Default sorter', () => {
+    const defaultSorter = sortOptions.find((o) => o.id === 'default')!.sorter
+
+    it('returns items in original order', () => {
+      const items = [createItem('z'), createItem('a'), createItem('m')]
+      const result = defaultSorter({ items })
+      expect(result.map((i) => i.name)).toEqual(['z', 'a', 'm'])
+    })
+
+    it('does not mutate original array', () => {
+      const items = [createItem('z'), createItem('a')]
+      const result = defaultSorter({ items })
+      expect(result).not.toBe(items)
+    })
+  })
+
+  describe('A-Z sorter', () => {
+    const azSorter = sortOptions.find((o) => o.id === 'a-z')!.sorter
+
+    it('sorts items alphabetically by name', () => {
+      const items = [
+        createItem('cherry'),
+        createItem('apple'),
+        createItem('banana')
+      ]
+      const result = azSorter({ items })
+      expect(result.map((i) => i.name)).toEqual(['apple', 'banana', 'cherry'])
+    })
+
+    it('sorts items alphabetically by label when available', () => {
+      const items = [
+        createItem('file_c.png', 'Cherry'),
+        createItem('file_a.png', 'Apple'),
+        createItem('file_b.png', 'Banana')
+      ]
+      const result = azSorter({ items })
+      expect(result.map((i) => i.name)).toEqual([
+        'file_a.png',
+        'file_b.png',
+        'file_c.png'
+      ])
+    })
+
+    it('uses natural sort for numeric values', () => {
+      const items = [
+        createItem('img_10.png'),
+        createItem('img_2.png'),
+        createItem('img_1.png'),
+        createItem('img_20.png')
+      ]
+      const result = azSorter({ items })
+      expect(result.map((i) => i.name)).toEqual([
+        'img_1.png',
+        'img_2.png',
+        'img_10.png',
+        'img_20.png'
+      ])
+    })
+
+    it('is case-insensitive', () => {
+      const items = [
+        createItem('Banana'),
+        createItem('apple'),
+        createItem('CHERRY')
+      ]
+      const result = azSorter({ items })
+      expect(result.map((i) => i.name)).toEqual(['apple', 'Banana', 'CHERRY'])
+    })
+
+    it('falls back to name when label is undefined', () => {
+      const items = [
+        createItem('z_file.png', 'Alpha'),
+        createItem('a_file.png'),
+        createItem('m_file.png', 'Beta')
+      ]
+      const result = azSorter({ items })
+      // 'a_file.png' (no label, uses name), 'Alpha', 'Beta'
+      expect(result.map((i) => i.name)).toEqual([
+        'a_file.png',
+        'z_file.png',
+        'm_file.png'
+      ])
+    })
+
+    it('does not mutate original array', () => {
+      const items = [createItem('z'), createItem('a')]
+      const result = azSorter({ items })
+      expect(result).not.toBe(items)
+      expect(items[0].name).toBe('z')
+    })
+  })
+})
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/shared.ts b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/shared.ts
index 1c8efeac7..f7dc48125 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/shared.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/shared.ts
@@ -21,7 +21,12 @@ export function getDefaultSortOptions(): SortOption[] {
       id: 'a-z',
       sorter: ({ items }) =>
         items.slice().sort((a, b) => {
-          return a.name.localeCompare(b.name)
+          const aLabel = a.label ?? a.name
+          const bLabel = b.label ?? b.name
+          return aLabel.localeCompare(bLabel, undefined, {
+            numeric: true,
+            sensitivity: 'base'
+          })
         })
     }
   ]
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useAssetWidgetData.desktop.test.ts b/src/renderer/extensions/vueNodes/widgets/composables/useAssetWidgetData.desktop.test.ts
index 2410f0964..5f7ea30ff 100644
--- a/src/renderer/extensions/vueNodes/widgets/composables/useAssetWidgetData.desktop.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useAssetWidgetData.desktop.test.ts
@@ -12,9 +12,10 @@ const mockGetCategoryForNodeType = vi.fn()
 
 vi.mock('@/stores/assetsStore', () => ({
   useAssetsStore: () => ({
-    modelAssetsByNodeType: new Map(),
-    modelLoadingByNodeType: new Map(),
-    modelErrorByNodeType: new Map(),
+    getAssets: () => [],
+    isModelLoading: () => false,
+    getError: () => undefined,
+    hasAssetKey: () => false,
     updateModelsForNodeType: mockUpdateModelsForNodeType
   })
 }))
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useAssetWidgetData.test.ts b/src/renderer/extensions/vueNodes/widgets/composables/useAssetWidgetData.test.ts
index 9c54564f1..31362c66b 100644
--- a/src/renderer/extensions/vueNodes/widgets/composables/useAssetWidgetData.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useAssetWidgetData.test.ts
@@ -8,17 +8,19 @@ vi.mock('@/platform/distribution/types', () => ({
   isCloud: true
 }))
 
-const mockModelAssetsByNodeType = new Map<string, AssetItem[]>()
-const mockModelLoadingByNodeType = new Map<string, boolean>()
-const mockModelErrorByNodeType = new Map<string, Error | null>()
+const mockAssetsByKey = new Map<string, AssetItem[]>()
+const mockLoadingByKey = new Map<string, boolean>()
+const mockErrorByKey = new Map<string, Error | undefined>()
+const mockInitializedKeys = new Set<string>()
 const mockUpdateModelsForNodeType = vi.fn()
 const mockGetCategoryForNodeType = vi.fn()
 
 vi.mock('@/stores/assetsStore', () => ({
   useAssetsStore: () => ({
-    modelAssetsByNodeType: mockModelAssetsByNodeType,
-    modelLoadingByNodeType: mockModelLoadingByNodeType,
-    modelErrorByNodeType: mockModelErrorByNodeType,
+    getAssets: (key: string) => mockAssetsByKey.get(key) ?? [],
+    isModelLoading: (key: string) => mockLoadingByKey.get(key) ?? false,
+    getError: (key: string) => mockErrorByKey.get(key),
+    hasAssetKey: (key: string) => mockInitializedKeys.has(key),
     updateModelsForNodeType: mockUpdateModelsForNodeType
   })
 }))
@@ -32,9 +34,10 @@ vi.mock('@/stores/modelToNodeStore', () => ({
 describe('useAssetWidgetData (cloud mode, isCloud=true)', () => {
   beforeEach(() => {
     vi.clearAllMocks()
-    mockModelAssetsByNodeType.clear()
-    mockModelLoadingByNodeType.clear()
-    mockModelErrorByNodeType.clear()
+    mockAssetsByKey.clear()
+    mockLoadingByKey.clear()
+    mockErrorByKey.clear()
+    mockInitializedKeys.clear()
     mockGetCategoryForNodeType.mockReturnValue(undefined)
 
     mockUpdateModelsForNodeType.mockImplementation(
@@ -76,8 +79,9 @@ describe('useAssetWidgetData (cloud mode, isCloud=true)', () => {
 
     mockUpdateModelsForNodeType.mockImplementation(
       async (_nodeType: string): Promise<AssetItem[]> => {
-        mockModelAssetsByNodeType.set(_nodeType, mockAssets)
-        mockModelLoadingByNodeType.set(_nodeType, false)
+        mockInitializedKeys.add(_nodeType)
+        mockAssetsByKey.set(_nodeType, mockAssets)
+        mockLoadingByKey.set(_nodeType, false)
         return mockAssets
       }
     )
@@ -108,9 +112,10 @@ describe('useAssetWidgetData (cloud mode, isCloud=true)', () => {
 
     mockUpdateModelsForNodeType.mockImplementation(
       async (_nodeType: string): Promise<AssetItem[]> => {
-        mockModelErrorByNodeType.set(_nodeType, mockError)
-        mockModelAssetsByNodeType.set(_nodeType, [])
-        mockModelLoadingByNodeType.set(_nodeType, false)
+        mockInitializedKeys.add(_nodeType)
+        mockErrorByKey.set(_nodeType, mockError)
+        mockAssetsByKey.set(_nodeType, [])
+        mockLoadingByKey.set(_nodeType, false)
         return []
       }
     )
@@ -130,8 +135,9 @@ describe('useAssetWidgetData (cloud mode, isCloud=true)', () => {
 
     mockUpdateModelsForNodeType.mockImplementation(
       async (_nodeType: string): Promise<AssetItem[]> => {
-        mockModelAssetsByNodeType.set(_nodeType, [])
-        mockModelLoadingByNodeType.set(_nodeType, false)
+        mockInitializedKeys.add(_nodeType)
+        mockAssetsByKey.set(_nodeType, [])
+        mockLoadingByKey.set(_nodeType, false)
         return []
       }
     )
@@ -154,8 +160,9 @@ describe('useAssetWidgetData (cloud mode, isCloud=true)', () => {
       mockGetCategoryForNodeType.mockReturnValue('checkpoints')
       mockUpdateModelsForNodeType.mockImplementation(
         async (_nodeType: string): Promise<AssetItem[]> => {
-          mockModelAssetsByNodeType.set(_nodeType, mockAssets)
-          mockModelLoadingByNodeType.set(_nodeType, false)
+          mockInitializedKeys.add(_nodeType)
+          mockAssetsByKey.set(_nodeType, mockAssets)
+          mockLoadingByKey.set(_nodeType, false)
           return mockAssets
         }
       )
@@ -182,8 +189,9 @@ describe('useAssetWidgetData (cloud mode, isCloud=true)', () => {
       mockGetCategoryForNodeType.mockReturnValue('loras')
       mockUpdateModelsForNodeType.mockImplementation(
         async (_nodeType: string): Promise<AssetItem[]> => {
-          mockModelAssetsByNodeType.set(_nodeType, mockAssets)
-          mockModelLoadingByNodeType.set(_nodeType, false)
+          mockInitializedKeys.add(_nodeType)
+          mockAssetsByKey.set(_nodeType, mockAssets)
+          mockLoadingByKey.set(_nodeType, false)
           return mockAssets
         }
       )
@@ -209,8 +217,9 @@ describe('useAssetWidgetData (cloud mode, isCloud=true)', () => {
       mockGetCategoryForNodeType.mockReturnValue('checkpoints')
       mockUpdateModelsForNodeType.mockImplementation(
         async (_nodeType: string): Promise<AssetItem[]> => {
-          mockModelAssetsByNodeType.set(_nodeType, mockAssets)
-          mockModelLoadingByNodeType.set(_nodeType, false)
+          mockInitializedKeys.add(_nodeType)
+          mockAssetsByKey.set(_nodeType, mockAssets)
+          mockLoadingByKey.set(_nodeType, false)
           return mockAssets
         }
       )
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useAssetWidgetData.ts b/src/renderer/extensions/vueNodes/widgets/composables/useAssetWidgetData.ts
index b03f1dac9..ace04ae6a 100644
--- a/src/renderer/extensions/vueNodes/widgets/composables/useAssetWidgetData.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useAssetWidgetData.ts
@@ -34,27 +34,21 @@ export function useAssetWidgetData(
 
     const assets = computed<AssetItem[]>(() => {
       const resolvedType = toValue(nodeType)
-      return resolvedType
-        ? (assetsStore.modelAssetsByNodeType.get(resolvedType) ?? [])
-        : []
+      return resolvedType ? (assetsStore.getAssets(resolvedType) ?? []) : []
     })
 
     const isLoading = computed(() => {
       const resolvedType = toValue(nodeType)
-      return resolvedType
-        ? (assetsStore.modelLoadingByNodeType.get(resolvedType) ?? false)
-        : false
+      return resolvedType ? assetsStore.isModelLoading(resolvedType) : false
     })
 
     const error = computed<Error | null>(() => {
       const resolvedType = toValue(nodeType)
-      return resolvedType
-        ? (assetsStore.modelErrorByNodeType.get(resolvedType) ?? null)
-        : null
+      return resolvedType ? (assetsStore.getError(resolvedType) ?? null) : null
     })
 
     const dropdownItems = computed<DropdownItem[]>(() => {
-      return assets.value.map((asset) => ({
+      return (assets.value ?? []).map((asset) => ({
         id: asset.id,
         name:
           (asset.user_metadata?.filename as string | undefined) ?? asset.name,
@@ -71,9 +65,10 @@ export function useAssetWidgetData(
           return
         }
 
-        const hasData = assetsStore.modelAssetsByNodeType.has(currentNodeType)
+        const isLoading = assetsStore.isModelLoading(currentNodeType)
+        const hasBeenInitialized = assetsStore.hasAssetKey(currentNodeType)
 
-        if (!hasData) {
+        if (!isLoading && !hasBeenInitialized) {
           await assetsStore.updateModelsForNodeType(currentNodeType)
         }
       },
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
index 9d2be02a8..75cf47fec 100644
--- a/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
@@ -13,6 +13,7 @@ import {
   assetFilenameSchema,
   assetItemSchema
 } from '@/platform/assets/schemas/assetSchema'
+import { getAssetFilename } from '@/platform/assets/utils/assetMetadataUtils'
 import { assetService } from '@/platform/assets/services/assetService'
 import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
@@ -115,7 +116,7 @@ const createAssetBrowserWidget = (
           return
         }
 
-        const filename = validatedAsset.data.user_metadata?.filename
+        const filename = getAssetFilename(validatedAsset.data)
         const validatedFilename = assetFilenameSchema.safeParse(filename)
 
         if (!validatedFilename.success) {
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useWidgetRenderer.test.ts b/src/renderer/extensions/vueNodes/widgets/composables/useWidgetRenderer.test.ts
index c50061582..3fc529a05 100644
--- a/src/renderer/extensions/vueNodes/widgets/composables/useWidgetRenderer.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useWidgetRenderer.test.ts
@@ -11,7 +11,6 @@ import {
 import type { SafeWidgetData } from '@/composables/graph/useGraphNodeManager'
 
 const {
-  WidgetAudioUI,
   WidgetButton,
   WidgetColorPicker,
   WidgetInputNumber,
@@ -44,75 +43,75 @@ describe('widgetRegistry', () => {
     // Test number type mappings
     describe('number types', () => {
       it('should map int types to slider widget', () => {
-        expect(getComponent('int', 'bar')).toBe(WidgetInputNumber)
-        expect(getComponent('INT', 'bar')).toBe(WidgetInputNumber)
+        expect(getComponent('int')).toBe(WidgetInputNumber)
+        expect(getComponent('INT')).toBe(WidgetInputNumber)
       })
 
       it('should map float types to slider widget', () => {
-        expect(getComponent('float', 'cfg')).toBe(WidgetInputNumber)
-        expect(getComponent('FLOAT', 'cfg')).toBe(WidgetInputNumber)
-        expect(getComponent('number', 'cfg')).toBe(WidgetInputNumber)
-        expect(getComponent('slider', 'cfg')).toBe(WidgetInputNumber)
+        expect(getComponent('float')).toBe(WidgetInputNumber)
+        expect(getComponent('FLOAT')).toBe(WidgetInputNumber)
+        expect(getComponent('number')).toBe(WidgetInputNumber)
+        expect(getComponent('slider')).toBe(WidgetInputNumber)
       })
     })
 
     // Test text type mappings
     describe('text types', () => {
       it('should map text variations to input text widget', () => {
-        expect(getComponent('text', 'text')).toBe(WidgetInputText)
-        expect(getComponent('string', 'text')).toBe(WidgetInputText)
-        expect(getComponent('STRING', 'text')).toBe(WidgetInputText)
+        expect(getComponent('text')).toBe(WidgetInputText)
+        expect(getComponent('string')).toBe(WidgetInputText)
+        expect(getComponent('STRING')).toBe(WidgetInputText)
       })
 
       it('should map multiline text types to textarea widget', () => {
-        expect(getComponent('multiline', 'text')).toBe(WidgetTextarea)
-        expect(getComponent('textarea', 'text')).toBe(WidgetTextarea)
-        expect(getComponent('TEXTAREA', 'text')).toBe(WidgetTextarea)
-        expect(getComponent('customtext', 'text')).toBe(WidgetTextarea)
+        expect(getComponent('multiline')).toBe(WidgetTextarea)
+        expect(getComponent('textarea')).toBe(WidgetTextarea)
+        expect(getComponent('TEXTAREA')).toBe(WidgetTextarea)
+        expect(getComponent('customtext')).toBe(WidgetTextarea)
       })
 
       it('should map markdown to markdown widget', () => {
-        expect(getComponent('MARKDOWN', 'text')).toBe(WidgetMarkdown)
-        expect(getComponent('markdown', 'text')).toBe(WidgetMarkdown)
+        expect(getComponent('MARKDOWN')).toBe(WidgetMarkdown)
+        expect(getComponent('markdown')).toBe(WidgetMarkdown)
       })
     })
 
     // Test selection type mappings
     describe('selection types', () => {
       it('should map combo types to select widget', () => {
-        expect(getComponent('combo', 'image')).toBe(WidgetSelect)
-        expect(getComponent('COMBO', 'video')).toBe(WidgetSelect)
+        expect(getComponent('combo')).toBe(WidgetSelect)
+        expect(getComponent('COMBO')).toBe(WidgetSelect)
       })
     })
 
     // Test boolean type mappings
     describe('boolean types', () => {
       it('should map boolean types to toggle switch widget', () => {
-        expect(getComponent('toggle', 'image')).toBe(WidgetToggleSwitch)
-        expect(getComponent('boolean', 'image')).toBe(WidgetToggleSwitch)
-        expect(getComponent('BOOLEAN', 'image')).toBe(WidgetToggleSwitch)
+        expect(getComponent('toggle')).toBe(WidgetToggleSwitch)
+        expect(getComponent('boolean')).toBe(WidgetToggleSwitch)
+        expect(getComponent('BOOLEAN')).toBe(WidgetToggleSwitch)
       })
     })
 
     // Test advanced widget mappings
     describe('advanced widgets', () => {
       it('should map color types to color picker widget', () => {
-        expect(getComponent('color', 'color')).toBe(WidgetColorPicker)
-        expect(getComponent('COLOR', 'color')).toBe(WidgetColorPicker)
+        expect(getComponent('color')).toBe(WidgetColorPicker)
+        expect(getComponent('COLOR')).toBe(WidgetColorPicker)
       })
 
       it('should map button types to button widget', () => {
-        expect(getComponent('button', '')).toBe(WidgetButton)
-        expect(getComponent('BUTTON', '')).toBe(WidgetButton)
+        expect(getComponent('button')).toBe(WidgetButton)
+        expect(getComponent('BUTTON')).toBe(WidgetButton)
       })
     })
 
     // Test fallback behavior
     describe('fallback behavior', () => {
       it('should return null for unknown types', () => {
-        expect(getComponent('unknown', 'unknown')).toBe(null)
-        expect(getComponent('custom_widget', 'custom_widget')).toBe(null)
-        expect(getComponent('', '')).toBe(null)
+        expect(getComponent('unknown')).toBe(null)
+        expect(getComponent('custom_widget')).toBe(null)
+        expect(getComponent('')).toBe(null)
       })
     })
   })
@@ -176,16 +175,10 @@ describe('widgetRegistry', () => {
 
     it('should handle case sensitivity correctly through aliases', () => {
       // Test that both lowercase and uppercase work
-      expect(getComponent('string', '')).toBe(WidgetInputText)
-      expect(getComponent('STRING', '')).toBe(WidgetInputText)
-      expect(getComponent('combo', '')).toBe(WidgetSelect)
-      expect(getComponent('COMBO', '')).toBe(WidgetSelect)
-    })
-
-    it('should handle combo additional widgets', () => {
-      // Test that both lowercase and uppercase work
-      expect(getComponent('combo', 'audio')).toBe(WidgetAudioUI)
-      expect(getComponent('combo', 'image')).toBe(WidgetSelect)
+      expect(getComponent('string')).toBe(WidgetInputText)
+      expect(getComponent('STRING')).toBe(WidgetInputText)
+      expect(getComponent('combo')).toBe(WidgetSelect)
+      expect(getComponent('COMBO')).toBe(WidgetSelect)
     })
   })
 })
diff --git a/src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts b/src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts
index c82a4d395..9b28cccb5 100644
--- a/src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts
+++ b/src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts
@@ -48,9 +48,6 @@ const WidgetRecordAudio = defineAsyncComponent(
 const AudioPreviewPlayer = defineAsyncComponent(
   () => import('../components/audio/AudioPreviewPlayer.vue')
 )
-const WidgetAudioUI = defineAsyncComponent(
-  () => import('../components/WidgetAudioUI.vue')
-)
 const Load3D = defineAsyncComponent(
   () => import('@/components/load3d/Load3D.vue')
 )
@@ -62,7 +59,6 @@ const WidgetBoundingBox = defineAsyncComponent(
 )
 
 export const FOR_TESTING = {
-  WidgetAudioUI,
   WidgetButton,
   WidgetColorPicker,
   WidgetInputNumber,
@@ -182,10 +178,6 @@ const coreWidgetDefinitions: Array<[string, WidgetDefinition]> = [
   ]
 ]
 
-const getComboWidgetAdditions = (): Map<string, Component> => {
-  return new Map([['audio', WidgetAudioUI]])
-}
-
 // Build lookup maps
 const widgets = new Map<string, WidgetDefinition>()
 const aliasMap = new Map<string, string>()
@@ -200,13 +192,7 @@ for (const [type, def] of coreWidgetDefinitions) {
 // Utility functions
 const getCanonicalType = (type: string): string => aliasMap.get(type) || type
 
-export const getComponent = (type: string, name: string): Component | null => {
-  if (type == 'combo') {
-    const comboAdditions = getComboWidgetAdditions()
-    if (comboAdditions.has(name)) {
-      return comboAdditions.get(name) || null
-    }
-  }
+export const getComponent = (type: string): Component | null => {
   const canonicalType = getCanonicalType(type)
   return widgets.get(canonicalType)?.component || null
 }
diff --git a/src/renderer/extensions/vueNodes/widgets/utils/audioUtils.ts b/src/renderer/extensions/vueNodes/widgets/utils/audioUtils.ts
index 12e7fdf4f..a596d5c74 100644
--- a/src/renderer/extensions/vueNodes/widgets/utils/audioUtils.ts
+++ b/src/renderer/extensions/vueNodes/widgets/utils/audioUtils.ts
@@ -1,5 +1,4 @@
 import type { ResultItemType } from '@/schemas/apiSchema'
-import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 
 /**
@@ -13,17 +12,6 @@ export function formatTime(seconds: number): string {
   return `${mins}:${secs.toString().padStart(2, '0')}`
 }
 
-/**
- * Get full audio URL from path
- */
-export function getAudioUrlFromPath(
-  path: string,
-  type: ResultItemType = 'input'
-): string {
-  const [subfolder, filename] = splitFilePath(path)
-  return api.apiURL(getResourceURL(subfolder, filename, type))
-}
-
 export function getResourceURL(
   subfolder: string,
   filename: string,
diff --git a/src/router.ts b/src/router.ts
index 102ec8f2a..b489d2257 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -86,6 +86,10 @@ installPreservedQueryTracker(router, [
   {
     namespace: PRESERVED_QUERY_NAMESPACES.TEMPLATE,
     keys: ['template', 'source', 'mode']
+  },
+  {
+    namespace: PRESERVED_QUERY_NAMESPACES.INVITE,
+    keys: ['invite']
   }
 ])
 
diff --git a/src/schemas/apiSchema.ts b/src/schemas/apiSchema.ts
index 37833cf2f..e9ac9e454 100644
--- a/src/schemas/apiSchema.ts
+++ b/src/schemas/apiSchema.ts
@@ -430,7 +430,8 @@ const zSettings = z.object({
   'LiteGraph.Node.DefaultPadding': z.boolean(),
   'LiteGraph.Pointer.TrackpadGestures': z.boolean(),
   'Comfy.VersionCompatibility.DisableWarnings': z.boolean(),
-  'Comfy.RightSidePanel.IsOpen': z.boolean()
+  'Comfy.RightSidePanel.IsOpen': z.boolean(),
+  'Comfy.Node.AlwaysShowAdvancedWidgets': z.boolean()
 })
 
 export type EmbeddingsResponse = z.infer<typeof zEmbeddingsResponse>
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..106603a93 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() {
     return this.rootGraphInternal!
   }
 
diff --git a/src/services/colorPaletteService.ts b/src/services/colorPaletteService.ts
index 8a9fa52c6..25f87195f 100644
--- a/src/services/colorPaletteService.ts
+++ b/src/services/colorPaletteService.ts
@@ -222,10 +222,7 @@ export const useColorPaletteService = () => {
 
     const backgroundImage = settingStore.get('Comfy.Canvas.BackgroundImage')
     if (backgroundImage) {
-      rootStyle.setProperty(
-        '--bg-img',
-        `url('${backgroundImage}') no-repeat center /cover`
-      )
+      rootStyle.setProperty('--bg-img', `url('${backgroundImage}')`)
     } else {
       rootStyle.removeProperty('--bg-img')
     }
diff --git a/src/services/dialogService.ts b/src/services/dialogService.ts
index e70b7fcb0..3154c54d6 100644
--- a/src/services/dialogService.ts
+++ b/src/services/dialogService.ts
@@ -41,6 +41,7 @@ export type ConfirmationDialogType =
   | 'delete'
   | 'dirtyClose'
   | 'reinstall'
+  | 'info'
 
 /**
  * Minimal interface for execution error dialogs.
@@ -102,6 +103,7 @@ export const useDialogService = () => {
       | 'user'
       | 'credits'
       | 'subscription'
+      | 'workspace'
   ) {
     const props = panel ? { props: { defaultPanel: panel } } : undefined
 
@@ -519,6 +521,131 @@ 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' }
+        }
+      }
+    })
+  }
+
+  async function showRemoveMemberDialog(memberId: string) {
+    const { default: component } =
+      await import('@/components/dialog/content/workspace/RemoveMemberDialogContent.vue')
+    return dialogStore.showDialog({
+      key: 'remove-member',
+      component,
+      props: { memberId },
+      dialogComponentProps: workspaceDialogPt
+    })
+  }
+
+  async function showInviteMemberDialog() {
+    const { default: component } =
+      await import('@/components/dialog/content/workspace/InviteMemberDialogContent.vue')
+    return dialogStore.showDialog({
+      key: 'invite-member',
+      component,
+      dialogComponentProps: {
+        ...workspaceDialogPt,
+        pt: {
+          ...workspaceDialogPt.pt,
+          root: { class: 'rounded-2xl max-w-[512px] w-full' }
+        }
+      }
+    })
+  }
+
+  async function showRevokeInviteDialog(inviteId: string) {
+    const { default: component } =
+      await import('@/components/dialog/content/workspace/RevokeInviteDialogContent.vue')
+    return dialogStore.showDialog({
+      key: 'revoke-invite',
+      component,
+      props: { inviteId },
+      dialogComponentProps: workspaceDialogPt
+    })
+  }
+
+  function showBillingComingSoonDialog() {
+    return dialogStore.showDialog({
+      key: 'billing-coming-soon',
+      title: t('subscription.billingComingSoon.title'),
+      component: ConfirmationDialogContent,
+      props: {
+        message: t('subscription.billingComingSoon.message'),
+        type: 'info' as ConfirmationDialogType,
+        onConfirm: () => {}
+      },
+      dialogComponentProps: {
+        pt: {
+          root: { class: 'max-w-[360px]' }
+        }
+      }
+    })
+  }
+
   return {
     showLoadWorkflowWarning,
     showMissingModelsWarning,
@@ -536,6 +663,14 @@ export const useDialogService = () => {
     confirm,
     showLayoutDialog,
     showImportFailedNodeDialog,
-    showNodeConflictDialog
+    showNodeConflictDialog,
+    showDeleteWorkspaceDialog,
+    showCreateWorkspaceDialog,
+    showLeaveWorkspaceDialog,
+    showEditWorkspaceDialog,
+    showRemoveMemberDialog,
+    showRevokeInviteDialog,
+    showInviteMemberDialog,
+    showBillingComingSoonDialog
   }
 }
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/assetDownloadStore.test.ts b/src/stores/assetDownloadStore.test.ts
index 5882c4b9a..fd428c36e 100644
--- a/src/stores/assetDownloadStore.test.ts
+++ b/src/stores/assetDownloadStore.test.ts
@@ -236,4 +236,80 @@ describe('useAssetDownloadStore', () => {
       expect(store.finishedDownloads).toHaveLength(0)
     })
   })
+
+  describe('session download tracking', () => {
+    it('counts unacknowledged completed downloads with asset IDs', () => {
+      const store = useAssetDownloadStore()
+
+      dispatch(
+        createDownloadMessage({
+          status: 'completed',
+          progress: 100,
+          asset_id: 'asset-456'
+        })
+      )
+
+      expect(store.sessionDownloadCount).toBe(1)
+    })
+
+    it('does not count completed downloads without asset IDs', () => {
+      const store = useAssetDownloadStore()
+
+      dispatch(
+        createDownloadMessage({
+          status: 'completed',
+          progress: 100,
+          asset_id: undefined
+        })
+      )
+
+      expect(store.sessionDownloadCount).toBe(0)
+    })
+
+    it('does not count failed downloads', () => {
+      const store = useAssetDownloadStore()
+
+      dispatch(
+        createDownloadMessage({
+          status: 'failed',
+          asset_id: 'asset-456'
+        })
+      )
+
+      expect(store.sessionDownloadCount).toBe(0)
+    })
+
+    it('isDownloadedThisSession returns true for unacknowledged downloads', () => {
+      const store = useAssetDownloadStore()
+
+      dispatch(
+        createDownloadMessage({
+          status: 'completed',
+          progress: 100,
+          asset_id: 'asset-456'
+        })
+      )
+
+      expect(store.isDownloadedThisSession('asset-456')).toBe(true)
+      expect(store.isDownloadedThisSession('other-asset')).toBe(false)
+    })
+
+    it('acknowledgeAsset decrements session count', () => {
+      const store = useAssetDownloadStore()
+
+      dispatch(
+        createDownloadMessage({
+          status: 'completed',
+          progress: 100,
+          asset_id: 'asset-456'
+        })
+      )
+      expect(store.sessionDownloadCount).toBe(1)
+
+      store.acknowledgeAsset('asset-456')
+
+      expect(store.sessionDownloadCount).toBe(0)
+      expect(store.isDownloadedThisSession('asset-456')).toBe(false)
+    })
+  })
 })
diff --git a/src/stores/assetDownloadStore.ts b/src/stores/assetDownloadStore.ts
index 88818c31c..054f28a77 100644
--- a/src/stores/assetDownloadStore.ts
+++ b/src/stores/assetDownloadStore.ts
@@ -17,6 +17,7 @@ export interface AssetDownload {
   assetId?: string
   error?: string
   modelType?: string
+  acknowledged?: boolean
 }
 
 interface CompletedDownload {
@@ -59,9 +60,29 @@ export const useAssetDownloadStore = defineStore('assetDownload', () => {
       (d) => d.status === 'completed' || d.status === 'failed'
     )
   )
+  const unacknowledgedDownloads = computed(() =>
+    finishedDownloads.value.filter(
+      (d) => d.status === 'completed' && d.assetId && !d.acknowledged
+    )
+  )
+  const sessionDownloadCount = computed(
+    () => unacknowledgedDownloads.value.length
+  )
   const hasActiveDownloads = computed(() => activeDownloads.value.length > 0)
   const hasDownloads = computed(() => downloads.value.size > 0)
 
+  function isDownloadedThisSession(assetId: string): boolean {
+    return unacknowledgedDownloads.value.some((d) => d.assetId === assetId)
+  }
+
+  function acknowledgeAsset(assetId: string) {
+    for (const download of downloads.value.values()) {
+      if (download.assetId === assetId) {
+        download.acknowledged = true
+      }
+    }
+  }
+
   function trackDownload(taskId: string, modelType: string, assetName: string) {
     if (downloads.value.has(taskId)) return
 
@@ -172,7 +193,10 @@ export const useAssetDownloadStore = defineStore('assetDownload', () => {
     hasDownloads,
     downloadList,
     lastCompletedDownload,
+    sessionDownloadCount,
     trackDownload,
-    clearFinishedDownloads
+    clearFinishedDownloads,
+    isDownloadedThisSession,
+    acknowledgeAsset
   }
 })
diff --git a/src/stores/assetsStore.test.ts b/src/stores/assetsStore.test.ts
index 576c40d7e..7f9822001 100644
--- a/src/stores/assetsStore.test.ts
+++ b/src/stores/assetsStore.test.ts
@@ -1,9 +1,12 @@
-import { createPinia, setActivePinia } from 'pinia'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createTestingPinia } from '@pinia/testing'
+import { setActivePinia } from 'pinia'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick, watch } from 'vue'
 
 import { useAssetsStore } from '@/stores/assetsStore'
 import { api } from '@/scripts/api'
 import type { JobListItem } from '@/platform/remote/comfyui/jobs/jobTypes'
+import { assetService } from '@/platform/assets/services/assetService'
 
 // Mock the api module
 vi.mock('@/scripts/api', () => ({
@@ -20,13 +23,17 @@ vi.mock('@/scripts/api', () => ({
 // Mock the asset service
 vi.mock('@/platform/assets/services/assetService', () => ({
   assetService: {
-    getAssetsByTag: vi.fn()
+    getAssetsByTag: vi.fn(),
+    getAssetsForNodeType: vi.fn()
   }
 }))
 
-// Mock distribution type
+// Mock distribution type - hoisted so it can be changed per test
+const mockIsCloud = vi.hoisted(() => ({ value: false }))
 vi.mock('@/platform/distribution/types', () => ({
-  isCloud: false
+  get isCloud() {
+    return mockIsCloud.value
+  }
 }))
 
 // Mock TaskItemImpl
@@ -115,7 +122,7 @@ describe('assetsStore - Refactored (Option A)', () => {
   })
 
   beforeEach(() => {
-    setActivePinia(createPinia())
+    setActivePinia(createTestingPinia({ stubActions: false }))
     store = useAssetsStore()
     vi.clearAllMocks()
   })
@@ -312,8 +319,8 @@ describe('assetsStore - Refactored (Option A)', () => {
 
       // Verify sorting (newest first - lower index = newer)
       for (let i = 1; i < store.historyAssets.length; i++) {
-        const prevDate = new Date(store.historyAssets[i - 1].created_at)
-        const currDate = new Date(store.historyAssets[i].created_at)
+        const prevDate = new Date(store.historyAssets[i - 1].created_at ?? 0)
+        const currDate = new Date(store.historyAssets[i].created_at ?? 0)
         expect(prevDate.getTime()).toBeGreaterThanOrEqual(currDate.getTime())
       }
     })
@@ -428,8 +435,8 @@ describe('assetsStore - Refactored (Option A)', () => {
 
       // Should still maintain sorting
       for (let i = 1; i < store.historyAssets.length; i++) {
-        const prevDate = new Date(store.historyAssets[i - 1].created_at)
-        const currDate = new Date(store.historyAssets[i].created_at)
+        const prevDate = new Date(store.historyAssets[i - 1].created_at ?? 0)
+        const currDate = new Date(store.historyAssets[i].created_at ?? 0)
         expect(prevDate.getTime()).toBeGreaterThanOrEqual(currDate.getTime())
       }
     })
@@ -453,3 +460,158 @@ describe('assetsStore - Refactored (Option A)', () => {
     })
   })
 })
+
+describe('assetsStore - Model Assets Cache (Cloud)', () => {
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+    mockIsCloud.value = true
+    vi.clearAllMocks()
+  })
+
+  afterEach(() => {
+    mockIsCloud.value = false
+  })
+
+  const createMockAsset = (id: string) => ({
+    id,
+    name: `asset-${id}`,
+    size: 100,
+    created_at: new Date().toISOString(),
+    tags: ['models'],
+    preview_url: `http://test.com/${id}`
+  })
+
+  describe('getAssets cache invalidation', () => {
+    it('should invalidate cache before mutating assets during batch loading', async () => {
+      const store = useAssetsStore()
+      const nodeType = 'CheckpointLoaderSimple'
+
+      const firstBatch = Array.from({ length: 500 }, (_, i) =>
+        createMockAsset(`asset-${i}`)
+      )
+      const secondBatch = Array.from({ length: 100 }, (_, i) =>
+        createMockAsset(`asset-${500 + i}`)
+      )
+
+      let callCount = 0
+      vi.mocked(assetService.getAssetsForNodeType).mockImplementation(
+        async () => {
+          callCount++
+          return callCount === 1 ? firstBatch : secondBatch
+        }
+      )
+
+      await store.updateModelsForNodeType(nodeType)
+
+      // Wait for background batch loading to complete
+      await vi.waitFor(() => {
+        expect(
+          vi.mocked(assetService.getAssetsForNodeType)
+        ).toHaveBeenCalledTimes(2)
+      })
+
+      const assets = store.getAssets(nodeType)
+      expect(assets).toHaveLength(600)
+    })
+
+    it('should not return stale cached array after background batch completes', async () => {
+      const store = useAssetsStore()
+      const nodeType = 'LoraLoader'
+
+      // First batch must be exactly MODEL_BATCH_SIZE (500) to trigger hasMore
+      const firstBatch = Array.from({ length: 500 }, (_, i) =>
+        createMockAsset(`first-${i}`)
+      )
+      const secondBatch = [createMockAsset('new-asset')]
+
+      let callCount = 0
+      vi.mocked(assetService.getAssetsForNodeType).mockImplementation(
+        async () => {
+          callCount++
+          return callCount === 1 ? firstBatch : secondBatch
+        }
+      )
+
+      await store.updateModelsForNodeType(nodeType)
+
+      // Wait for background batch loading to complete
+      await vi.waitFor(() => {
+        expect(
+          vi.mocked(assetService.getAssetsForNodeType)
+        ).toHaveBeenCalledTimes(2)
+      })
+
+      const assets = store.getAssets(nodeType)
+      expect(assets).toHaveLength(501)
+      expect(assets.map((a) => a.id)).toContain('new-asset')
+    })
+
+    it('should return cached array on subsequent getAssets calls', () => {
+      const store = useAssetsStore()
+      const nodeType = 'TestLoader'
+
+      const firstCall = store.getAssets(nodeType)
+      const secondCall = store.getAssets(nodeType)
+
+      expect(secondCall).toBe(firstCall)
+    })
+  })
+
+  describe('concurrent request handling', () => {
+    it('should discard stale request when newer request starts', async () => {
+      const store = useAssetsStore()
+      const nodeType = 'CheckpointLoaderSimple'
+      const firstBatch = Array.from({ length: 5 }, (_, i) =>
+        createMockAsset(`first-${i}`)
+      )
+      const secondBatch = Array.from({ length: 10 }, (_, i) =>
+        createMockAsset(`second-${i}`)
+      )
+
+      let resolveFirst: (value: ReturnType<typeof createMockAsset>[]) => void
+      const firstPromise = new Promise<ReturnType<typeof createMockAsset>[]>(
+        (resolve) => {
+          resolveFirst = resolve
+        }
+      )
+      let callCount = 0
+      vi.mocked(assetService.getAssetsForNodeType).mockImplementation(
+        async () => {
+          callCount++
+          return callCount === 1 ? firstPromise : secondBatch
+        }
+      )
+
+      const firstRequest = store.updateModelsForNodeType(nodeType)
+      const secondRequest = store.updateModelsForNodeType(nodeType)
+      resolveFirst!(firstBatch)
+      await Promise.all([firstRequest, secondRequest])
+
+      expect(store.getAssets(nodeType)).toHaveLength(10)
+      expect(
+        store.getAssets(nodeType).every((a) => a.id.startsWith('second-'))
+      ).toBe(true)
+    })
+  })
+
+  describe('shallowReactive state reactivity', () => {
+    it('should trigger reactivity on isModelLoading change', async () => {
+      const store = useAssetsStore()
+      const nodeType = 'CheckpointLoaderSimple'
+
+      const loadingStates: boolean[] = []
+      watch(
+        () => store.isModelLoading(nodeType),
+        (val) => loadingStates.push(val),
+        { immediate: true }
+      )
+
+      vi.mocked(assetService.getAssetsForNodeType).mockResolvedValue([])
+      await store.updateModelsForNodeType(nodeType)
+      await nextTick()
+
+      expect(loadingStates).toContain(true)
+      expect(loadingStates).toContain(false)
+    })
+  })
+})
diff --git a/src/stores/assetsStore.ts b/src/stores/assetsStore.ts
index a387aea7d..619c2ac26 100644
--- a/src/stores/assetsStore.ts
+++ b/src/stores/assetsStore.ts
@@ -1,13 +1,14 @@
 import { useAsyncState, whenever } from '@vueuse/core'
-import { isEqual } from 'es-toolkit'
+import { difference } from 'es-toolkit'
 import { defineStore } from 'pinia'
-import { computed, shallowReactive, ref } from 'vue'
+import { computed, reactive, ref, shallowReactive } from 'vue'
 import {
   mapInputFileToAssetItem,
   mapTaskOutputToAssetItem
 } from '@/platform/assets/composables/media/assetMappers'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import { assetService } from '@/platform/assets/services/assetService'
+import type { PaginationOptions } from '@/platform/assets/services/assetService'
 import { isCloud } from '@/platform/distribution/types'
 import type { JobListItem } from '@/platform/remote/comfyui/jobs/jobTypes'
 import { api } from '@/scripts/api'
@@ -78,7 +79,8 @@ function mapHistoryToAssets(historyItems: JobListItem[]): AssetItem[] {
 
   return assetItems.sort(
     (a, b) =>
-      new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
+      new Date(b.created_at ?? 0).getTime() -
+      new Date(a.created_at ?? 0).getTime()
   )
 }
 
@@ -145,9 +147,9 @@ export const useAssetsStore = defineStore('assets', () => {
         loadedIds.add(asset.id)
 
         // Find insertion index to maintain sorted order (newest first)
-        const assetTime = new Date(asset.created_at).getTime()
+        const assetTime = new Date(asset.created_at ?? 0).getTime()
         const insertIndex = allHistoryItems.value.findIndex(
-          (item) => new Date(item.created_at).getTime() < assetTime
+          (item) => new Date(item.created_at ?? 0).getTime() < assetTime
         )
 
         if (insertIndex === -1) {
@@ -251,6 +253,16 @@ export const useAssetsStore = defineStore('assets', () => {
     return inputAssetsByFilename.value.get(filename)?.name ?? filename
   }
 
+  const MODEL_BATCH_SIZE = 500
+
+  interface ModelPaginationState {
+    assets: Map<string, AssetItem>
+    offset: number
+    hasMore: boolean
+    isLoading: boolean
+    error?: Error
+  }
+
   /**
    * Model assets cached by node type (e.g., 'CheckpointLoaderSimple', 'LoraLoader')
    * Used by multiple loader nodes to avoid duplicate fetches
@@ -258,111 +270,304 @@ export const useAssetsStore = defineStore('assets', () => {
    */
   const getModelState = () => {
     if (isCloud) {
-      const modelAssetsByNodeType = shallowReactive(
-        new Map<string, AssetItem[]>()
-      )
-      const modelLoadingByNodeType = shallowReactive(new Map<string, boolean>())
-      const modelErrorByNodeType = shallowReactive(
-        new Map<string, Error | null>()
-      )
+      const modelStateByKey = ref(new Map<string, ModelPaginationState>())
 
-      const stateByNodeType = shallowReactive(
-        new Map<string, ReturnType<typeof useAsyncState<AssetItem[]>>>()
-      )
+      const assetsArrayCache = new Map<
+        string,
+        { source: Map<string, AssetItem>; array: AssetItem[] }
+      >()
+
+      const pendingRequestByKey = new Map<string, ModelPaginationState>()
+
+      function createState(
+        existingAssets?: Map<string, AssetItem>
+      ): ModelPaginationState {
+        const assets = new Map(existingAssets)
+        return reactive({
+          assets,
+          offset: 0,
+          hasMore: true,
+          isLoading: true
+        })
+      }
+
+      function isStale(key: string, state: ModelPaginationState): boolean {
+        const committed = modelStateByKey.value.get(key)
+        const pending = pendingRequestByKey.get(key)
+        return committed !== state && pending !== state
+      }
+
+      const EMPTY_ASSETS: AssetItem[] = []
+
+      function getAssets(key: string): AssetItem[] {
+        const state = modelStateByKey.value.get(key)
+        const assetsMap = state?.assets
+        if (!assetsMap) return EMPTY_ASSETS
+
+        const cached = assetsArrayCache.get(key)
+        if (cached && cached.source === assetsMap) {
+          return cached.array
+        }
+
+        const array = Array.from(assetsMap.values())
+        assetsArrayCache.set(key, { source: assetsMap, array })
+        return array
+      }
+
+      function isLoading(key: string): boolean {
+        return modelStateByKey.value.get(key)?.isLoading ?? false
+      }
+
+      function getError(key: string): Error | undefined {
+        return modelStateByKey.value.get(key)?.error
+      }
+
+      function hasMore(key: string): boolean {
+        return modelStateByKey.value.get(key)?.hasMore ?? false
+      }
+
+      function hasAssetKey(key: string): boolean {
+        return modelStateByKey.value.has(key)
+      }
 
       /**
-       * Internal helper to fetch and cache assets with a given key and fetcher
+       * Internal helper to fetch and cache assets with a given key and fetcher.
+       * Loads first batch immediately, then progressively loads remaining batches.
+       * Keeps existing data visible until new data is successfully fetched.
        */
       async function updateModelsForKey(
         key: string,
-        fetcher: () => Promise<AssetItem[]>
-      ): Promise<AssetItem[]> {
-        if (!stateByNodeType.has(key)) {
-          stateByNodeType.set(
-            key,
-            useAsyncState(fetcher, [], {
-              immediate: false,
-              resetOnExecute: false,
-              onError: (err) => {
-                console.error(`Error fetching model assets for ${key}:`, err)
+        fetcher: (options: PaginationOptions) => Promise<AssetItem[]>
+      ): Promise<void> {
+        const existingState = modelStateByKey.value.get(key)
+        const state = createState(existingState?.assets)
+
+        const seenIds = new Set<string>()
+
+        const hasExistingData = modelStateByKey.value.has(key)
+        if (hasExistingData) {
+          pendingRequestByKey.set(key, state)
+        } else {
+          modelStateByKey.value.set(key, state)
+        }
+
+        async function loadBatches(): Promise<void> {
+          while (state.hasMore) {
+            try {
+              const newAssets = await fetcher({
+                limit: MODEL_BATCH_SIZE,
+                offset: state.offset
+              })
+
+              if (isStale(key, state)) return
+
+              const isFirstBatch = state.offset === 0
+              if (isFirstBatch) {
+                assetsArrayCache.delete(key)
+                if (hasExistingData) {
+                  pendingRequestByKey.delete(key)
+                  modelStateByKey.value.set(key, state)
+                }
               }
-            })
+
+              // Merge new assets into existing map and track seen IDs
+              for (const asset of newAssets) {
+                seenIds.add(asset.id)
+                state.assets.set(asset.id, asset)
+              }
+              state.assets = new Map(state.assets)
+
+              state.offset += newAssets.length
+              state.hasMore = newAssets.length === MODEL_BATCH_SIZE
+
+              if (isFirstBatch) {
+                state.isLoading = false
+              }
+
+              if (state.hasMore) {
+                await new Promise((resolve) => setTimeout(resolve, 50))
+              }
+            } catch (err) {
+              if (isStale(key, state)) return
+              console.error(`Error loading batch for ${key}:`, err)
+
+              state.error = err instanceof Error ? err : new Error(String(err))
+              state.hasMore = false
+              state.isLoading = false
+              pendingRequestByKey.delete(key)
+
+              return
+            }
+          }
+
+          const staleIds = [...state.assets.keys()].filter(
+            (id) => !seenIds.has(id)
           )
+          for (const id of staleIds) {
+            state.assets.delete(id)
+          }
+          assetsArrayCache.delete(key)
         }
 
-        const state = stateByNodeType.get(key)!
-
-        modelLoadingByNodeType.set(key, true)
-        modelErrorByNodeType.set(key, null)
-
-        try {
-          await state.execute()
-        } finally {
-          modelLoadingByNodeType.set(key, state.isLoading.value)
-        }
-
-        const assets = state.state.value
-        const existingAssets = modelAssetsByNodeType.get(key)
-
-        if (!isEqual(existingAssets, assets)) {
-          modelAssetsByNodeType.set(key, assets)
-        }
-
-        modelErrorByNodeType.set(
-          key,
-          state.error.value instanceof Error ? state.error.value : null
-        )
-
-        return assets
+        await loadBatches()
       }
 
       /**
        * Fetch and cache model assets for a specific node type
        * @param nodeType The node type to fetch assets for (e.g., 'CheckpointLoaderSimple')
-       * @returns Promise resolving to the fetched assets
        */
-      async function updateModelsForNodeType(
-        nodeType: string
-      ): Promise<AssetItem[]> {
-        return updateModelsForKey(nodeType, () =>
-          assetService.getAssetsForNodeType(nodeType)
+      async function updateModelsForNodeType(nodeType: string): Promise<void> {
+        await updateModelsForKey(nodeType, (opts) =>
+          assetService.getAssetsForNodeType(nodeType, opts)
         )
       }
 
       /**
        * Fetch and cache model assets for a specific tag
        * @param tag The tag to fetch assets for (e.g., 'models')
-       * @returns Promise resolving to the fetched assets
        */
-      async function updateModelsForTag(tag: string): Promise<AssetItem[]> {
+      async function updateModelsForTag(tag: string): Promise<void> {
         const key = `tag:${tag}`
-        return updateModelsForKey(key, () => assetService.getAssetsByTag(tag))
+        await updateModelsForKey(key, (opts) =>
+          assetService.getAssetsByTag(tag, true, opts)
+        )
+      }
+
+      /**
+       * Optimistically update an asset in the cache
+       * @param assetId The asset ID to update
+       * @param updates Partial asset data to merge
+       * @param cacheKey Optional cache key to target (nodeType or 'tag:xxx')
+       */
+      function updateAssetInCache(
+        assetId: string,
+        updates: Partial<AssetItem>,
+        cacheKey?: string
+      ) {
+        const keysToCheck = cacheKey
+          ? [cacheKey]
+          : Array.from(modelStateByKey.value.keys())
+
+        for (const key of keysToCheck) {
+          const state = modelStateByKey.value.get(key)
+          if (!state?.assets) continue
+
+          const existingAsset = state.assets.get(assetId)
+          if (existingAsset) {
+            const updatedAsset = { ...existingAsset, ...updates }
+            state.assets.set(assetId, updatedAsset)
+            assetsArrayCache.delete(key)
+            if (cacheKey) return
+          }
+        }
+      }
+
+      /**
+       * Update asset metadata with optimistic cache 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(
+        asset: AssetItem,
+        userMetadata: Record<string, unknown>,
+        cacheKey?: string
+      ) {
+        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 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(
+        asset: AssetItem,
+        newTags: string[],
+        cacheKey?: string
+      ) {
+        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 {
-        modelAssetsByNodeType,
-        modelLoadingByNodeType,
-        modelErrorByNodeType,
+        getAssets,
+        isLoading,
+        getError,
+        hasMore,
+        hasAssetKey,
         updateModelsForNodeType,
-        updateModelsForTag
+        updateModelsForTag,
+        updateAssetMetadata,
+        updateAssetTags
       }
     }
 
+    const emptyAssets: AssetItem[] = []
     return {
-      modelAssetsByNodeType: shallowReactive(new Map<string, AssetItem[]>()),
-      modelLoadingByNodeType: shallowReactive(new Map<string, boolean>()),
-      modelErrorByNodeType: shallowReactive(new Map<string, Error | null>()),
-      updateModelsForNodeType: async () => [],
-      updateModelsForTag: async () => []
+      getAssets: () => emptyAssets,
+      isLoading: () => false,
+      getError: () => undefined,
+      hasMore: () => false,
+      hasAssetKey: () => false,
+      updateModelsForNodeType: async () => {},
+      updateModelsForTag: async () => {},
+      updateAssetMetadata: async () => {},
+      updateAssetTags: async () => {}
     }
   }
 
   const {
-    modelAssetsByNodeType,
-    modelLoadingByNodeType,
-    modelErrorByNodeType,
+    getAssets,
+    isLoading: isModelLoading,
+    getError,
+    hasMore,
+    hasAssetKey,
     updateModelsForNodeType,
-    updateModelsForTag
+    updateModelsForTag,
+    updateAssetMetadata,
+    updateAssetTags
   } = getModelState()
 
   // Watch for completed downloads and refresh model caches
@@ -422,11 +627,17 @@ export const useAssetsStore = defineStore('assets', () => {
     inputAssetsByFilename,
     getInputName,
 
-    // Model assets
-    modelAssetsByNodeType,
-    modelLoadingByNodeType,
-    modelErrorByNodeType,
+    // Model assets - accessors
+    getAssets,
+    isModelLoading,
+    getError,
+    hasMore,
+    hasAssetKey,
+
+    // Model assets - actions
     updateModelsForNodeType,
-    updateModelsForTag
+    updateModelsForTag,
+    updateAssetMetadata,
+    updateAssetTags
   }
 })
diff --git a/src/stores/executionStore.ts b/src/stores/executionStore.ts
index 429adb807..dda732af5 100644
--- a/src/stores/executionStore.ts
+++ b/src/stores/executionStore.ts
@@ -425,6 +425,18 @@ export const useExecutionStore = defineStore('execution', () => {
     initializingPromptIds.value = next
   }
 
+  function clearInitializationByPromptIds(promptIds: string[]) {
+    if (!promptIds.length) return
+    const current = initializingPromptIds.value
+    const toRemove = promptIds.filter((id) => current.has(id))
+    if (!toRemove.length) return
+    const next = new Set(current)
+    for (const id of toRemove) {
+      next.delete(id)
+    }
+    initializingPromptIds.value = next
+  }
+
   function isPromptInitializing(
     promptId: string | number | undefined
   ): boolean {
@@ -650,6 +662,8 @@ export const useExecutionStore = defineStore('execution', () => {
     runningWorkflowCount,
     initializingPromptIds,
     isPromptInitializing,
+    clearInitializationByPromptId,
+    clearInitializationByPromptIds,
     bindExecutionEvents,
     unbindExecutionEvents,
     storePrompt,
diff --git a/src/stores/firebaseAuthStore.test.ts b/src/stores/firebaseAuthStore.test.ts
index bbad43264..54beac934 100644
--- a/src/stores/firebaseAuthStore.test.ts
+++ b/src/stores/firebaseAuthStore.test.ts
@@ -82,6 +82,21 @@ vi.mock('@/stores/toastStore', () => ({
 // Mock useDialogService
 vi.mock('@/services/dialogService')
 
+const mockDistributionTypes = vi.hoisted(() => ({
+  isCloud: false,
+  isDesktop: false
+}))
+
+vi.mock('@/platform/distribution/types', () => mockDistributionTypes)
+
+const mockApiKeyStore = vi.hoisted(() => ({
+  getAuthHeader: vi.fn().mockReturnValue(null)
+}))
+
+vi.mock('@/stores/apiKeyAuthStore', () => ({
+  useApiKeyAuthStore: () => mockApiKeyStore
+}))
+
 describe('useFirebaseAuthStore', () => {
   let store: ReturnType<typeof useFirebaseAuthStore>
   let authStateCallback: (user: any) => void
@@ -147,12 +162,9 @@ describe('useFirebaseAuthStore', () => {
   })
 
   describe('token refresh events', () => {
-    beforeEach(async () => {
-      vi.resetModules()
-      vi.doMock('@/platform/distribution/types', () => ({
-        isCloud: true,
-        isDesktop: true
-      }))
+    beforeEach(() => {
+      mockDistributionTypes.isCloud = true
+      mockDistributionTypes.isDesktop = true
 
       vi.mocked(firebaseAuth.onIdTokenChanged).mockImplementation(
         (_auth, callback) => {
@@ -164,8 +176,7 @@ describe('useFirebaseAuthStore', () => {
       vi.mocked(vuefire.useFirebaseAuth).mockReturnValue(mockAuth as any)
 
       setActivePinia(createPinia())
-      const storeModule = await import('@/stores/firebaseAuthStore')
-      store = storeModule.useFirebaseAuthStore()
+      store = useFirebaseAuthStore()
     })
 
     it("should not increment tokenRefreshTrigger on the user's first ID token event", () => {
@@ -442,13 +453,8 @@ describe('useFirebaseAuthStore', () => {
       // This test reproduces the issue where getAuthHeader fails due to network errors
       // when Firebase Auth tries to refresh tokens offline
 
-      // Mock useApiKeyAuthStore to return null (no API key fallback)
-      const mockApiKeyStore = {
-        getAuthHeader: vi.fn().mockReturnValue(null)
-      }
-      vi.doMock('@/stores/apiKeyAuthStore', () => ({
-        useApiKeyAuthStore: () => mockApiKeyStore
-      }))
+      // Configure mockApiKeyStore to return null (no API key fallback)
+      mockApiKeyStore.getAuthHeader.mockReturnValue(null)
 
       // Setup user with network error on token refresh
       mockUser.getIdToken.mockReset()
diff --git a/src/stores/firebaseAuthStore.ts b/src/stores/firebaseAuthStore.ts
index baa1840a8..6073a4304 100644
--- a/src/stores/firebaseAuthStore.ts
+++ b/src/stores/firebaseAuthStore.ts
@@ -25,12 +25,12 @@ import { getComfyApiBaseUrl } from '@/config/comfyApi'
 import { t } from '@/i18n'
 import { WORKSPACE_STORAGE_KEYS } from '@/platform/auth/workspace/workspaceConstants'
 import { isCloud } from '@/platform/distribution/types'
-import { remoteConfig } from '@/platform/remoteConfig/remoteConfig'
 import { useTelemetry } from '@/platform/telemetry'
 import { useDialogService } from '@/services/dialogService'
 import { useApiKeyAuthStore } from '@/stores/apiKeyAuthStore'
 import type { AuthHeader } from '@/types/authTypes'
 import type { operations } from '@/types/comfyRegistryTypes'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
 
 type CreditPurchaseResponse =
   operations['InitiateCreditPurchase']['responses']['201']['content']['application/json']
@@ -58,6 +58,8 @@ export class FirebaseAuthStoreError extends Error {
 }
 
 export const useFirebaseAuthStore = defineStore('firebaseAuth', () => {
+  const { flags } = useFeatureFlags()
+
   // State
   const loading = ref(false)
   const currentUser = ref<User | null>(null)
@@ -173,7 +175,7 @@ export const useFirebaseAuthStore = defineStore('firebaseAuth', () => {
    *   - null if no authentication method is available
    */
   const getAuthHeader = async (): Promise<AuthHeader | null> => {
-    if (remoteConfig.value.team_workspaces_enabled) {
+    if (flags.teamWorkspacesEnabled) {
       const workspaceToken = sessionStorage.getItem(
         WORKSPACE_STORAGE_KEYS.TOKEN
       )
@@ -201,10 +203,19 @@ export const useFirebaseAuthStore = defineStore('firebaseAuth', () => {
     return useApiKeyAuthStore().getAuthHeader()
   }
 
+  /**
+   * Returns Firebase auth header for user-scoped endpoints (e.g., /customers/*).
+   * Use this for endpoints that need user identity, not workspace context.
+   */
+  const getFirebaseAuthHeader = async (): Promise<AuthHeader | null> => {
+    const token = await getIdToken()
+    return token ? { Authorization: `Bearer ${token}` } : null
+  }
+
   const fetchBalance = async (): Promise<GetCustomerBalanceResponse | null> => {
     isFetchingBalance.value = true
     try {
-      const authHeader = await getAuthHeader()
+      const authHeader = await getFirebaseAuthHeader()
       if (!authHeader) {
         throw new FirebaseAuthStoreError(
           t('toastMessages.userNotAuthenticated')
@@ -242,7 +253,7 @@ export const useFirebaseAuthStore = defineStore('firebaseAuth', () => {
   }
 
   const createCustomer = async (): Promise<CreateCustomerResponse> => {
-    const authHeader = await getAuthHeader()
+    const authHeader = await getFirebaseAuthHeader()
     if (!authHeader) {
       throw new FirebaseAuthStoreError(t('toastMessages.userNotAuthenticated'))
     }
@@ -404,7 +415,7 @@ export const useFirebaseAuthStore = defineStore('firebaseAuth', () => {
   const addCredits = async (
     requestBodyContent: CreditPurchasePayload
   ): Promise<CreditPurchaseResponse> => {
-    const authHeader = await getAuthHeader()
+    const authHeader = await getFirebaseAuthHeader()
     if (!authHeader) {
       throw new FirebaseAuthStoreError(t('toastMessages.userNotAuthenticated'))
     }
@@ -444,21 +455,19 @@ export const useFirebaseAuthStore = defineStore('firebaseAuth', () => {
   const accessBillingPortal = async (
     targetTier?: BillingPortalTargetTier
   ): Promise<AccessBillingPortalResponse> => {
-    const authHeader = await getAuthHeader()
+    const authHeader = await getFirebaseAuthHeader()
     if (!authHeader) {
       throw new FirebaseAuthStoreError(t('toastMessages.userNotAuthenticated'))
     }
 
-    const requestBody = targetTier ? { target_tier: targetTier } : undefined
-
     const response = await fetch(buildApiUrl('/customers/billing'), {
       method: 'POST',
       headers: {
         ...authHeader,
         'Content-Type': 'application/json'
       },
-      ...(requestBody && {
-        body: JSON.stringify(requestBody)
+      ...(targetTier && {
+        body: JSON.stringify({ target_tier: targetTier })
       })
     })
 
@@ -503,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/stores/queueStore.ts b/src/stores/queueStore.ts
index 1c72e27d8..c302a1076 100644
--- a/src/stores/queueStore.ts
+++ b/src/stores/queueStore.ts
@@ -493,6 +493,9 @@ export const useQueueStore = defineStore('queue', () => {
   )
 
   const hasPendingTasks = computed<boolean>(() => pendingTasks.value.length > 0)
+  const activeJobsCount = computed(
+    () => pendingTasks.value.length + runningTasks.value.length
+  )
 
   const update = async () => {
     isLoading.value = true
@@ -572,6 +575,7 @@ export const useQueueStore = defineStore('queue', () => {
     flatTasks,
     lastHistoryQueueIndex,
     hasPendingTasks,
+    activeJobsCount,
 
     update,
     clear,
diff --git a/src/stores/workspaceAuthStore.ts b/src/stores/workspaceAuthStore.ts
index 33e57fdea..a55399399 100644
--- a/src/stores/workspaceAuthStore.ts
+++ b/src/stores/workspaceAuthStore.ts
@@ -8,11 +8,11 @@ import {
   TOKEN_REFRESH_BUFFER_MS,
   WORKSPACE_STORAGE_KEYS
 } from '@/platform/auth/workspace/workspaceConstants'
-import { remoteConfig } from '@/platform/remoteConfig/remoteConfig'
 import { api } from '@/scripts/api'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
 import type { AuthHeader } from '@/types/authTypes'
 import type { WorkspaceWithRole } from '@/platform/auth/workspace/workspaceTypes'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
 
 const WorkspaceWithRoleSchema = z.object({
   id: z.string(),
@@ -44,6 +44,8 @@ export class WorkspaceAuthError extends Error {
 }
 
 export const useWorkspaceAuthStore = defineStore('workspaceAuth', () => {
+  const { flags } = useFeatureFlags()
+
   // State
   const currentWorkspace = shallowRef<WorkspaceWithRole | null>(null)
   const workspaceToken = ref<string | null>(null)
@@ -120,7 +122,7 @@ export const useWorkspaceAuthStore = defineStore('workspaceAuth', () => {
   }
 
   function initializeFromSession(): boolean {
-    if (!remoteConfig.value.team_workspaces_enabled) {
+    if (!flags.teamWorkspacesEnabled) {
       return false
     }
 
@@ -164,7 +166,7 @@ export const useWorkspaceAuthStore = defineStore('workspaceAuth', () => {
   }
 
   async function switchWorkspace(workspaceId: string): Promise<void> {
-    if (!remoteConfig.value.team_workspaces_enabled) {
+    if (!flags.teamWorkspacesEnabled) {
       return
     }
 
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/types/navTypes.ts b/src/types/navTypes.ts
index ec17c5cec..d38865ab6 100644
--- a/src/types/navTypes.ts
+++ b/src/types/navTypes.ts
@@ -2,6 +2,7 @@ export interface NavItemData {
   id: string
   label: string
   icon: string
+  badge?: string | number
 }
 
 export interface NavGroupData {
diff --git a/src/utils/__tests__/litegraphTestUtils.ts b/src/utils/__tests__/litegraphTestUtils.ts
new file mode 100644
index 000000000..e43aa5930
--- /dev/null
+++ b/src/utils/__tests__/litegraphTestUtils.ts
@@ -0,0 +1,205 @@
+import type {
+  INodeInputSlot,
+  INodeOutputSlot,
+  Positionable
+} from '@/lib/litegraph/src/interfaces'
+import { Rectangle } from '@/lib/litegraph/src/infrastructure/Rectangle'
+import type {
+  CanvasPointerEvent,
+  LGraph,
+  LGraphCanvas,
+  LGraphGroup,
+  LinkNetwork
+} from '@/lib/litegraph/src/litegraph'
+import { LGraphEventMode, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { vi } from 'vitest'
+
+/**
+ * Creates a mock LGraphNode with minimal required properties
+ */
+export function createMockLGraphNode(
+  overrides: Partial<LGraphNode> | Record<string, unknown> = {}
+): LGraphNode {
+  const partial: Partial<LGraphNode> = {
+    id: 1,
+    pos: [0, 0],
+    size: [100, 100],
+    title: 'Test Node',
+    mode: LGraphEventMode.ALWAYS,
+    ...(overrides as Partial<LGraphNode>)
+  }
+  return partial as Partial<LGraphNode> as LGraphNode
+}
+
+/**
+ * Creates a mock Positionable object
+ */
+export function createMockPositionable(
+  overrides: Partial<Positionable> = {}
+): Positionable {
+  const partial: Partial<Positionable> = {
+    id: 1,
+    pos: [0, 0],
+    ...overrides
+  }
+  return partial as Partial<Positionable> as Positionable
+}
+
+/**
+ * Creates a mock LGraphGroup with minimal required properties
+ */
+export function createMockLGraphGroup(
+  overrides: Partial<LGraphGroup> = {}
+): LGraphGroup {
+  const partial: Partial<LGraphGroup> = {
+    id: 1,
+    pos: [0, 0],
+    boundingRect: new Rectangle(0, 0, 100, 100),
+    ...overrides
+  }
+  return partial as Partial<LGraphGroup> as LGraphGroup
+}
+
+/**
+ * Creates a mock SubgraphNode with sub-nodes
+ */
+export function createMockSubgraphNode(
+  subNodes: LGraphNode[],
+  overrides: Partial<LGraphNode> | Record<string, unknown> = {}
+): LGraphNode {
+  const baseNode = createMockLGraphNode(overrides)
+  return Object.assign(baseNode, {
+    isSubgraphNode: () => true,
+    subgraph: {
+      nodes: subNodes
+    }
+  })
+}
+
+/**
+ * Creates a mock LGraphCanvas with minimal required properties for testing
+ */
+export function createMockCanvas(
+  overrides: Partial<LGraphCanvas> = {}
+): LGraphCanvas {
+  return {
+    setDirty: vi.fn(),
+    state: {
+      selectionChanged: false
+    },
+    ...overrides
+  } as LGraphCanvas
+}
+
+/**
+ * Creates a mock LGraph with trigger function
+ */
+export function createMockLGraph(overrides: Partial<LGraph> = {}): LGraph {
+  return {
+    trigger: vi.fn(),
+    ...overrides
+  } as LGraph
+}
+
+/**
+ * Creates a mock CanvasPointerEvent
+ */
+export function createMockCanvasPointerEvent(
+  canvasX: number,
+  canvasY: number,
+  overrides: Partial<CanvasPointerEvent> = {}
+): CanvasPointerEvent {
+  return {
+    canvasX,
+    canvasY,
+    ...overrides
+  } as CanvasPointerEvent
+}
+
+/**
+ * Creates a mock CanvasRenderingContext2D
+ */
+export function createMockCanvasRenderingContext2D(
+  overrides: Partial<CanvasRenderingContext2D> = {}
+): CanvasRenderingContext2D {
+  const partial: Partial<CanvasRenderingContext2D> = {
+    measureText: vi.fn(() => ({ width: 10 }) as TextMetrics),
+    ...overrides
+  }
+  return partial as CanvasRenderingContext2D
+}
+
+/**
+ * Creates a mock LinkNetwork
+ */
+export function createMockLinkNetwork(
+  overrides: Partial<LinkNetwork> = {}
+): LinkNetwork {
+  return {
+    ...overrides
+  } as LinkNetwork
+}
+
+/**
+ * Creates a mock INodeInputSlot
+ */
+export function createMockNodeInputSlot(
+  overrides: Partial<INodeInputSlot> = {}
+): INodeInputSlot {
+  return {
+    ...overrides
+  } as INodeInputSlot
+}
+
+/**
+ * Creates a mock INodeOutputSlot
+ */
+export function createMockNodeOutputSlot(
+  overrides: Partial<INodeOutputSlot> = {}
+): INodeOutputSlot {
+  return {
+    ...overrides
+  } as INodeOutputSlot
+}
+
+/**
+ * Creates a real LGraphNode instance (not a lightweight mock) with its boundingRect
+ * property represented as a Float64Array for testing position methods.
+ *
+ * Use createMockLGraphNodeWithArrayBoundingRect when:
+ * - Tests rely on Float64Array boundingRect behavior
+ * - Tests call position-related methods like updateArea()
+ * - Tests need actual LGraphNode implementation details
+ *
+ * Use createMockLGraphNode when:
+ * - Tests only need simple/mock-only behavior
+ * - Tests don't depend on boundingRect being a Float64Array
+ * - A lightweight mock with minimal properties is sufficient
+ *
+ * @param name - The node name/type to pass to the LGraphNode constructor
+ * @returns A fully constructed LGraphNode instance with Float64Array boundingRect
+ */
+export function createMockLGraphNodeWithArrayBoundingRect(
+  name: string
+): LGraphNode {
+  const node = new LGraphNode(name)
+  // The actual node has a Float64Array boundingRect, we just need to type it correctly
+  return node
+}
+
+/**
+ * Creates a mock FileList from an array of files
+ */
+export function createMockFileList(files: File[]): FileList {
+  const fileList = Object.assign(
+    {
+      length: files.length,
+      item: (index: number) => files[index] ?? null,
+      [Symbol.iterator]: function* () {
+        yield* files
+      }
+    },
+    files
+  )
+  return fileList as FileList
+}
diff --git a/src/utils/queueUtil.ts b/src/utils/queueUtil.ts
index cf9f47b6b..81931012d 100644
--- a/src/utils/queueUtil.ts
+++ b/src/utils/queueUtil.ts
@@ -1,6 +1,15 @@
 import type { TaskItemImpl } from '@/stores/queueStore'
 import type { JobState } from '@/types/queue'
 
+/**
+ * Checks if a job state represents an active (in-progress) job.
+ */
+export function isActiveJobState(state: JobState): boolean {
+  return (
+    state === 'pending' || state === 'initialization' || state === 'running'
+  )
+}
+
 /**
  * Map a task to a UI job state, including initialization override.
  *
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
diff --git a/src/workbench/extensions/manager/components/manager/ManagerDialog.vue b/src/workbench/extensions/manager/components/manager/ManagerDialog.vue
index ad7657645..887243315 100644
--- a/src/workbench/extensions/manager/components/manager/ManagerDialog.vue
+++ b/src/workbench/extensions/manager/components/manager/ManagerDialog.vue
@@ -4,15 +4,12 @@
     :content-title="$t('manager.discoverCommunityContent')"
     class="manager-dialog"
   >
+    <template #leftPanelHeaderTitle>
+      <i class="icon-[lucide--puzzle]" />
+      <h2 class="text-neutral text-base">{{ $t('manager.title') }}</h2>
+    </template>
     <template #leftPanel>
-      <LeftSidePanel v-model="selectedNavId" :nav-items="navItems">
-        <template #header-icon>
-          <i class="icon-[lucide--puzzle]" />
-        </template>
-        <template #header-title>
-          <span class="text-neutral text-base">{{ $t('manager.title') }}</span>
-        </template>
-      </LeftSidePanel>
+      <LeftSidePanel v-model="selectedNavId" :nav-items="navItems" />
     </template>
 
     <template #header>
diff --git a/src/workbench/extensions/manager/components/manager/packCard/PackCard.test.ts b/src/workbench/extensions/manager/components/manager/packCard/PackCard.test.ts
index 3e5116739..b3a92e5a3 100644
--- a/src/workbench/extensions/manager/components/manager/packCard/PackCard.test.ts
+++ b/src/workbench/extensions/manager/components/manager/packCard/PackCard.test.ts
@@ -10,15 +10,22 @@ import type {
   RegistryPack
 } from '@/workbench/extensions/manager/types/comfyManagerTypes'
 
+const translateMock = vi.hoisted(() =>
+  vi.fn((key: string, choice?: number) =>
+    typeof choice === 'number' ? `${key}-${choice}` : key
+  )
+)
+const dateMock = vi.hoisted(() => vi.fn(() => '2024. 1. 1.'))
+
 // Mock dependencies
 vi.mock('vue-i18n', () => ({
   useI18n: vi.fn(() => ({
-    d: vi.fn(() => '2024. 1. 1.'),
-    t: vi.fn((key: string) => key)
+    d: dateMock,
+    t: translateMock
   })),
   createI18n: vi.fn(() => ({
     global: {
-      t: vi.fn((key: string) => key),
+      t: translateMock,
       te: vi.fn(() => true)
     }
   }))
@@ -187,6 +194,18 @@ describe('PackCard', () => {
       // Should still render without errors
       expect(wrapper.exists()).toBe(true)
     })
+
+    it('should use localized singular/plural nodes label', () => {
+      const packWithNodes = {
+        ...mockNodePack,
+        comfy_nodes: ['node-a']
+      } as MergedNodePack
+
+      const wrapper = createWrapper({ nodePack: packWithNodes })
+
+      expect(wrapper.text()).toContain('g.nodesCount-1')
+      expect(translateMock).toHaveBeenCalledWith('g.nodesCount', 1)
+    })
   })
 
   describe('component structure', () => {
diff --git a/src/workbench/extensions/manager/components/manager/packCard/PackCard.vue b/src/workbench/extensions/manager/components/manager/packCard/PackCard.vue
index 6900e71df..17ffdd102 100644
--- a/src/workbench/extensions/manager/components/manager/packCard/PackCard.vue
+++ b/src/workbench/extensions/manager/components/manager/packCard/PackCard.vue
@@ -36,8 +36,8 @@
           </p>
           <div class="flex flex-col gap-y-2">
             <div class="flex flex-1 items-center gap-2">
-              <div v-if="nodesCount" class="p-2 pl-0 text-xs">
-                {{ nodesCount }} {{ $t('g.nodes') }}
+              <div v-if="nodesLabel" class="p-2 pl-0 text-xs">
+                {{ nodesLabel }}
               </div>
               <PackVersionBadge
                 :node-pack="nodePack"
@@ -94,7 +94,7 @@ const { nodePack, isSelected = false } = defineProps<{
   isSelected?: boolean
 }>()
 
-const { d } = useI18n()
+const { d, t } = useI18n()
 
 const colorPaletteStore = useColorPaletteStore()
 const isLightTheme = computed(
@@ -115,6 +115,9 @@ const isDisabled = computed(
 const nodesCount = computed(() =>
   isMergedNodePack(nodePack) ? nodePack.comfy_nodes?.length : undefined
 )
+const nodesLabel = computed(() =>
+  nodesCount.value ? t('g.nodesCount', nodesCount.value) : ''
+)
 const publisherName = computed(() => {
   if (!nodePack) return null
 
diff --git a/src/workbench/extensions/manager/utils/versionUtil.test.ts b/src/workbench/extensions/manager/utils/versionUtil.test.ts
index d1127368a..a9eacfc9d 100644
--- a/src/workbench/extensions/manager/utils/versionUtil.test.ts
+++ b/src/workbench/extensions/manager/utils/versionUtil.test.ts
@@ -1,15 +1,16 @@
-import { describe, expect, it, vi } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import {
   checkVersionCompatibility,
   getFrontendVersion
 } from '@/workbench/extensions/manager/utils/versionUtil'
 
-// Mock config module
+const mockConfig = vi.hoisted((): { app_version: string | undefined } => ({
+  app_version: '1.24.0-1'
+}))
+
 vi.mock('@/config', () => ({
-  default: {
-    app_version: '1.24.0-1'
-  }
+  default: mockConfig
 }))
 
 describe('versionUtil', () => {
@@ -266,79 +267,40 @@ describe('versionUtil', () => {
   })
 
   describe('getFrontendVersion', () => {
+    let originalEnv: string | undefined
+
+    beforeEach(() => {
+      originalEnv = import.meta.env.VITE_APP_VERSION
+      mockConfig.app_version = '1.24.0-1'
+    })
+
+    afterEach(() => {
+      if (originalEnv !== undefined) {
+        import.meta.env.VITE_APP_VERSION = originalEnv
+      } else {
+        delete import.meta.env.VITE_APP_VERSION
+      }
+    })
+
     it('should return app_version from config when available', () => {
       const version = getFrontendVersion()
       expect(version).toBe('1.24.0-1')
     })
 
-    it('should fallback to VITE_APP_VERSION when app_version is not available', async () => {
-      // Save original environment
-      const originalEnv = import.meta.env.VITE_APP_VERSION
-
-      // Mock config without app_version
-      vi.doMock('@/config', () => ({
-        default: {}
-      }))
-
-      // Set VITE_APP_VERSION
+    it('should fallback to VITE_APP_VERSION when app_version is not available', () => {
+      mockConfig.app_version = undefined
       import.meta.env.VITE_APP_VERSION = '2.0.0'
 
-      // Clear module cache to force re-import
-      vi.resetModules()
-
-      // Import fresh module
-      const versionUtil =
-        await import('@/workbench/extensions/manager/utils/versionUtil')
-
-      const version = versionUtil.getFrontendVersion()
+      const version = getFrontendVersion()
       expect(version).toBe('2.0.0')
-
-      // Restore original env
-      import.meta.env.VITE_APP_VERSION = originalEnv
-
-      // Reset mocks for next test
-      vi.resetModules()
-      vi.doMock('@/config', () => ({
-        default: {
-          app_version: '1.24.0-1'
-        }
-      }))
     })
 
-    it('should return undefined when no version is available', async () => {
-      // Save original environment
-      const originalEnv = import.meta.env.VITE_APP_VERSION
-
-      // Mock config without app_version
-      vi.doMock('@/config', () => ({
-        default: {}
-      }))
-
-      // Clear VITE_APP_VERSION
+    it('should return undefined when no version is available', () => {
+      mockConfig.app_version = undefined
       delete import.meta.env.VITE_APP_VERSION
 
-      // Clear module cache to force re-import
-      vi.resetModules()
-
-      // Import fresh module
-      const versionUtil =
-        await import('@/workbench/extensions/manager/utils/versionUtil')
-
-      const version = versionUtil.getFrontendVersion()
+      const version = getFrontendVersion()
       expect(version).toBeUndefined()
-
-      // Restore original env
-      if (originalEnv !== undefined) {
-        import.meta.env.VITE_APP_VERSION = originalEnv
-      }
-
-      // Reset mocks for next test
-      vi.resetModules()
-      vi.doMock('@/config', () => ({
-        default: {
-          app_version: '1.24.0-1'
-        }
-      }))
     })
   })
 })
diff --git a/vite.config.mts b/vite.config.mts
index d01be687e..9769ec300 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -545,7 +545,8 @@ export default defineConfig({
       '**/dist/**',
       '**/cypress/**',
       '**/.{idea,git,cache,output,temp}/**',
-      '**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build,eslint,prettier}.config.*'
+      '**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build,eslint}.config.*',
+      '**/.{oxlintrc,oxfmtrc}.json'
     ],
     silent: 'passed-only'
   }