Readd unit test

Prevents node badges from overflowing out of the node header in vue mode
<img width="1157" height="593" alt="image"
src="https://github.com/user-attachments/assets/005e13e7-8bcc-46c4-9531-e6eba237cf60"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6516-Fix-badge-overflow-29e6d73d365081328250cbeb3ebbb670)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>

.env_example

@@ -23,10 +23,10 @@ TEST_COMFYUI_DIR=/home/ComfyUI
 # Whether to enable minification of the frontend code.
 ENABLE_MINIFY=true
 
-# Whether to disable proxying the `/templates` route. If true, allows you to 
-# serve templates from the ComfyUI_frontend/public/templates folder (for 
-# locally testing changes to templates). When false or nonexistent, the 
-# templates are served via the normal method from the server's python site 
+# Whether to disable proxying the `/templates` route. If true, allows you to
+# serve templates from the ComfyUI_frontend/public/templates folder (for
+# locally testing changes to templates). When false or nonexistent, the
+# templates are served via the normal method from the server's python site
 # packages.
 DISABLE_TEMPLATES_PROXY=false
 
@@ -37,3 +37,8 @@ DISABLE_VUE_PLUGINS=false
 # Algolia credentials required for developing with the new custom node manager.
 ALGOLIA_APP_ID=4E0RO38HS8
 ALGOLIA_API_KEY=684d998c36b67a9a9fce8fc2d8860579
+
+# Sentry ENV vars replace with real ones for debugging
+# SENTRY_AUTH_TOKEN=private-token # get from sentry
+# SENTRY_ORG=comfy-org
+# SENTRY_PROJECT=cloud-frontend-staging

.github/workflows/weekly-docs-check.yaml

@@ -132,7 +132,7 @@ jobs:
         if: steps.check_changes.outputs.has_changes == 'true'
         uses: peter-evans/create-pull-request@v7
         with:
-          token: ${{ secrets.GITHUB_TOKEN }}
+          token: ${{ secrets.PR_GH_TOKEN }}
           commit-message: 'docs: weekly documentation accuracy update'
           branch: docs/weekly-update
           delete-branch: true
@@ -142,4 +142,3 @@ jobs:
             documentation
             automated
           draft: true
-          assignees: ${{ github.repository_owner }}

.gitignore

@@ -92,3 +92,6 @@ storybook-static
 .github/instructions/nx.instructions.md
 vite.config.*.timestamp*
 vitest.config.*.timestamp*
+
+# Weekly docs check output
+/output.txt

browser_tests/fixtures/utils/litegraphUtils.ts

@@ -503,7 +503,7 @@ export class NodeReference {
       for (const position of clickPositions) {
         // Clear any selection first
         await this.comfyPage.canvas.click({
-          position: { x: 50, y: 50 },
+          position: { x: 250, y: 250 },
           force: true
         })
         await this.comfyPage.nextFrame()

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.31.1",
+  "version": "1.32.0",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -43,7 +43,8 @@
     "test:browser": "pnpm exec nx e2e",
     "test:unit": "nx run test",
     "typecheck": "vue-tsc --noEmit",
-    "zipdist": "node scripts/zipdist.js"
+    "zipdist": "node scripts/zipdist.js",
+    "clean": "nx reset"
   },
   "devDependencies": {
     "@eslint/js": "catalog:",
@@ -56,6 +57,7 @@
     "@pinia/testing": "catalog:",
     "@playwright/test": "catalog:",
     "@prettier/plugin-oxc": "catalog:",
+    "@sentry/vite-plugin": "catalog:",
     "@storybook/addon-docs": "catalog:",
     "@storybook/vue3": "catalog:",
     "@storybook/vue3-vite": "catalog:",

packages/design-system/src/css/style.css

@@ -49,27 +49,42 @@
   --color-smoke-800: #8a8a8a;
 
   --color-sand-100: #e1ded5;
-  --color-sand-200: #d6cfc2;
+  --color-sand-200: #fff7d5;
   --color-sand-300: #888682;
+  --color-sand-400: #eed7ac;
 
   --color-slate-100: #9c9eab;
   --color-slate-200: #9fa2bd;
   --color-slate-300: #5b5e7d;
 
+  --color-white: #ffffff;
+  --color-black: #000000;
+
   --color-electric-400: #f0ff41;
   --color-sapphire-700: #172dd7;
   --color-brand-yellow: var(--color-electric-400);
   --color-brand-blue: var(--color-sapphire-700);
 
+  --color-azure-300: #78bae9;
   --color-azure-400: #31b9f4;
   --color-azure-600: #0b8ce9;
 
+  --color-cobalt-800: #185a8b;
+
   --color-jade-400: #47e469;
   --color-jade-600: #00cd72;
 
   --color-gold-400: #fcbf64;
+  --color-gold-500: #fdab34;
   --color-gold-600: #fd9903;
 
+  --color-coral-500: #f75951;
+  --color-coral-600: #e04e48;
+  --color-coral-700: #b33a3a;
+
+  --color-magenta-300: #ceaac9;
+  --color-magenta-700: #6a246a;
+
   --color-danger-100: #c02323;
   --color-danger-200: #d62952;
 
@@ -101,6 +116,11 @@
     var(--color-smoke-500) 50%,
     transparent
   );
+  --color-alpha-smoke-500-20: #c5c5c533;
+  --color-alpha-smoke-400-40: #d9d9d966;
+  --color-alpha-azure-600-30: #0b8ce94d;
+  --color-alpha-magenta-700-60: #6a246a99;
+  --color-alpha-magenta-300-60: #ceaac999;
 
   /* PrimeVue pulled colors */
   --color-muted: var(--p-text-muted-color);
@@ -137,6 +157,10 @@
   --button-surface: var(--color-white);
   --button-surface-contrast: var(--color-black);
 
+  --subscription-button-gradient: linear-gradient(315deg, rgb(105 230 255 / 0.15) 0%, rgb(99 73 233 / 0.50) 100%), radial-gradient(70.71% 70.71% at 50% 50%, rgb(62 99 222 / 0.15) 0.01%, rgb(66 0 123 / 0.50) 100%), linear-gradient(92deg, #D000FF 0.38%, #B009FE 37.07%, #3E1FFC 65.17%, #009DFF 103.86%), var(--color-button-surface, #2D2E32);
+
+  --modal-card-button-surface: var(--color-smoke-300);
+
   /* Code styling colors for help menu*/
   --code-text-color: rgb(0 122 255 / 1);
   --code-bg-color: rgb(96 165 250 / 0.2);
@@ -196,6 +220,27 @@
   --text-secondary: var(--color-ash-500);
   --text-primary: var(--color-charcoal-700);
   --input-surface: rgb(0 0 0 / 0.15);
+
+  /* Semantic tokens - light mode */
+  --muted-foreground: var(--color-charcoal-200);
+  --base-foreground: var(--color-charcoal-800);
+  --brand-yellow: var(--color-electric-400);
+  --brand-blue: var(--color-sapphire-700);
+  --secondary-background: var(--color-smoke-200);
+  --secondary-background-hover: var(--color-smoke-400);
+  --secondary-background-selected: var(--color-smoke-600);
+  --base-background: var(--color-white);
+  --primary-background: var(--color-azure-400);
+  --primary-background-hover: var(--color-cobalt-800);
+  --destructive-background: var(--color-coral-500);
+  --destructive-background-hover: var(--color-coral-600);
+  --inverted-background-hover: var(--color-charcoal-600);
+  --warning-background: var(--color-gold-400);
+  --warning-background-hover: var(--color-gold-500);
+  --border-default: var(--color-smoke-600);
+  --border-subtle: var(--color-smoke-400);
+  --muted-background: var(--color-smoke-700);
+  --accent-background: var(--color-smoke-800);
 }
 
 .dark-theme {
@@ -215,6 +260,10 @@
   --button-active-surface: var(--color-charcoal-600);
   --button-icon: var(--color-smoke-800);
 
+  --subscription-button-gradient: linear-gradient(315deg, rgb(105 230 255 / 0.15) 0%, rgb(99 73 233 / 0.50) 100%), radial-gradient(70.71% 70.71% at 50% 50%, rgb(62 99 222 / 0.15) 0.01%, rgb(66 0 123 / 0.50) 100%), linear-gradient(92deg, #D000FF 0.38%, #B009FE 37.07%, #3E1FFC 65.17%, #009DFF 103.86%), var(--color-button-surface, #2D2E32);
+
+  --modal-card-button-surface: var(--color-charcoal-300);
+
   --dialog-surface: var(--color-neutral-700);
 
   --interface-menu-component-surface-hovered: var(--color-charcoal-400);
@@ -257,6 +306,27 @@
   --text-primary: var(--color-white);
 
   --input-surface: rgb(130 130 130 / 0.1);
+
+  /* Semantic tokens - dark mode */
+  --muted-foreground: var(--color-smoke-800);
+  --base-foreground: var(--color-white);
+  --brand-yellow: var(--color-electric-400);
+  --brand-blue: var(--color-sapphire-700);
+  --secondary-background: var(--color-charcoal-600);
+  --secondary-background-hover: var(--color-charcoal-400);
+  --secondary-background-selected: var(--color-charcoal-200);
+  --base-background: var(--color-charcoal-800);
+  --primary-background: var(--color-azure-600);
+  --primary-background-hover: var(--color-azure-400);
+  --destructive-background: var(--color-coral-700);
+  --destructive-background-hover: var(--color-coral-600);
+  --inverted-background-hover: var(--color-smoke-200);
+  --warning-background: var(--color-gold-600);
+  --warning-background-hover: var(--color-gold-500);
+  --border-default: var(--color-charcoal-200);
+  --border-subtle: var(--color-charcoal-300);
+  --muted-background: var(--color-charcoal-100);
+  --accent-background: var(--color-charcoal-100);
 }
 
 @theme inline {
@@ -266,6 +336,8 @@
   --color-button-icon: var(--button-icon);
   --color-button-surface: var(--button-surface);
   --color-button-surface-contrast: var(--button-surface-contrast);
+  --color-subscription-button-gradient: var(--subscription-button-gradient);
+  --color-modal-card-button-surface: var(--modal-card-button-surface);
   --color-dialog-surface: var(--dialog-surface);
   --color-interface-menu-component-surface-hovered: var(
     --interface-menu-component-surface-hovered
@@ -321,6 +393,27 @@
   --color-text-secondary: var(--text-secondary);
   --color-text-primary: var(--text-primary);
   --color-input-surface: var(--input-surface);
+
+  /* Semantic tokens */
+  --color-base-foreground: var(--base-foreground);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-base-background: var(--base-background);
+  --color-secondary-background: var(--secondary-background);
+  --color-secondary-background-hover: var(--secondary-background-hover);
+  --color-secondary-background-selected: var(--secondary-background-selected);
+  --color-primary-background: var(--primary-background);
+  --color-primary-background-hover: var(--primary-background-hover);
+  --color-destructive-background: var(--destructive-background);
+  --color-destructive-background-hover: var(--destructive-background-hover);
+  --color-inverted-background-hover: var(--inverted-background-hover);
+  --color-warning-background: var(--warning-background);
+  --color-warning-background-hover: var(--warning-background-hover);
+  --color-border-default: var(--border-default);
+  --color-border-subtle: var(--border-subtle);
+  --color-muted-background: var(--muted-background);
+  --color-accent-background: var(--accent-background);
+  --color-brand-yellow: var(--brand-yellow);
+  --color-brand-blue: var(--brand-blue);
 }
 
 @custom-variant dark-theme {
@@ -1110,31 +1203,6 @@ audio.comfy-audio.empty-audio-widget {
   padding: var(--comfy-tree-explorer-item-padding) !important;
 }
 
-/* Load3d styles */
-.comfy-load-3d,
-.comfy-load-3d-animation,
-.comfy-preview-3d,
-.comfy-preview-3d-animation {
-  display: flex;
-  flex-direction: column;
-  background: transparent;
-  flex: 1;
-  position: relative;
-  overflow: hidden;
-}
-
-.comfy-load-3d canvas,
-.comfy-load-3d-animation canvas,
-.comfy-preview-3d canvas,
-.comfy-preview-3d-animation canvas,
-.comfy-load-3d-viewer canvas {
-  display: flex;
-  width: 100% !important;
-  height: 100% !important;
-}
-
-/* End of Load3d styles */
-
 /* [Desktop] Electron window specific styles */
 .app-drag {
   app-region: drag;

packages/design-system/src/icons/image-ai-edit.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 9.99996L11.9427 7.94263C11.6926 7.69267 11.3536 7.55225 11 7.55225C10.6464 7.55225 10.3074 7.69267 10.0573 7.94263L9 9M8 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V8" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.51377 12.671L4.77612 14.3921C4.67222 14.6346 4.32853 14.6346 4.22463 14.3921L3.48699 12.671C3.45664 12.6002 3.40022 12.5437 3.32942 12.5134L1.60825 11.7757C1.36581 11.6718 1.36581 11.3282 1.60825 11.2243L3.32942 10.4866C3.40022 10.4563 3.45664 10.3998 3.48699 10.329L4.22463 8.60787C4.32853 8.36544 4.67222 8.36544 4.77612 8.60787L5.51377 10.329C5.54411 10.3998 5.60053 10.4563 5.67134 10.4866L7.39251 11.2243C7.63494 11.3282 7.63494 11.6718 7.39251 11.7757L5.67134 12.5134C5.60053 12.5437 5.54411 12.6002 5.51377 12.671Z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+<path d="M5 5H5.0001" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+</svg>

packages/shared-frontend-utils/src/formatUtil.ts

@@ -474,3 +474,68 @@ export function formatDuration(milliseconds: number): string {
 
   return parts.join(' ')
 }
+
+const IMAGE_EXTENSIONS = ['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp'] as const
+const VIDEO_EXTENSIONS = ['mp4', 'webm', 'mov', 'avi'] as const
+const AUDIO_EXTENSIONS = ['mp3', 'wav', 'ogg', 'flac'] as const
+const THREE_D_EXTENSIONS = ['obj', 'fbx', 'gltf', 'glb'] as const
+
+const MEDIA_TYPES = ['image', 'video', 'audio', '3D'] as const
+type MediaType = (typeof MEDIA_TYPES)[number]
+
+// Type guard helper for checking array membership
+type ImageExtension = (typeof IMAGE_EXTENSIONS)[number]
+type VideoExtension = (typeof VIDEO_EXTENSIONS)[number]
+type AudioExtension = (typeof AUDIO_EXTENSIONS)[number]
+type ThreeDExtension = (typeof THREE_D_EXTENSIONS)[number]
+
+/**
+ * Truncates a filename while preserving the extension
+ * @param filename The filename to truncate
+ * @param maxLength Maximum length for the filename without extension
+ * @returns Truncated filename with extension preserved
+ */
+export function truncateFilename(
+  filename: string,
+  maxLength: number = 20
+): string {
+  if (!filename || filename.length <= maxLength) {
+    return filename
+  }
+
+  const lastDotIndex = filename.lastIndexOf('.')
+  const nameWithoutExt =
+    lastDotIndex > -1 ? filename.substring(0, lastDotIndex) : filename
+  const extension = lastDotIndex > -1 ? filename.substring(lastDotIndex) : ''
+
+  // If the name without extension is short enough, return as is
+  if (nameWithoutExt.length <= maxLength) {
+    return filename
+  }
+
+  // Calculate how to split the truncation
+  const halfLength = Math.floor((maxLength - 3) / 2) // -3 for '...'
+  const start = nameWithoutExt.substring(0, halfLength)
+  const end = nameWithoutExt.substring(nameWithoutExt.length - halfLength)
+
+  return `${start}...${end}${extension}`
+}
+
+/**
+ * Determines the media type from a filename's extension (singular form)
+ * @param filename The filename to analyze
+ * @returns The media type: 'image', 'video', 'audio', or '3D'
+ */
+export function getMediaTypeFromFilename(filename: string): MediaType {
+  if (!filename) return 'image'
+  const ext = filename.split('.').pop()?.toLowerCase()
+  if (!ext) return 'image'
+
+  // Type-safe array includes check using type assertion
+  if (IMAGE_EXTENSIONS.includes(ext as ImageExtension)) return 'image'
+  if (VIDEO_EXTENSIONS.includes(ext as VideoExtension)) return 'video'
+  if (AUDIO_EXTENSIONS.includes(ext as AudioExtension)) return 'audio'
+  if (THREE_D_EXTENSIONS.includes(ext as ThreeDExtension)) return '3D'
+
+  return 'image'
+}

pnpm-lock.yaml

@@ -69,6 +69,9 @@ catalogs:
     '@primevue/themes':
       specifier: ^4.2.5
       version: 4.2.5
+    '@sentry/vite-plugin':
+      specifier: ^4.6.0
+      version: 4.6.0
     '@sentry/vue':
       specifier: ^8.48.0
       version: 8.48.0
@@ -498,6 +501,9 @@ importers:
       '@prettier/plugin-oxc':
         specifier: 'catalog:'
         version: 0.0.4
+      '@sentry/vite-plugin':
+        specifier: 'catalog:'
+        version: 4.6.0
       '@storybook/addon-docs':
         specifier: 'catalog:'
         version: 9.1.1(@types/react@19.1.9)(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))
@@ -2772,14 +2778,78 @@ packages:
     resolution: {integrity: sha512-csILVupc5RkrsTrncuUTGmlB56FQSFjXPYWG8I8yBTGlXEJ+o8oTuF6+55R4vbw3EIzBveXWi4kEBbnQlXW/eg==}
     engines: {node: '>=14.18'}
 
+  '@sentry/babel-plugin-component-annotate@4.6.0':
+    resolution: {integrity: sha512-3soTX50JPQQ51FSbb4qvNBf4z/yP7jTdn43vMTp9E4IxvJ9HKJR7OEuKkCMszrZmWsVABXl02msqO7QisePdiQ==}
+    engines: {node: '>= 14'}
+
   '@sentry/browser@8.48.0':
     resolution: {integrity: sha512-fuuVULB5/1vI8NoIwXwR3xwhJJqk+y4RdSdajExGF7nnUDBpwUJyXsmYJnOkBO+oLeEs58xaCpotCKiPUNnE3g==}
     engines: {node: '>=14.18'}
 
+  '@sentry/bundler-plugin-core@4.6.0':
+    resolution: {integrity: sha512-Fub2XQqrS258jjS8qAxLLU1k1h5UCNJ76i8m4qZJJdogWWaF8t00KnnTyp9TEDJzrVD64tRXS8+HHENxmeUo3g==}
+    engines: {node: '>= 14'}
+
+  '@sentry/cli-darwin@2.57.0':
+    resolution: {integrity: sha512-v1wYQU3BcCO+Z3OVxxO+EnaW4oQhuOza6CXeYZ0z5ftza9r0QQBLz3bcZKTVta86xraNm0z8GDlREwinyddOxQ==}
+    engines: {node: '>=10'}
+    os: [darwin]
+
+  '@sentry/cli-linux-arm64@2.57.0':
+    resolution: {integrity: sha512-Kh1jTsMV5Fy/RvB381N/woXe1qclRMqsG6kM3Gq6m6afEF/+k3PyQdNW3HXAola6d63EptokLtxPG2xjWQ+w9Q==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [linux, freebsd, android]
+
+  '@sentry/cli-linux-arm@2.57.0':
+    resolution: {integrity: sha512-uNHB8xyygqfMd1/6tFzl9NUkuVefg7jdZtM/vVCQVaF/rJLWZ++Wms+LLhYyKXKN8yd7J9wy7kTEl4Qu4jWbGQ==}
+    engines: {node: '>=10'}
+    cpu: [arm]
+    os: [linux, freebsd, android]
+
+  '@sentry/cli-linux-i686@2.57.0':
+    resolution: {integrity: sha512-EYXghoK/tKd0zqz+KD/ewXXE3u1HLCwG89krweveytBy/qw7M5z58eFvw+iGb1Vnbl1f/fRD0G4E0AbEsPfmpg==}
+    engines: {node: '>=10'}
+    cpu: [x86, ia32]
+    os: [linux, freebsd, android]
+
+  '@sentry/cli-linux-x64@2.57.0':
+    resolution: {integrity: sha512-CyZrP/ssHmAPLSzfd4ydy7icDnwmDD6o3QjhkWwVFmCd+9slSBMQxpIqpamZmrWE6X4R+xBRbSUjmdoJoZ5yMw==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [linux, freebsd, android]
+
+  '@sentry/cli-win32-arm64@2.57.0':
+    resolution: {integrity: sha512-wji/GGE4Lh5I/dNCsuVbg6fRvttvZRG6db1yPW1BSvQRh8DdnVy1CVp+HMqSq0SRy/S4z60j2u+m4yXMoCL+5g==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@sentry/cli-win32-i686@2.57.0':
+    resolution: {integrity: sha512-hWvzyD7bTPh3b55qvJ1Okg3Wbl0Km8xcL6KvS7gfBl6uss+I6RldmQTP0gJKdHSdf/QlJN1FK0b7bLnCB3wHsg==}
+    engines: {node: '>=10'}
+    cpu: [x86, ia32]
+    os: [win32]
+
+  '@sentry/cli-win32-x64@2.57.0':
+    resolution: {integrity: sha512-QWYV/Y0sbpDSTyA4XQBOTaid4a6H2Iwa1Z8UI+qNxFlk0ADSEgIqo2NrRHDU8iRnghTkecQNX1NTt/7mXN3f/A==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@sentry/cli@2.57.0':
+    resolution: {integrity: sha512-oC4HPrVIX06GvUTgK0i+WbNgIA9Zl5YEcwf9N4eWFJJmjonr2j4SML9Hn2yNENbUWDgwepy4MLod3P8rM4bk/w==}
+    engines: {node: '>= 10'}
+    hasBin: true
+
   '@sentry/core@8.48.0':
     resolution: {integrity: sha512-VGwYgTfLpvJ5LRO5A+qWo1gpo6SfqaGXL9TOzVgBucAdpzbrYHpZ87sEarDVq/4275uk1b0S293/mfsskFczyw==}
     engines: {node: '>=14.18'}
 
+  '@sentry/vite-plugin@4.6.0':
+    resolution: {integrity: sha512-fMR2d+EHwbzBa0S1fp45SNUTProxmyFBp+DeBWWQOSP9IU6AH6ea2rqrpMAnp/skkcdW4z4LSRrOEpMZ5rWXLw==}
+    engines: {node: '>= 14'}
+
   '@sentry/vue@8.48.0':
     resolution: {integrity: sha512-hqm9X7hz1vMQQB1HBYezrDBQihZk6e/MxWIG1wMJoClcBnD1Sh7y+D36UwaQlR4Gr/Ftiz+Bb0DxuAYHoUS4ow==}
     engines: {node: '>=14.18'}
@@ -3686,6 +3756,10 @@ packages:
     resolution: {integrity: sha512-4B/qKCfeE/ODUaAUpSwfzazo5x29WD4r3vXiWsB7I2mSDAihwEqKO+g8GELZUQSSAo5e1XTYh3ZVfLyxBc12nA==}
     engines: {node: '>= 10.0.0'}
 
+  agent-base@6.0.2:
+    resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
+    engines: {node: '>= 6.0.0'}
+
   agent-base@7.1.4:
     resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
     engines: {node: '>= 14'}
@@ -4959,6 +5033,9 @@ packages:
     resolution: {integrity: sha512-Xr9F6z6up6Ws+NjzMCZc6WXg2YFRlrLP9NQDO3VQrWrfiojdhS56TzueT88ze0uBdCTwEIhQ3ptnmKeWGFAe0A==}
     engines: {node: '>=14.14'}
 
+  fs.realpath@1.0.0:
+    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
+
   fsevents@2.3.2:
     resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -5039,6 +5116,10 @@ packages:
     engines: {node: 20 || >=22}
     hasBin: true
 
+  glob@9.3.5:
+    resolution: {integrity: sha512-e1LleDykUz2Iu+MTYdkSsuWX8lvAjAcs0Xef0lNIu0S2wOAzuTxCJtcd9S3cijlwYF18EsU3rzb8jPVobxDh9Q==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
   global-directory@4.0.1:
     resolution: {integrity: sha512-wHTUcDUoZ1H5/0iVqEudYW4/kAlN5cZ3j/bXn0Dpbizl9iaUVeWSHqiOjsgk6OW2bkLclbBjzewBz6weQ1zA2Q==}
     engines: {node: '>=18'}
@@ -5168,6 +5249,10 @@ packages:
     resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
     engines: {node: '>= 14'}
 
+  https-proxy-agent@5.0.1:
+    resolution: {integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==}
+    engines: {node: '>= 6'}
+
   https-proxy-agent@7.0.6:
     resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
     engines: {node: '>= 14'}
@@ -5853,6 +5938,10 @@ packages:
   magic-string@0.30.19:
     resolution: {integrity: sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==}
 
+  magic-string@0.30.8:
+    resolution: {integrity: sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==}
+    engines: {node: '>=12'}
+
   magicast@0.3.5:
     resolution: {integrity: sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ==}
 
@@ -6073,6 +6162,10 @@ packages:
     resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==}
     engines: {node: '>=10'}
 
+  minimatch@8.0.4:
+    resolution: {integrity: sha512-W0Wvr9HyFXZRGIDgCicunpQ299OKXs9RgZfaukz4qAW/pJhcpUfupc9c+OObPOFueNy8VSrZgEmDtk6Kh4WzDA==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
   minimatch@9.0.1:
     resolution: {integrity: sha512-0jWhJpD/MdhPXwPuiRkCbfYfSKp2qnn2eOc279qI7f+osl/l+prKSrvhg157zSYvx/1nmgn2NqdT6k2Z7zSH9w==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -6088,6 +6181,10 @@ packages:
   minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
 
+  minipass@4.2.8:
+    resolution: {integrity: sha512-fNzuVyifolSLFL4NzpF+wEF4qrgqaaKX0haXPQEdQ7NKAN+WecoKMHV09YcuL/DHxrUsYQOK3MiuDf7Ip2OXfQ==}
+    engines: {node: '>=8'}
+
   minipass@7.1.2:
     resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -6527,6 +6624,10 @@ packages:
   process-nextick-args@2.0.1:
     resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
 
+  progress@2.0.3:
+    resolution: {integrity: sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==}
+    engines: {node: '>=0.4.0'}
+
   promise@7.3.1:
     resolution: {integrity: sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==}
 
@@ -7426,6 +7527,9 @@ packages:
       '@nuxt/kit':
         optional: true
 
+  unplugin@1.0.1:
+    resolution: {integrity: sha512-aqrHaVBWW1JVKBHmGo33T5TxeL0qWzfvjWokObHA9bYmN7eNDkwOxmLjhioHl9878qDFMAaT51XNroRyuz7WxA==}
+
   unplugin@1.16.1:
     resolution: {integrity: sha512-4/u/j4FrCKdi17jaxuJA0jClGxB1AvU2hw/IuayPc4ay1XGaJs/rbb4v5WKwAjNifjmXK9PIFyuPiaK8azyR9w==}
     engines: {node: '>=14.0.0'}
@@ -7699,6 +7803,13 @@ packages:
     resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}
     engines: {node: '>=12'}
 
+  webpack-sources@3.3.3:
+    resolution: {integrity: sha512-yd1RBzSGanHkitROoPFd6qsrxt+oFhg/129YzheDGqeustzX0vTZJZsSsQjVQC4yzBQ56K55XU8gaNCtIzOnTg==}
+    engines: {node: '>=10.13.0'}
+
+  webpack-virtual-modules@0.5.0:
+    resolution: {integrity: sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==}
+
   webpack-virtual-modules@0.6.2:
     resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
 
@@ -10205,6 +10316,8 @@ snapshots:
       '@sentry-internal/browser-utils': 8.48.0
       '@sentry/core': 8.48.0
 
+  '@sentry/babel-plugin-component-annotate@4.6.0': {}
+
   '@sentry/browser@8.48.0':
     dependencies:
       '@sentry-internal/browser-utils': 8.48.0
@@ -10213,8 +10326,74 @@ snapshots:
       '@sentry-internal/replay-canvas': 8.48.0
       '@sentry/core': 8.48.0
 
+  '@sentry/bundler-plugin-core@4.6.0':
+    dependencies:
+      '@babel/core': 7.27.1
+      '@sentry/babel-plugin-component-annotate': 4.6.0
+      '@sentry/cli': 2.57.0
+      dotenv: 16.6.1
+      find-up: 5.0.0
+      glob: 9.3.5
+      magic-string: 0.30.8
+      unplugin: 1.0.1
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+
+  '@sentry/cli-darwin@2.57.0':
+    optional: true
+
+  '@sentry/cli-linux-arm64@2.57.0':
+    optional: true
+
+  '@sentry/cli-linux-arm@2.57.0':
+    optional: true
+
+  '@sentry/cli-linux-i686@2.57.0':
+    optional: true
+
+  '@sentry/cli-linux-x64@2.57.0':
+    optional: true
+
+  '@sentry/cli-win32-arm64@2.57.0':
+    optional: true
+
+  '@sentry/cli-win32-i686@2.57.0':
+    optional: true
+
+  '@sentry/cli-win32-x64@2.57.0':
+    optional: true
+
+  '@sentry/cli@2.57.0':
+    dependencies:
+      https-proxy-agent: 5.0.1
+      node-fetch: 2.7.0
+      progress: 2.0.3
+      proxy-from-env: 1.1.0
+      which: 2.0.2
+    optionalDependencies:
+      '@sentry/cli-darwin': 2.57.0
+      '@sentry/cli-linux-arm': 2.57.0
+      '@sentry/cli-linux-arm64': 2.57.0
+      '@sentry/cli-linux-i686': 2.57.0
+      '@sentry/cli-linux-x64': 2.57.0
+      '@sentry/cli-win32-arm64': 2.57.0
+      '@sentry/cli-win32-i686': 2.57.0
+      '@sentry/cli-win32-x64': 2.57.0
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+
   '@sentry/core@8.48.0': {}
 
+  '@sentry/vite-plugin@4.6.0':
+    dependencies:
+      '@sentry/bundler-plugin-core': 4.6.0
+      unplugin: 1.0.1
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+
   '@sentry/vue@8.48.0(pinia@2.2.2(typescript@5.9.2)(vue@3.5.13(typescript@5.9.2)))(vue@3.5.13(typescript@5.9.2))':
     dependencies:
       '@sentry/browser': 8.48.0
@@ -11214,6 +11393,12 @@ snapshots:
 
   address@1.2.2: {}
 
+  agent-base@6.0.2:
+    dependencies:
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
   agent-base@7.1.4: {}
 
   agentkeepalive@4.6.0:
@@ -12713,6 +12898,8 @@ snapshots:
       jsonfile: 6.2.0
       universalify: 2.0.1
 
+  fs.realpath@1.0.0: {}
+
   fsevents@2.3.2:
     optional: true
 
@@ -12807,6 +12994,13 @@ snapshots:
       package-json-from-dist: 1.0.0
       path-scurry: 2.0.0
 
+  glob@9.3.5:
+    dependencies:
+      fs.realpath: 1.0.0
+      minimatch: 8.0.4
+      minipass: 4.2.8
+      path-scurry: 1.11.1
+
   global-directory@4.0.1:
     dependencies:
       ini: 4.1.1
@@ -12937,6 +13131,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  https-proxy-agent@5.0.1:
+    dependencies:
+      agent-base: 6.0.2
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
   https-proxy-agent@7.0.6:
     dependencies:
       agent-base: 7.1.4
@@ -13626,6 +13827,10 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  magic-string@0.30.8:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
   magicast@0.3.5:
     dependencies:
       '@babel/parser': 7.28.4
@@ -14031,6 +14236,10 @@ snapshots:
     dependencies:
       brace-expansion: 2.0.2
 
+  minimatch@8.0.4:
+    dependencies:
+      brace-expansion: 2.0.2
+
   minimatch@9.0.1:
     dependencies:
       brace-expansion: 2.0.2
@@ -14045,6 +14254,8 @@ snapshots:
 
   minimist@1.2.8: {}
 
+  minipass@4.2.8: {}
+
   minipass@7.1.2: {}
 
   minizlib@3.0.2:
@@ -14550,6 +14761,8 @@ snapshots:
 
   process-nextick-args@2.0.1: {}
 
+  progress@2.0.3: {}
+
   promise@7.3.1:
     dependencies:
       asap: 2.0.6
@@ -15689,6 +15902,13 @@ snapshots:
       - rollup
       - supports-color
 
+  unplugin@1.0.1:
+    dependencies:
+      acorn: 8.15.0
+      chokidar: 3.6.0
+      webpack-sources: 3.3.3
+      webpack-virtual-modules: 0.5.0
+
   unplugin@1.16.1:
     dependencies:
       acorn: 8.15.0
@@ -16037,6 +16257,10 @@ snapshots:
 
   webidl-conversions@7.0.0: {}
 
+  webpack-sources@3.3.3: {}
+
+  webpack-virtual-modules@0.5.0: {}
+
   webpack-virtual-modules@0.6.2: {}
 
   websocket-driver@0.7.4:

pnpm-workspace.yaml

@@ -24,6 +24,7 @@ catalog:
   '@primevue/forms': ^4.2.5
   '@primevue/icons': 4.2.5
   '@primevue/themes': ^4.2.5
+  '@sentry/vite-plugin': ^4.6.0
   '@sentry/vue': ^8.48.0
   '@storybook/addon-docs': ^9.1.1
   '@storybook/vue3': ^9.1.1
@@ -111,6 +112,7 @@ onlyBuiltDependencies:
   - '@playwright/browser-chromium'
   - '@playwright/browser-firefox'
   - '@playwright/browser-webkit'
+  - '@sentry/cli'
   - '@tailwindcss/oxide'
   - esbuild
   - nx

src/components/actionbar/ComfyRunButton/ComfyQueueButton.vue

@@ -158,9 +158,7 @@ const queuePrompt = async (e: Event) => {
     ? 'Comfy.QueuePromptFront'
     : 'Comfy.QueuePrompt'
 
-  if (isCloud) {
-    useTelemetry()?.trackRunButton({ subscribe_to_run: false })
-  }
+  useTelemetry()?.trackRunButton({ subscribe_to_run: false })
 
   await commandStore.execute(commandId)
 }

src/components/card/CardTop.vue

@@ -54,7 +54,7 @@ const {
 }>()
 
 const topStyle = computed(() => {
-  const baseClasses = 'relative p-0'
+  const baseClasses = 'relative p-0 overflow-hidden'
 
   const ratioClasses = {
     square: 'aspect-square',

src/components/common/EditableText.vue

@@ -21,6 +21,8 @@
       @keyup.enter="blurInputElement"
       @keyup.escape="cancelEditing"
       @click.stop
+      @pointerdown.stop.capture
+      @pointermove.stop.capture
     />
   </div>
 </template>

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -36,53 +36,55 @@
     </template>
 
     <template #contentFilter>
-      <div class="relative flex flex-wrap gap-2 px-6 pt-2 pb-4">
-        <!-- Model Filter -->
-        <MultiSelect
-          v-model="selectedModelObjects"
-          v-model:search-query="modelSearchText"
-          class="w-[250px]"
-          :label="modelFilterLabel"
-          :options="modelOptions"
-          :show-search-box="true"
-          :show-selected-count="true"
-          :show-clear-button="true"
-        >
-          <template #icon>
-            <i class="icon-[lucide--cpu]" />
-          </template>
-        </MultiSelect>
+      <div class="relative flex flex-wrap justify-between gap-2 px-6 pb-4">
+        <div class="flex flex-wrap gap-2">
+          <!-- Model Filter -->
+          <MultiSelect
+            v-model="selectedModelObjects"
+            v-model:search-query="modelSearchText"
+            class="w-[250px]"
+            :label="modelFilterLabel"
+            :options="modelOptions"
+            :show-search-box="true"
+            :show-selected-count="true"
+            :show-clear-button="true"
+          >
+            <template #icon>
+              <i class="icon-[lucide--cpu]" />
+            </template>
+          </MultiSelect>
 
-        <!-- Use Case Filter -->
-        <MultiSelect
-          v-model="selectedUseCaseObjects"
-          :label="useCaseFilterLabel"
-          :options="useCaseOptions"
-          :show-search-box="true"
-          :show-selected-count="true"
-          :show-clear-button="true"
-        >
-          <template #icon>
-            <i class="icon-[lucide--target]" />
-          </template>
-        </MultiSelect>
+          <!-- Use Case Filter -->
+          <MultiSelect
+            v-model="selectedUseCaseObjects"
+            :label="useCaseFilterLabel"
+            :options="useCaseOptions"
+            :show-search-box="true"
+            :show-selected-count="true"
+            :show-clear-button="true"
+          >
+            <template #icon>
+              <i class="icon-[lucide--target]" />
+            </template>
+          </MultiSelect>
 
-        <!-- License Filter -->
-        <MultiSelect
-          v-model="selectedLicenseObjects"
-          :label="licenseFilterLabel"
-          :options="licenseOptions"
-          :show-search-box="true"
-          :show-selected-count="true"
-          :show-clear-button="true"
-        >
-          <template #icon>
-            <i class="icon-[lucide--file-text]" />
-          </template>
-        </MultiSelect>
+          <!-- License Filter -->
+          <MultiSelect
+            v-model="selectedLicenseObjects"
+            :label="licenseFilterLabel"
+            :options="licenseOptions"
+            :show-search-box="true"
+            :show-selected-count="true"
+            :show-clear-button="true"
+          >
+            <template #icon>
+              <i class="icon-[lucide--file-text]" />
+            </template>
+          </MultiSelect>
+        </div>
 
         <!-- Sort Options -->
-        <div class="absolute right-5">
+        <div>
           <SingleSelect
             v-model="sortBy"
             :label="$t('templateWorkflows.sorting', 'Sort by')"
@@ -144,7 +146,7 @@
             size="compact"
             variant="ghost"
             rounded="lg"
-            class="hover:bg-white dark-theme:hover:bg-zinc-800"
+            class="hover:bg-base-background"
           >
             <template #top>
               <CardTop ratio="landscape">
@@ -178,7 +180,7 @@
             variant="ghost"
             rounded="lg"
             :data-testid="`template-workflow-${template.name}`"
-            class="hover:bg-white dark-theme:hover:bg-zinc-800"
+            class="hover:bg-base-background"
             @mouseenter="hoveredTemplate = template.name"
             @mouseleave="hoveredTemplate = null"
             @click="onLoadWorkflow(template)"
@@ -323,7 +325,7 @@
             size="compact"
             variant="ghost"
             rounded="lg"
-            class="hover:bg-white dark-theme:hover:bg-zinc-800"
+            class="hover:bg-base-background"
           >
             <template #top>
               <CardTop ratio="square">
@@ -380,7 +382,7 @@
 <script setup lang="ts">
 import { useAsyncState } from '@vueuse/core'
 import ProgressSpinner from 'primevue/progressspinner'
-import { computed, onBeforeUnmount, provide, ref, watch } from 'vue'
+import { computed, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import IconButton from '@/components/button/IconButton.vue'
@@ -401,6 +403,8 @@ import LeftSidePanel from '@/components/widget/panel/LeftSidePanel.vue'
 import { useIntersectionObserver } from '@/composables/useIntersectionObserver'
 import { useLazyPagination } from '@/composables/useLazyPagination'
 import { useTemplateFiltering } from '@/composables/useTemplateFiltering'
+import { isCloud } from '@/platform/distribution/types'
+import { useTelemetry } from '@/platform/telemetry'
 import { useTemplateWorkflows } from '@/platform/workflow/templates/composables/useTemplateWorkflows'
 import { useWorkflowTemplatesStore } from '@/platform/workflow/templates/repositories/workflowTemplatesStore'
 import type { TemplateInfo } from '@/platform/workflow/templates/types/template'
@@ -410,10 +414,34 @@ import { createGridStyle } from '@/utils/gridUtil'
 
 const { t } = useI18n()
 
-const { onClose } = defineProps<{
+const { onClose: originalOnClose } = defineProps<{
   onClose: () => void
 }>()
 
+// Track session time for telemetry
+const sessionStartTime = ref<number>(0)
+const templateWasSelected = ref(false)
+
+onMounted(() => {
+  sessionStartTime.value = Date.now()
+})
+
+// Wrap onClose to track session end
+const onClose = () => {
+  if (isCloud) {
+    const timeSpentSeconds = Math.floor(
+      (Date.now() - sessionStartTime.value) / 1000
+    )
+
+    useTelemetry()?.trackTemplateLibraryClosed({
+      template_selected: templateWasSelected.value,
+      time_spent_seconds: timeSpentSeconds
+    })
+  }
+
+  originalOnClose()
+}
+
 provide(OnCloseKey, onClose)
 
 // Workflow templates store and composable
@@ -698,6 +726,7 @@ const onLoadWorkflow = async (template: any) => {
       template.name,
       getEffectiveSourceModule(template)
     )
+    templateWasSelected.value = true
     onClose()
   } finally {
     loadingTemplate.value = null

src/components/dialog/content/ErrorDialogContent.vue

@@ -61,6 +61,7 @@ import { useI18n } from 'vue-i18n'
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import FindIssueButton from '@/components/dialog/content/error/FindIssueButton.vue'
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
+import { useTelemetry } from '@/platform/telemetry'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { useCommandStore } from '@/stores/commandStore'
@@ -92,12 +93,18 @@ const showReport = () => {
 const toast = useToast()
 const { t } = useI18n()
 const systemStatsStore = useSystemStatsStore()
+const telemetry = useTelemetry()
 
 const title = computed<string>(
   () => error.nodeType ?? error.exceptionType ?? t('errorDialog.defaultTitle')
 )
 
 const showContactSupport = async () => {
+  telemetry?.trackHelpResourceClicked({
+    resource_type: 'help_feedback',
+    is_external: true,
+    source: 'error_dialog'
+  })
   await useCommandStore().execute('Comfy.ContactSupport')
 }
 

src/components/dialog/content/credit/CreditTopUpOption.vue

@@ -43,8 +43,10 @@ import Tag from 'primevue/tag'
 import { onBeforeUnmount, ref } from 'vue'
 
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+import { useTelemetry } from '@/platform/telemetry'
 
 const authActions = useFirebaseAuthActions()
+const telemetry = useTelemetry()
 
 const {
   amount,
@@ -61,8 +63,11 @@ const didClickBuyNow = ref(false)
 const loading = ref(false)
 
 const handleBuyNow = async () => {
+  const creditAmount = editable ? customAmount.value : amount
+  telemetry?.trackApiCreditTopupButtonPurchaseClicked(creditAmount)
+
   loading.value = true
-  await authActions.purchaseCredits(editable ? customAmount.value : amount)
+  await authActions.purchaseCredits(creditAmount)
   loading.value = false
   didClickBuyNow.value = true
 }

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

@@ -15,7 +15,7 @@
           <UserCredit text-class="text-3xl font-bold" />
           <Skeleton v-if="loading" width="2rem" height="2rem" />
           <Button
-            v-else
+            v-else-if="isActiveSubscription"
             :label="$t('credits.purchaseCredits')"
             :loading="loading"
             @click="handlePurchaseCreditsClick"
@@ -92,6 +92,13 @@
           icon="pi pi-question-circle"
           @click="handleFaqClick"
         />
+        <Button
+          :label="$t('subscription.partnerNodesCredits')"
+          text
+          severity="secondary"
+          icon="pi pi-question-circle"
+          @click="handleOpenPartnerNodesInfo"
+        />
         <Button
           :label="$t('credits.messageSupport')"
           text
@@ -116,6 +123,8 @@ import { computed, ref, watch } from 'vue'
 import UserCredit from '@/components/common/UserCredit.vue'
 import UsageLogsTable from '@/components/dialog/content/setting/UsageLogsTable.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
+import { useTelemetry } from '@/platform/telemetry'
 import { useDialogService } from '@/services/dialogService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
@@ -132,6 +141,8 @@ const dialogService = useDialogService()
 const authStore = useFirebaseAuthStore()
 const authActions = useFirebaseAuthActions()
 const commandStore = useCommandStore()
+const telemetry = useTelemetry()
+const { isActiveSubscription } = useSubscription()
 const loading = computed(() => authStore.loading)
 const balanceLoading = computed(() => authStore.isFetchingBalance)
 
@@ -161,6 +172,11 @@ const handleCreditsHistoryClick = async () => {
 }
 
 const handleMessageSupport = async () => {
+  telemetry?.trackHelpResourceClicked({
+    resource_type: 'help_feedback',
+    is_external: true,
+    source: 'credits_panel'
+  })
   await commandStore.execute('Comfy.ContactSupport')
 }
 
@@ -168,5 +184,12 @@ const handleFaqClick = () => {
   window.open('https://docs.comfy.org/tutorials/api-nodes/faq', '_blank')
 }
 
+const handleOpenPartnerNodesInfo = () => {
+  window.open(
+    'https://docs.comfy.org/tutorials/api-nodes/overview#api-nodes',
+    '_blank'
+  )
+}
+
 const creditHistory = ref<CreditHistoryItemData[]>([])
 </script>

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

@@ -96,6 +96,7 @@ import Message from 'primevue/message'
 import ProgressSpinner from 'primevue/progressspinner'
 import { computed, ref } from 'vue'
 
+import { useTelemetry } from '@/platform/telemetry'
 import type { AuditLog } from '@/services/customerEventsService'
 import {
   EventType,
@@ -159,6 +160,9 @@ const loadEvents = async () => {
       if (response.totalPages) {
         pagination.value.totalPages = response.totalPages
       }
+
+      // Check if a pending top-up has completed
+      useTelemetry()?.checkForCompletedTopup(response.events)
     } else {
       error.value = customerEventService.error.value || 'Failed to load events'
     }

src/components/graph/GraphCanvas.vue

@@ -3,8 +3,10 @@
   <!-- If load immediately, the top-level splitter stateKey won't be correctly
   synced with the stateStorage (localStorage). -->
   <LiteGraphCanvasSplitterOverlay v-if="comfyAppReady">
-    <template v-if="showUI && workflowTabsPosition === 'Topbar'" #workflow-tabs>
+    <template v-if="showUI" #workflow-tabs>
+      <TryVueNodeBanner />
       <div
+        v-if="workflowTabsPosition === 'Topbar'"
         class="workflow-tabs-container pointer-events-auto relative h-9.5 w-full"
       >
         <!-- Native drag area for Electron -->
@@ -152,6 +154,8 @@ import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { isNativeWindow } from '@/utils/envUtil'
 
+import TryVueNodeBanner from '../topbar/TryVueNodeBanner.vue'
+
 const emit = defineEmits<{
   ready: []
 }>()

src/components/graph/selectionToolbox/BypassButton.test.ts

@@ -92,7 +92,7 @@ describe('BypassButton', () => {
     const button = wrapper.find('button')
 
     expect(button.classes()).not.toContain(
-      'dark-theme:[&:not(:active)]:!bg-[#262729]'
+      'dark-theme:[&:not(:active)]:!bg-charcoal-600'
     )
   })
 

src/components/graph/selectionToolbox/BypassButton.vue

@@ -7,7 +7,7 @@
     severity="secondary"
     text
     data-testid="bypass-button"
-    class="hover:bg-[#E7E6E6] hover:dark-theme:bg-charcoal-600"
+    class="hover:bg-secondary-background"
     @click="toggleBypass"
   >
     <template #icon>

src/components/graph/selectionToolbox/ExecuteButton.vue

@@ -4,7 +4,7 @@
       value: t('selectionToolbox.executeButton.tooltip'),
       showDelay: 1000
     }"
-    class="size-8 bg-[#31B9F4] !p-0 dark-theme:bg-[#0B8CE9]"
+    class="size-8 bg-azure-400 !p-0 dark-theme:bg-azure-600"
     text
     @mouseenter="() => handleMouseEnter()"
     @mouseleave="() => handleMouseLeave()"

src/components/graph/selectionToolbox/MenuOptionItem.vue

@@ -27,9 +27,9 @@
       :severity="option.badge === 'new' ? 'info' : 'secondary'"
       :value="t(option.badge)"
       :class="{
-        'rounded-4xl bg-[#31B9F4] dark-theme:bg-[#0B8CE9]':
+        'rounded-4xl bg-azure-400 dark-theme:bg-azure-600':
           option.badge === 'new',
-        'rounded-4xl bg-[#9C9EAB] dark-theme:bg-[#000]':
+        'rounded-4xl bg-slate-100 dark-theme:bg-black':
           option.badge === 'deprecated',
         'h-4 gap-2.5 px-1 text-[9px] text-white uppercase': true
       }"

src/components/graph/widgets/DomWidget.vue

@@ -143,8 +143,8 @@ onMounted(() => {
     widget.options.selectOn ?? ['focus', 'click'],
     () => {
       const lgCanvas = canvasStore.canvas
-      lgCanvas?.selectNode(widget.node)
-      lgCanvas?.bringToFront(widget.node)
+      lgCanvas?.selectNode(widgetState.widget.node)
+      lgCanvas?.bringToFront(widgetState.widget.node)
     }
   )
 })

src/components/graph/widgets/TextPreviewWidget.vue

@@ -27,7 +27,33 @@ const props = defineProps<{
 
 const executionStore = useExecutionStore()
 const isParentNodeExecuting = ref(true)
-const formattedText = computed(() => nl2br(linkifyHtml(modelValue.value)))
+const formattedText = computed(() => {
+  const src = modelValue.value
+  // Turn [[label|url]] into placeholders to avoid interfering with linkifyHtml
+  const tokens: { label: string; url: string }[] = []
+  const holed = src.replace(
+    /\[\[([^|\]]+)\|([^\]]+)\]\]/g,
+    (_m, label, url) => {
+      tokens.push({ label: String(label), url: String(url) })
+      return `__LNK${tokens.length - 1}__`
+    }
+  )
+
+  // Keep current behavior (auto-link bare URLs + \n -> <br>)
+  let html = nl2br(linkifyHtml(holed))
+
+  // Restore placeholders as <a>...</a> (minimal escaping + http default)
+  html = html.replace(/__LNK(\d+)__/g, (_m, i) => {
+    const { label, url } = tokens[+i]
+    const safeHref = url.replace(/"/g, '&quot;')
+    const safeLabel = label.replace(/</g, '&lt;').replace(/>/g, '&gt;')
+    return /^https?:\/\//i.test(url)
+      ? `<a href="${safeHref}" target="_blank" rel="noopener noreferrer">${safeLabel}</a>`
+      : safeLabel
+  })
+
+  return html
+})
 
 let parentNodeId: NodeId | null = null
 onMounted(() => {

src/components/helpcenter/HelpCenterMenuContent.vue

@@ -138,13 +138,14 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button'
-import { computed, nextTick, onMounted, ref } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
 import type { CSSProperties, Component } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import PuzzleIcon from '@/components/icons/PuzzleIcon.vue'
 import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { useTelemetry } from '@/platform/telemetry'
 import type { ReleaseNote } from '@/platform/updates/common/releaseService'
 import { useReleaseStore } from '@/platform/updates/common/releaseStore'
 import { useCommandStore } from '@/stores/commandStore'
@@ -196,6 +197,7 @@ const { t, locale } = useI18n()
 const releaseStore = useReleaseStore()
 const commandStore = useCommandStore()
 const settingStore = useSettingStore()
+const telemetry = useTelemetry()
 
 // Emits
 const emit = defineEmits<{
@@ -207,6 +209,7 @@ const isSubmenuVisible = ref(false)
 const submenuRef = ref<HTMLElement | null>(null)
 const submenuStyle = ref<CSSProperties>({})
 let hoverTimeout: number | null = null
+const openedAt = ref<number>(Date.now())
 
 // Computed
 const hasReleases = computed(() => releaseStore.releases.length > 0)
@@ -226,6 +229,7 @@ const moreItems = computed<MenuItem[]>(() => {
       label: t('helpCenter.desktopUserGuide'),
       visible: isElectron(),
       action: () => {
+        trackResourceClick('docs', true)
         const docsUrl =
           electronAPI().getPlatform() === 'darwin'
             ? EXTERNAL_LINKS.DESKTOP_GUIDE_MACOS
@@ -281,6 +285,7 @@ const menuItems = computed<MenuItem[]>(() => {
       icon: 'pi pi-book',
       label: t('helpCenter.docs'),
       action: () => {
+        trackResourceClick('docs', true)
         openExternalLink(EXTERNAL_LINKS.DOCS)
         emit('close')
       }
@@ -291,6 +296,7 @@ const menuItems = computed<MenuItem[]>(() => {
       icon: 'pi pi-discord',
       label: 'Discord',
       action: () => {
+        trackResourceClick('discord', true)
         openExternalLink(EXTERNAL_LINKS.DISCORD)
         emit('close')
       }
@@ -301,6 +307,7 @@ const menuItems = computed<MenuItem[]>(() => {
       icon: 'pi pi-github',
       label: t('helpCenter.github'),
       action: () => {
+        trackResourceClick('github', true)
         openExternalLink(EXTERNAL_LINKS.GITHUB)
         emit('close')
       }
@@ -311,6 +318,7 @@ const menuItems = computed<MenuItem[]>(() => {
       icon: 'pi pi-question-circle',
       label: t('helpCenter.helpFeedback'),
       action: () => {
+        trackResourceClick('help_feedback', false)
         void commandStore.execute('Comfy.ContactSupport')
         emit('close')
       }
@@ -326,6 +334,7 @@ const menuItems = computed<MenuItem[]>(() => {
       label: t('helpCenter.managerExtension'),
       showRedDot: shouldShowManagerRedDot.value,
       action: async () => {
+        trackResourceClick('manager', false)
         await useManagerState().openManager({
           initialTab: ManagerTab.All,
           showToastOnLegacyError: false
@@ -349,6 +358,23 @@ const menuItems = computed<MenuItem[]>(() => {
 })
 
 // Utility Functions
+const trackResourceClick = (
+  resourceType:
+    | 'docs'
+    | 'discord'
+    | 'github'
+    | 'help_feedback'
+    | 'manager'
+    | 'release_notes',
+  isExternal: boolean
+): void => {
+  telemetry?.trackHelpResourceClicked({
+    resource_type: resourceType,
+    is_external: isExternal,
+    source: 'help_center'
+  })
+}
+
 const openExternalLink = (url: string): void => {
   window.open(url, '_blank', 'noopener,noreferrer')
 }
@@ -504,6 +530,7 @@ const onReinstall = (): void => {
 }
 
 const onReleaseClick = (release: ReleaseNote): void => {
+  trackResourceClick('release_notes', true)
   void releaseStore.handleShowChangelog(release.version)
   const versionAnchor = formatVersionAnchor(release.version)
   const changelogUrl = `${getChangelogUrl()}#${versionAnchor}`
@@ -512,6 +539,7 @@ const onReleaseClick = (release: ReleaseNote): void => {
 }
 
 const onUpdate = (_: ReleaseNote): void => {
+  trackResourceClick('docs', true)
   openExternalLink(EXTERNAL_LINKS.UPDATE_GUIDE)
   emit('close')
 }
@@ -526,10 +554,16 @@ const getChangelogUrl = (): string => {
 
 // Lifecycle
 onMounted(async () => {
+  telemetry?.trackHelpCenterOpened({ source: 'sidebar' })
   if (!hasReleases.value) {
     await releaseStore.fetchReleases()
   }
 })
+
+onBeforeUnmount(() => {
+  const timeSpentSeconds = Math.round((Date.now() - openedAt.value) / 1000)
+  telemetry?.trackHelpCenterClosed({ time_spent_seconds: timeSpentSeconds })
+})
 </script>
 
 <style scoped>

src/components/input/MultiSelect.vue

@@ -242,7 +242,7 @@ const pt = computed(() => ({
     )
   },
   listContainer: () => ({
-    style: { maxHeight: listMaxHeight },
+    style: { maxHeight: `min(${listMaxHeight}, 50vh)` },
     class: 'scrollbar-custom'
   }),
   list: {

src/components/input/SingleSelect.vue

@@ -158,7 +158,7 @@ const pt = computed(() => ({
     )
   },
   listContainer: () => ({
-    style: `max-height: ${listMaxHeight}`,
+    style: `max-height: min(${listMaxHeight}, 50vh)`,
     class: 'scrollbar-custom'
   }),
   list: {

src/components/load3d/Load3D.vue

@@ -1,71 +1,48 @@
 <template>
   <div
-    class="relative h-full w-full"
+    class="widget-expands relative h-full w-full"
     @mouseenter="handleMouseEnter"
     @mouseleave="handleMouseLeave"
+    @pointerdown.stop
+    @pointermove.stop
+    @pointerup.stop
   >
     <Load3DScene
+      v-if="node"
       ref="load3DSceneRef"
-      :node="node"
-      :input-spec="inputSpec"
-      :background-color="backgroundColor"
-      :show-grid="showGrid"
-      :light-intensity="lightIntensity"
-      :fov="fov"
-      :camera-type="cameraType"
-      :show-preview="showPreview"
-      :background-image="backgroundImage"
-      :up-direction="upDirection"
-      :material-mode="materialMode"
-      :edge-threshold="edgeThreshold"
-      @material-mode-change="listenMaterialModeChange"
-      @background-color-change="listenBackgroundColorChange"
-      @light-intensity-change="listenLightIntensityChange"
-      @fov-change="listenFOVChange"
-      @camera-type-change="listenCameraTypeChange"
-      @show-grid-change="listenShowGridChange"
-      @show-preview-change="listenShowPreviewChange"
-      @background-image-change="listenBackgroundImageChange"
-      @up-direction-change="listenUpDirectionChange"
-      @edge-threshold-change="listenEdgeThresholdChange"
-      @recording-status-change="listenRecordingStatusChange"
-    />
-    <Load3DControls
-      :input-spec="inputSpec"
-      :background-color="backgroundColor"
-      :show-grid="showGrid"
-      :show-preview="showPreview"
-      :light-intensity="lightIntensity"
-      :show-light-intensity-button="showLightIntensityButton"
-      :fov="fov"
-      :show-f-o-v-button="showFOVButton"
-      :show-preview-button="showPreviewButton"
-      :camera-type="cameraType"
-      :has-background-image="hasBackgroundImage"
-      :up-direction="upDirection"
-      :material-mode="materialMode"
-      :edge-threshold="edgeThreshold"
-      @update-background-image="handleBackgroundImageUpdate"
-      @switch-camera="switchCamera"
-      @toggle-grid="toggleGrid"
-      @update-background-color="handleBackgroundColorChange"
-      @update-light-intensity="handleUpdateLightIntensity"
-      @toggle-preview="togglePreview"
-      @update-f-o-v="handleUpdateFOV"
-      @update-up-direction="handleUpdateUpDirection"
-      @update-material-mode="handleUpdateMaterialMode"
-      @update-edge-threshold="handleUpdateEdgeThreshold"
-      @export-model="handleExportModel"
+      :initialize-load3d="initializeLoad3d"
+      :cleanup="cleanup"
+      :loading="loading"
+      :loading-message="loadingMessage"
+      :on-model-drop="isPreview ? undefined : handleModelDrop"
+      :is-preview="isPreview"
     />
+    <div class="pointer-events-none absolute top-0 left-0 h-full w-full">
+      <Load3DControls
+        v-model:scene-config="sceneConfig"
+        v-model:model-config="modelConfig"
+        v-model:camera-config="cameraConfig"
+        v-model:light-config="lightConfig"
+        @update-background-image="handleBackgroundImageUpdate"
+        @export-model="handleExportModel"
+      />
+      <AnimationControls
+        v-if="animations && animations.length > 0"
+        v-model:animations="animations"
+        v-model:playing="playing"
+        v-model:selected-speed="selectedSpeed"
+        v-model:selected-animation="selectedAnimation"
+      />
+    </div>
     <div
-      v-if="enable3DViewer"
+      v-if="enable3DViewer && node"
       class="pointer-events-auto absolute top-12 right-2 z-20"
     >
-      <ViewerControls :node="node" />
+      <ViewerControls :node="node as LGraphNode" />
     </div>
 
     <div
-      v-if="showRecordingControls"
+      v-if="!isPreview"
       class="pointer-events-auto absolute right-2 z-20"
       :class="{
         'top-12': !enable3DViewer,
@@ -73,10 +50,9 @@
       }"
     >
       <RecordingControls
-        :node="node"
-        :is-recording="isRecording"
-        :has-recording="hasRecording"
-        :recording-duration="recordingDuration"
+        v-model:is-recording="isRecording"
+        v-model:has-recording="hasRecording"
+        v-model:recording-duration="recordingDuration"
         @start-recording="handleStartRecording"
         @stop-recording="handleStopRecording"
         @export-recording="handleExportRecording"
@@ -87,250 +63,79 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
+import { computed, onMounted, ref } from 'vue'
+import type { Ref } from 'vue'
 
 import Load3DControls from '@/components/load3d/Load3DControls.vue'
 import Load3DScene from '@/components/load3d/Load3DScene.vue'
+import AnimationControls from '@/components/load3d/controls/AnimationControls.vue'
 import RecordingControls from '@/components/load3d/controls/RecordingControls.vue'
 import ViewerControls from '@/components/load3d/controls/ViewerControls.vue'
-import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
-import type {
-  CameraType,
-  Load3DNodeType,
-  MaterialMode,
-  UpDirection
-} from '@/extensions/core/load3d/interfaces'
+import { useLoad3d } from '@/composables/useLoad3d'
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { useToastStore } from '@/platform/updates/common/toastStore'
-import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
+import { app } from '@/scripts/app'
 import type { ComponentWidget } from '@/scripts/domWidget'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
-const { t } = useI18n()
-const { widget } = defineProps<{
-  widget: ComponentWidget<string[]>
+const props = defineProps<{
+  widget: ComponentWidget<string[]> | SimplifiedWidget
+  nodeId?: NodeId
 }>()
 
-const inputSpec = widget.inputSpec as CustomInputSpec
+function isComponentWidget(
+  widget: ComponentWidget<string[]> | SimplifiedWidget
+): widget is ComponentWidget<string[]> {
+  return 'node' in widget && widget.node !== undefined
+}
 
-const node = widget.node
-const type = inputSpec.type as Load3DNodeType
+const node = ref<LGraphNode | null>(null)
+
+if (isComponentWidget(props.widget)) {
+  node.value = props.widget.node
+} else if (props.nodeId) {
+  onMounted(() => {
+    node.value = app.rootGraph?.getNodeById(props.nodeId!) || null
+  })
+}
 
-const backgroundColor = ref('#000000')
-const showGrid = ref(true)
-const showPreview = ref(false)
-const lightIntensity = ref(5)
-const showLightIntensityButton = ref(true)
-const fov = ref(75)
-const showFOVButton = ref(true)
-const cameraType = ref<CameraType>('perspective')
-const hasBackgroundImage = ref(false)
-const backgroundImage = ref('')
-const upDirection = ref<UpDirection>('original')
-const materialMode = ref<MaterialMode>('original')
-const edgeThreshold = ref(85)
 const load3DSceneRef = ref<InstanceType<typeof Load3DScene> | null>(null)
-const isRecording = ref(false)
-const hasRecording = ref(false)
-const recordingDuration = ref(0)
-const showRecordingControls = ref(!inputSpec.isPreview)
+
+const {
+  // configs
+  sceneConfig,
+  modelConfig,
+  cameraConfig,
+  lightConfig,
+
+  // other state
+  isRecording,
+  isPreview,
+  hasRecording,
+  recordingDuration,
+  animations,
+  playing,
+  selectedSpeed,
+  selectedAnimation,
+  loading,
+  loadingMessage,
+
+  // Methods
+  initializeLoad3d,
+  handleMouseEnter,
+  handleMouseLeave,
+  handleStartRecording,
+  handleStopRecording,
+  handleExportRecording,
+  handleClearRecording,
+  handleBackgroundImageUpdate,
+  handleExportModel,
+  handleModelDrop,
+  cleanup
+} = useLoad3d(node as Ref<LGraphNode | null>)
+
 const enable3DViewer = computed(() =>
   useSettingStore().get('Comfy.Load3D.3DViewerEnable')
 )
-
-const showPreviewButton = computed(() => {
-  return !type.includes('Preview')
-})
-
-const handleMouseEnter = () => {
-  if (load3DSceneRef.value?.load3d) {
-    load3DSceneRef.value.load3d.updateStatusMouseOnScene(true)
-  }
-}
-
-const handleMouseLeave = () => {
-  if (load3DSceneRef.value?.load3d) {
-    load3DSceneRef.value.load3d.updateStatusMouseOnScene(false)
-  }
-}
-
-const handleStartRecording = async () => {
-  if (load3DSceneRef.value?.load3d) {
-    await load3DSceneRef.value.load3d.startRecording()
-    isRecording.value = true
-  }
-}
-
-const handleStopRecording = () => {
-  if (load3DSceneRef.value?.load3d) {
-    load3DSceneRef.value.load3d.stopRecording()
-    isRecording.value = false
-    recordingDuration.value = load3DSceneRef.value.load3d.getRecordingDuration()
-    hasRecording.value = recordingDuration.value > 0
-  }
-}
-
-const handleExportRecording = () => {
-  if (load3DSceneRef.value?.load3d) {
-    const timestamp = new Date().toISOString().replace(/[:.]/g, '-')
-    const filename = `${timestamp}-scene-recording.mp4`
-    load3DSceneRef.value.load3d.exportRecording(filename)
-  }
-}
-
-const handleClearRecording = () => {
-  if (load3DSceneRef.value?.load3d) {
-    load3DSceneRef.value.load3d.clearRecording()
-    hasRecording.value = false
-    recordingDuration.value = 0
-  }
-}
-
-const switchCamera = () => {
-  cameraType.value =
-    cameraType.value === 'perspective' ? 'orthographic' : 'perspective'
-
-  showFOVButton.value = cameraType.value === 'perspective'
-
-  node.properties['Camera Type'] = cameraType.value
-}
-
-const togglePreview = (value: boolean) => {
-  showPreview.value = value
-
-  node.properties['Show Preview'] = showPreview.value
-}
-
-const toggleGrid = (value: boolean) => {
-  showGrid.value = value
-
-  node.properties['Show Grid'] = showGrid.value
-}
-
-const handleUpdateLightIntensity = (value: number) => {
-  lightIntensity.value = value
-
-  node.properties['Light Intensity'] = lightIntensity.value
-}
-
-const handleBackgroundImageUpdate = async (file: File | null) => {
-  if (!file) {
-    hasBackgroundImage.value = false
-    backgroundImage.value = ''
-    node.properties['Background Image'] = ''
-    return
-  }
-
-  const resourceFolder = (node.properties['Resource Folder'] as string) || ''
-
-  const subfolder = resourceFolder.trim() ? `3d/${resourceFolder.trim()}` : '3d'
-
-  backgroundImage.value = await Load3dUtils.uploadFile(file, subfolder)
-
-  node.properties['Background Image'] = backgroundImage.value
-}
-
-const handleUpdateFOV = (value: number) => {
-  fov.value = value
-
-  node.properties['FOV'] = fov.value
-}
-
-const handleUpdateEdgeThreshold = (value: number) => {
-  edgeThreshold.value = value
-
-  node.properties['Edge Threshold'] = edgeThreshold.value
-}
-
-const handleBackgroundColorChange = (value: string) => {
-  backgroundColor.value = value
-
-  node.properties['Background Color'] = value
-}
-
-const handleUpdateUpDirection = (value: UpDirection) => {
-  upDirection.value = value
-
-  node.properties['Up Direction'] = value
-}
-
-const handleUpdateMaterialMode = (value: MaterialMode) => {
-  materialMode.value = value
-
-  node.properties['Material Mode'] = value
-}
-
-const handleExportModel = async (format: string) => {
-  if (!load3DSceneRef.value?.load3d) {
-    useToastStore().addAlert(t('toastMessages.no3dSceneToExport'))
-    return
-  }
-
-  try {
-    await load3DSceneRef.value.load3d.exportModel(format)
-  } catch (error) {
-    console.error('Error exporting model:', error)
-    useToastStore().addAlert(
-      t('toastMessages.failedToExportModel', {
-        format: format.toUpperCase()
-      })
-    )
-  }
-}
-
-const listenMaterialModeChange = (mode: MaterialMode) => {
-  materialMode.value = mode
-
-  showLightIntensityButton.value = mode === 'original'
-}
-
-const listenUpDirectionChange = (value: UpDirection) => {
-  upDirection.value = value
-}
-
-const listenEdgeThresholdChange = (value: number) => {
-  edgeThreshold.value = value
-}
-
-const listenRecordingStatusChange = (value: boolean) => {
-  isRecording.value = value
-
-  if (!value && load3DSceneRef.value?.load3d) {
-    recordingDuration.value = load3DSceneRef.value.load3d.getRecordingDuration()
-    hasRecording.value = recordingDuration.value > 0
-  }
-}
-
-const listenBackgroundColorChange = (value: string) => {
-  backgroundColor.value = value
-}
-
-const listenLightIntensityChange = (value: number) => {
-  lightIntensity.value = value
-}
-
-const listenFOVChange = (value: number) => {
-  fov.value = value
-}
-
-const listenCameraTypeChange = (value: CameraType) => {
-  cameraType.value = value
-  showFOVButton.value = cameraType.value === 'perspective'
-}
-
-const listenShowGridChange = (value: boolean) => {
-  showGrid.value = value
-}
-
-const listenShowPreviewChange = (value: boolean) => {
-  showPreview.value = value
-}
-
-const listenBackgroundImageChange = (value: string) => {
-  backgroundImage.value = value
-
-  if (backgroundImage.value && backgroundImage.value !== '') {
-    hasBackgroundImage.value = true
-  }
-}
 </script>

src/components/load3d/Load3DAnimation.vue

@@ -1,336 +0,0 @@
-<template>
-  <div
-    class="relative h-full w-full"
-    @mouseenter="handleMouseEnter"
-    @mouseleave="handleMouseLeave"
-  >
-    <Load3DAnimationScene
-      ref="load3DAnimationSceneRef"
-      :node="node"
-      :input-spec="inputSpec"
-      :background-color="backgroundColor"
-      :show-grid="showGrid"
-      :light-intensity="lightIntensity"
-      :fov="fov"
-      :camera-type="cameraType"
-      :show-preview="showPreview"
-      :show-f-o-v-button="showFOVButton"
-      :show-light-intensity-button="showLightIntensityButton"
-      :playing="playing"
-      :selected-speed="selectedSpeed"
-      :selected-animation="selectedAnimation"
-      :background-image="backgroundImage"
-      :up-direction="upDirection"
-      :material-mode="materialMode"
-      @material-mode-change="listenMaterialModeChange"
-      @background-color-change="listenBackgroundColorChange"
-      @light-intensity-change="listenLightIntensityChange"
-      @fov-change="listenFOVChange"
-      @camera-type-change="listenCameraTypeChange"
-      @show-grid-change="listenShowGridChange"
-      @show-preview-change="listenShowPreviewChange"
-      @background-image-change="listenBackgroundImageChange"
-      @animation-list-change="animationListChange"
-      @up-direction-change="listenUpDirectionChange"
-      @recording-status-change="listenRecordingStatusChange"
-    />
-    <div class="pointer-events-none absolute top-0 left-0 h-full w-full">
-      <Load3DControls
-        :input-spec="inputSpec"
-        :background-color="backgroundColor"
-        :show-grid="showGrid"
-        :show-preview="showPreview"
-        :light-intensity="lightIntensity"
-        :show-light-intensity-button="showLightIntensityButton"
-        :fov="fov"
-        :show-f-o-v-button="showFOVButton"
-        :show-preview-button="showPreviewButton"
-        :camera-type="cameraType"
-        :has-background-image="hasBackgroundImage"
-        :up-direction="upDirection"
-        :material-mode="materialMode"
-        @update-background-image="handleBackgroundImageUpdate"
-        @switch-camera="switchCamera"
-        @toggle-grid="toggleGrid"
-        @update-background-color="handleBackgroundColorChange"
-        @update-light-intensity="handleUpdateLightIntensity"
-        @toggle-preview="togglePreview"
-        @update-f-o-v="handleUpdateFOV"
-        @update-up-direction="handleUpdateUpDirection"
-        @update-material-mode="handleUpdateMaterialMode"
-      />
-      <Load3DAnimationControls
-        :animations="animations"
-        :playing="playing"
-        @toggle-play="togglePlay"
-        @speed-change="speedChange"
-        @animation-change="animationChange"
-      />
-    </div>
-    <div
-      v-if="showRecordingControls"
-      class="pointer-events-auto absolute top-12 right-2 z-20"
-    >
-      <RecordingControls
-        :node="node"
-        :is-recording="isRecording"
-        :has-recording="hasRecording"
-        :recording-duration="recordingDuration"
-        @start-recording="handleStartRecording"
-        @stop-recording="handleStopRecording"
-        @export-recording="handleExportRecording"
-        @clear-recording="handleClearRecording"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-
-import Load3DAnimationControls from '@/components/load3d/Load3DAnimationControls.vue'
-import Load3DAnimationScene from '@/components/load3d/Load3DAnimationScene.vue'
-import Load3DControls from '@/components/load3d/Load3DControls.vue'
-import RecordingControls from '@/components/load3d/controls/RecordingControls.vue'
-import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
-import type {
-  AnimationItem,
-  CameraType,
-  Load3DAnimationNodeType,
-  MaterialMode,
-  UpDirection
-} from '@/extensions/core/load3d/interfaces'
-import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
-import type { ComponentWidget } from '@/scripts/domWidget'
-
-const { widget } = defineProps<{
-  widget: ComponentWidget<string[]>
-}>()
-
-const inputSpec = widget.inputSpec as CustomInputSpec
-
-const node = widget.node
-const type = inputSpec.type as Load3DAnimationNodeType
-
-const backgroundColor = ref('#000000')
-const showGrid = ref(true)
-const showPreview = ref(false)
-const lightIntensity = ref(5)
-const showLightIntensityButton = ref(true)
-const fov = ref(75)
-const showFOVButton = ref(true)
-const cameraType = ref<'perspective' | 'orthographic'>('perspective')
-const hasBackgroundImage = ref(false)
-
-const animations = ref<AnimationItem[]>([])
-const playing = ref(false)
-const selectedSpeed = ref(1)
-const selectedAnimation = ref(0)
-const backgroundImage = ref('')
-
-const isRecording = ref(false)
-const hasRecording = ref(false)
-const recordingDuration = ref(0)
-const showRecordingControls = ref(!inputSpec.isPreview)
-
-const showPreviewButton = computed(() => {
-  return !type.includes('Preview')
-})
-
-const load3DAnimationSceneRef = ref<InstanceType<
-  typeof Load3DAnimationScene
-> | null>(null)
-
-const handleMouseEnter = () => {
-  const sceneRef = load3DAnimationSceneRef.value?.load3DSceneRef
-  if (sceneRef?.load3d) {
-    sceneRef.load3d.updateStatusMouseOnScene(true)
-  }
-}
-
-const handleMouseLeave = () => {
-  const sceneRef = load3DAnimationSceneRef.value?.load3DSceneRef
-  if (sceneRef?.load3d) {
-    sceneRef.load3d.updateStatusMouseOnScene(false)
-  }
-}
-
-const handleStartRecording = async () => {
-  const sceneRef = load3DAnimationSceneRef.value?.load3DSceneRef
-  if (sceneRef?.load3d) {
-    await sceneRef.load3d.startRecording()
-    isRecording.value = true
-  }
-}
-
-const handleStopRecording = () => {
-  const sceneRef = load3DAnimationSceneRef.value?.load3DSceneRef
-  if (sceneRef?.load3d) {
-    sceneRef.load3d.stopRecording()
-    isRecording.value = false
-    recordingDuration.value = sceneRef.load3d.getRecordingDuration()
-    hasRecording.value = recordingDuration.value > 0
-  }
-}
-
-const handleExportRecording = () => {
-  const sceneRef = load3DAnimationSceneRef.value?.load3DSceneRef
-  if (sceneRef?.load3d) {
-    const timestamp = new Date().toISOString().replace(/[:.]/g, '-')
-    const filename = `${timestamp}-animation-recording.mp4`
-    sceneRef.load3d.exportRecording(filename)
-  }
-}
-
-const handleClearRecording = () => {
-  const sceneRef = load3DAnimationSceneRef.value?.load3DSceneRef
-  if (sceneRef?.load3d) {
-    sceneRef.load3d.clearRecording()
-    hasRecording.value = false
-    recordingDuration.value = 0
-  }
-}
-
-const listenRecordingStatusChange = (value: boolean) => {
-  isRecording.value = value
-
-  if (!value) {
-    const sceneRef = load3DAnimationSceneRef.value?.load3DSceneRef
-    if (sceneRef?.load3d) {
-      recordingDuration.value = sceneRef.load3d.getRecordingDuration()
-      hasRecording.value = recordingDuration.value > 0
-    }
-  }
-}
-
-const switchCamera = () => {
-  cameraType.value =
-    cameraType.value === 'perspective' ? 'orthographic' : 'perspective'
-
-  showFOVButton.value = cameraType.value === 'perspective'
-
-  node.properties['Camera Type'] = cameraType.value
-}
-
-const togglePreview = (value: boolean) => {
-  showPreview.value = value
-
-  node.properties['Show Preview'] = showPreview.value
-}
-
-const toggleGrid = (value: boolean) => {
-  showGrid.value = value
-
-  node.properties['Show Grid'] = showGrid.value
-}
-
-const handleUpdateLightIntensity = (value: number) => {
-  lightIntensity.value = value
-
-  node.properties['Light Intensity'] = lightIntensity.value
-}
-
-const handleBackgroundImageUpdate = async (file: File | null) => {
-  if (!file) {
-    hasBackgroundImage.value = false
-    backgroundImage.value = ''
-    node.properties['Background Image'] = ''
-    return
-  }
-
-  const resourceFolder = (node.properties['Resource Folder'] as string) || ''
-
-  const subfolder = resourceFolder.trim() ? `3d/${resourceFolder.trim()}` : '3d'
-
-  backgroundImage.value = await Load3dUtils.uploadFile(file, subfolder)
-
-  node.properties['Background Image'] = backgroundImage.value
-}
-
-const handleUpdateFOV = (value: number) => {
-  fov.value = value
-
-  node.properties['FOV'] = fov.value
-}
-
-const materialMode = ref<MaterialMode>('original')
-const upDirection = ref<UpDirection>('original')
-
-const handleUpdateUpDirection = (value: UpDirection) => {
-  upDirection.value = value
-
-  node.properties['Up Direction'] = value
-}
-
-const handleUpdateMaterialMode = (value: MaterialMode) => {
-  materialMode.value = value
-
-  node.properties['Material Mode'] = value
-}
-
-const handleBackgroundColorChange = (value: string) => {
-  backgroundColor.value = value
-
-  node.properties['Background Color'] = value
-}
-
-const togglePlay = (value: boolean) => {
-  playing.value = value
-}
-
-const speedChange = (value: number) => {
-  selectedSpeed.value = value
-}
-
-const animationChange = (value: number) => {
-  selectedAnimation.value = value
-}
-
-const animationListChange = (value: any) => {
-  animations.value = value
-}
-
-const listenMaterialModeChange = (mode: MaterialMode) => {
-  materialMode.value = mode
-
-  showLightIntensityButton.value = mode === 'original'
-}
-
-const listenUpDirectionChange = (value: UpDirection) => {
-  upDirection.value = value
-}
-
-const listenBackgroundColorChange = (value: string) => {
-  backgroundColor.value = value
-}
-
-const listenLightIntensityChange = (value: number) => {
-  lightIntensity.value = value
-}
-
-const listenFOVChange = (value: number) => {
-  fov.value = value
-}
-
-const listenCameraTypeChange = (value: CameraType) => {
-  cameraType.value = value
-
-  showFOVButton.value = cameraType.value === 'perspective'
-}
-
-const listenShowGridChange = (value: boolean) => {
-  showGrid.value = value
-}
-
-const listenShowPreviewChange = (value: boolean) => {
-  showPreview.value = value
-}
-
-const listenBackgroundImageChange = (value: string) => {
-  backgroundImage.value = value
-
-  if (backgroundImage.value && backgroundImage.value !== '') {
-    hasBackgroundImage.value = true
-  }
-}
-</script>

src/components/load3d/Load3DAnimationScene.vue

@@ -1,208 +0,0 @@
-<template>
-  <Load3DScene
-    ref="load3DSceneRef"
-    :node="node"
-    :input-spec="inputSpec"
-    :background-color="backgroundColor"
-    :show-grid="showGrid"
-    :light-intensity="lightIntensity"
-    :fov="fov"
-    :camera-type="cameraType"
-    :show-preview="showPreview"
-    :extra-listeners="animationListeners"
-    :background-image="backgroundImage"
-    :up-direction="upDirection"
-    :material-mode="materialMode"
-    @material-mode-change="listenMaterialModeChange"
-    @background-color-change="listenBackgroundColorChange"
-    @light-intensity-change="listenLightIntensityChange"
-    @fov-change="listenFOVChange"
-    @camera-type-change="listenCameraTypeChange"
-    @show-grid-change="listenShowGridChange"
-    @show-preview-change="listenShowPreviewChange"
-    @recording-status-change="listenRecordingStatusChange"
-  />
-</template>
-<script setup lang="ts">
-import { ref, watch } from 'vue'
-
-import Load3DScene from '@/components/load3d/Load3DScene.vue'
-import type Load3dAnimation from '@/extensions/core/load3d/Load3dAnimation'
-import type {
-  CameraType,
-  MaterialMode,
-  UpDirection
-} from '@/extensions/core/load3d/interfaces'
-import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
-
-const props = defineProps<{
-  node: any
-  inputSpec: CustomInputSpec
-  backgroundColor: string
-  showGrid: boolean
-  lightIntensity: number
-  fov: number
-  cameraType: CameraType
-  showPreview: boolean
-  materialMode: MaterialMode
-  upDirection: UpDirection
-  showFOVButton: boolean
-  showLightIntensityButton: boolean
-  playing: boolean
-  selectedSpeed: number
-  selectedAnimation: number
-  backgroundImage: string
-}>()
-
-const node = ref(props.node)
-const backgroundColor = ref(props.backgroundColor)
-const showPreview = ref(props.showPreview)
-const fov = ref(props.fov)
-const lightIntensity = ref(props.lightIntensity)
-const cameraType = ref(props.cameraType)
-const showGrid = ref(props.showGrid)
-const upDirection = ref(props.upDirection)
-const materialMode = ref(props.materialMode)
-const showFOVButton = ref(props.showFOVButton)
-const showLightIntensityButton = ref(props.showLightIntensityButton)
-const load3DSceneRef = ref<InstanceType<typeof Load3DScene> | null>(null)
-
-watch(
-  () => props.cameraType,
-  (newValue) => {
-    cameraType.value = newValue
-  }
-)
-
-watch(
-  () => props.showGrid,
-  (newValue) => {
-    showGrid.value = newValue
-  }
-)
-
-watch(
-  () => props.backgroundColor,
-  (newValue) => {
-    backgroundColor.value = newValue
-  }
-)
-
-watch(
-  () => props.lightIntensity,
-  (newValue) => {
-    lightIntensity.value = newValue
-  }
-)
-
-watch(
-  () => props.fov,
-  (newValue) => {
-    fov.value = newValue
-  }
-)
-
-watch(
-  () => props.upDirection,
-  (newValue) => {
-    upDirection.value = newValue
-  }
-)
-
-watch(
-  () => props.materialMode,
-  (newValue) => {
-    materialMode.value = newValue
-  }
-)
-
-watch(
-  () => props.showPreview,
-  (newValue) => {
-    showPreview.value = newValue
-  }
-)
-
-watch(
-  () => props.playing,
-  (newValue) => {
-    const load3d = load3DSceneRef.value?.load3d as Load3dAnimation | null
-    load3d?.toggleAnimation(newValue)
-  }
-)
-
-watch(
-  () => props.selectedSpeed,
-  (newValue) => {
-    const load3d = load3DSceneRef.value?.load3d as Load3dAnimation | null
-    load3d?.setAnimationSpeed(newValue)
-  }
-)
-
-watch(
-  () => props.selectedAnimation,
-  (newValue) => {
-    const load3d = load3DSceneRef.value?.load3d as Load3dAnimation | null
-    load3d?.updateSelectedAnimation(newValue)
-  }
-)
-
-const emit = defineEmits<{
-  (e: 'animationListChange', animationList: string): void
-  (e: 'materialModeChange', materialMode: MaterialMode): void
-  (e: 'backgroundColorChange', color: string): void
-  (e: 'lightIntensityChange', lightIntensity: number): void
-  (e: 'fovChange', fov: number): void
-  (e: 'cameraTypeChange', cameraType: CameraType): void
-  (e: 'showGridChange', showGrid: boolean): void
-  (e: 'showPreviewChange', showPreview: boolean): void
-  (e: 'upDirectionChange', direction: UpDirection): void
-  (e: 'recording-status-change', status: boolean): void
-}>()
-
-const listenMaterialModeChange = (mode: MaterialMode) => {
-  materialMode.value = mode
-
-  showLightIntensityButton.value = mode === 'original'
-}
-
-const listenBackgroundColorChange = (value: string) => {
-  backgroundColor.value = value
-}
-
-const listenLightIntensityChange = (value: number) => {
-  lightIntensity.value = value
-}
-
-const listenFOVChange = (value: number) => {
-  fov.value = value
-}
-
-const listenCameraTypeChange = (value: CameraType) => {
-  cameraType.value = value
-
-  showFOVButton.value = cameraType.value === 'perspective'
-}
-
-const listenShowGridChange = (value: boolean) => {
-  showGrid.value = value
-}
-
-const listenShowPreviewChange = (value: boolean) => {
-  showPreview.value = value
-}
-
-const listenRecordingStatusChange = (value: boolean) => {
-  emit('recording-status-change', value)
-}
-
-const animationListeners = {
-  animationListChange: (newValue: any) => {
-    emit('animationListChange', newValue)
-  }
-}
-
-defineExpose({
-  load3DSceneRef
-})
-</script>

src/components/load3d/Load3DControls.vue

@@ -1,6 +1,10 @@
 <template>
   <div
     class="pointer-events-auto absolute top-12 left-2 z-20 flex flex-col rounded-lg bg-smoke-700/30"
+    @pointerdown.stop
+    @pointermove.stop
+    @pointerup.stop
+    @wheel.stop
   >
     <div class="show-menu relative">
       <Button class="p-button-rounded p-button-text" @click="toggleMenu">
@@ -20,7 +24,9 @@
             @click="selectCategory(category)"
           >
             <i :class="getCategoryIcon(category)" />
-            <span class="text-white">{{ t(categoryLabels[category]) }}</span>
+            <span class="whitespace-nowrap text-white">{{
+              $t(categoryLabels[category])
+            }}</span>
           </Button>
         </div>
       </div>
@@ -28,71 +34,47 @@
 
     <div v-show="activeCategory" class="rounded-lg bg-smoke-700/30">
       <SceneControls
-        v-if="activeCategory === 'scene'"
+        v-if="showSceneControls"
         ref="sceneControlsRef"
-        :background-color="backgroundColor"
-        :show-grid="showGrid"
-        :has-background-image="hasBackgroundImage"
-        @toggle-grid="handleToggleGrid"
-        @update-background-color="handleBackgroundColorChange"
+        v-model:show-grid="sceneConfig!.showGrid"
+        v-model:background-color="sceneConfig!.backgroundColor"
+        v-model:background-image="sceneConfig!.backgroundImage"
         @update-background-image="handleBackgroundImageUpdate"
       />
 
       <ModelControls
-        v-if="activeCategory === 'model'"
+        v-if="showModelControls"
         ref="modelControlsRef"
-        :input-spec="inputSpec"
-        :up-direction="upDirection"
-        :material-mode="materialMode"
-        :edge-threshold="edgeThreshold"
-        @update-up-direction="handleUpdateUpDirection"
-        @update-material-mode="handleUpdateMaterialMode"
-        @update-edge-threshold="handleUpdateEdgeThreshold"
+        v-model:material-mode="modelConfig!.materialMode"
+        v-model:up-direction="modelConfig!.upDirection"
       />
 
       <CameraControls
-        v-if="activeCategory === 'camera'"
+        v-if="showCameraControls"
         ref="cameraControlsRef"
-        :camera-type="cameraType"
-        :fov="fov"
-        :show-f-o-v-button="showFOVButton"
-        @switch-camera="switchCamera"
-        @update-f-o-v="handleUpdateFOV"
+        v-model:camera-type="cameraConfig!.cameraType"
+        v-model:fov="cameraConfig!.fov"
       />
 
       <LightControls
-        v-if="activeCategory === 'light'"
+        v-if="showLightControls"
         ref="lightControlsRef"
-        :light-intensity="lightIntensity"
-        :show-light-intensity-button="showLightIntensityButton"
-        @update-light-intensity="handleUpdateLightIntensity"
+        v-model:light-intensity="lightConfig!.intensity"
+        v-model:material-mode="modelConfig!.materialMode"
       />
 
       <ExportControls
-        v-if="activeCategory === 'export'"
+        v-if="showExportControls"
         ref="exportControlsRef"
         @export-model="handleExportModel"
       />
     </div>
-    <div v-if="showPreviewButton">
-      <Button class="p-button-rounded p-button-text" @click="togglePreview">
-        <i
-          v-tooltip.right="{ value: t('load3d.previewOutput'), showDelay: 300 }"
-          :class="[
-            'pi',
-            showPreview ? 'pi-eye' : 'pi-eye-slash',
-            'text-lg text-white'
-          ]"
-        />
-      </Button>
-    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { Tooltip } from 'primevue'
 import Button from 'primevue/button'
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 
 import CameraControls from '@/components/load3d/controls/CameraControls.vue'
 import ExportControls from '@/components/load3d/controls/ExportControls.vue'
@@ -100,31 +82,16 @@ import LightControls from '@/components/load3d/controls/LightControls.vue'
 import ModelControls from '@/components/load3d/controls/ModelControls.vue'
 import SceneControls from '@/components/load3d/controls/SceneControls.vue'
 import type {
-  CameraType,
-  MaterialMode,
-  UpDirection
+  CameraConfig,
+  LightConfig,
+  ModelConfig,
+  SceneConfig
 } from '@/extensions/core/load3d/interfaces'
-import { t } from '@/i18n'
-import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 
-const vTooltip = Tooltip
-
-const props = defineProps<{
-  inputSpec: CustomInputSpec
-  backgroundColor: string
-  showGrid: boolean
-  showPreview: boolean
-  lightIntensity: number
-  showLightIntensityButton: boolean
-  fov: number
-  showFOVButton: boolean
-  showPreviewButton: boolean
-  cameraType: CameraType
-  hasBackgroundImage?: boolean
-  upDirection: UpDirection
-  materialMode: MaterialMode
-  edgeThreshold?: number
-}>()
+const sceneConfig = defineModel<SceneConfig>('sceneConfig')
+const modelConfig = defineModel<ModelConfig>('modelConfig')
+const cameraConfig = defineModel<CameraConfig>('cameraConfig')
+const lightConfig = defineModel<LightConfig>('lightConfig')
 
 const isMenuOpen = ref(false)
 const activeCategory = ref<string>('scene')
@@ -137,15 +104,26 @@ const categoryLabels: Record<string, string> = {
 }
 
 const availableCategories = computed(() => {
-  const baseCategories = ['scene', 'model', 'camera', 'light']
-
-  if (!props.inputSpec.isAnimation) {
-    return [...baseCategories, 'export']
-  }
-
-  return baseCategories
+  return ['scene', 'model', 'camera', 'light', 'export']
 })
 
+const showSceneControls = computed(
+  () => activeCategory.value === 'scene' && !!sceneConfig.value
+)
+const showModelControls = computed(
+  () => activeCategory.value === 'model' && !!modelConfig.value
+)
+const showCameraControls = computed(
+  () => activeCategory.value === 'camera' && !!cameraConfig.value
+)
+const showLightControls = computed(
+  () =>
+    activeCategory.value === 'light' &&
+    !!lightConfig.value &&
+    !!modelConfig.value
+)
+const showExportControls = computed(() => activeCategory.value === 'export')
+
 const toggleMenu = () => {
   isMenuOpen.value = !isMenuOpen.value
 }
@@ -168,73 +146,14 @@ const getCategoryIcon = (category: string) => {
 }
 
 const emit = defineEmits<{
-  (e: 'switchCamera'): void
-  (e: 'toggleGrid', value: boolean): void
-  (e: 'updateBackgroundColor', color: string): void
-  (e: 'updateLightIntensity', value: number): void
-  (e: 'updateFOV', value: number): void
-  (e: 'togglePreview', value: boolean): void
   (e: 'updateBackgroundImage', file: File | null): void
-  (e: 'updateUpDirection', direction: UpDirection): void
-  (e: 'updateMaterialMode', mode: MaterialMode): void
-  (e: 'updateEdgeThreshold', value: number): void
   (e: 'exportModel', format: string): void
 }>()
 
-const backgroundColor = ref(props.backgroundColor)
-const showGrid = ref(props.showGrid)
-const showPreview = ref(props.showPreview)
-const lightIntensity = ref(props.lightIntensity)
-const upDirection = ref(props.upDirection || 'original')
-const materialMode = ref(props.materialMode || 'original')
-const showLightIntensityButton = ref(props.showLightIntensityButton)
-const fov = ref(props.fov)
-const showFOVButton = ref(props.showFOVButton)
-const showPreviewButton = ref(props.showPreviewButton)
-const hasBackgroundImage = ref(props.hasBackgroundImage)
-const edgeThreshold = ref(props.edgeThreshold)
-
-const switchCamera = () => {
-  emit('switchCamera')
-}
-
-const togglePreview = () => {
-  showPreview.value = !showPreview.value
-  emit('togglePreview', showPreview.value)
-}
-
-const handleToggleGrid = (value: boolean) => {
-  emit('toggleGrid', value)
-}
-
-const handleBackgroundColorChange = (value: string) => {
-  emit('updateBackgroundColor', value)
-}
-
 const handleBackgroundImageUpdate = (file: File | null) => {
   emit('updateBackgroundImage', file)
 }
 
-const handleUpdateUpDirection = (direction: UpDirection) => {
-  emit('updateUpDirection', direction)
-}
-
-const handleUpdateMaterialMode = (mode: MaterialMode) => {
-  emit('updateMaterialMode', mode)
-}
-
-const handleUpdateEdgeThreshold = (value: number) => {
-  emit('updateEdgeThreshold', value)
-}
-
-const handleUpdateLightIntensity = (value: number) => {
-  emit('updateLightIntensity', value)
-}
-
-const handleUpdateFOV = (value: number) => {
-  emit('updateFOV', value)
-}
-
 const handleExportModel = (format: string) => {
   emit('exportModel', format)
 }
@@ -247,101 +166,6 @@ const closeSlider = (e: MouseEvent) => {
   }
 }
 
-watch(
-  () => props.upDirection,
-  (newValue) => {
-    if (newValue) {
-      upDirection.value = newValue
-    }
-  }
-)
-
-watch(
-  () => props.backgroundColor,
-  (newValue) => {
-    backgroundColor.value = newValue
-  }
-)
-
-watch(
-  () => props.fov,
-  (newValue) => {
-    fov.value = newValue
-  }
-)
-
-watch(
-  () => props.lightIntensity,
-  (newValue) => {
-    lightIntensity.value = newValue
-  }
-)
-
-watch(
-  () => props.showFOVButton,
-  (newValue) => {
-    showFOVButton.value = newValue
-  }
-)
-
-watch(
-  () => props.showLightIntensityButton,
-  (newValue) => {
-    showLightIntensityButton.value = newValue
-  }
-)
-
-watch(
-  () => props.upDirection,
-  (newValue) => {
-    upDirection.value = newValue
-  }
-)
-
-watch(
-  () => props.materialMode,
-  (newValue) => {
-    materialMode.value = newValue
-  }
-)
-
-watch(
-  () => props.showPreviewButton,
-  (newValue) => {
-    showPreviewButton.value = newValue
-  }
-)
-
-watch(
-  () => props.showPreview,
-  (newValue) => {
-    showPreview.value = newValue
-  }
-)
-
-watch(
-  () => props.hasBackgroundImage,
-  (newValue) => {
-    hasBackgroundImage.value = newValue
-  }
-)
-
-watch(
-  () => props.materialMode,
-  (newValue) => {
-    if (newValue) {
-      materialMode.value = newValue
-    }
-  }
-)
-
-watch(
-  () => props.edgeThreshold,
-  (newValue) => {
-    edgeThreshold.value = newValue
-  }
-)
-
 onMounted(() => {
   document.addEventListener('click', closeSlider)
 })

src/components/load3d/Load3DScene.vue

@@ -1,238 +1,72 @@
 <template>
-  <div ref="container" class="comfy-load-3d relative h-full w-full">
-    <LoadingOverlay ref="loadingOverlayRef" />
+  <div
+    ref="container"
+    class="relative h-full w-full"
+    data-capture-wheel="true"
+    @pointerdown.stop
+    @pointermove.stop
+    @pointerup.stop
+    @mousedown.stop
+    @mousemove.stop
+    @mouseup.stop
+    @contextmenu.stop.prevent
+    @dragover.prevent.stop="handleDragOver"
+    @dragleave.stop="handleDragLeave"
+    @drop.prevent.stop="handleDrop"
+  >
+    <LoadingOverlay
+      ref="loadingOverlayRef"
+      :loading="loading"
+      :loading-message="loadingMessage"
+    />
+    <div
+      v-if="!isPreview && isDragging"
+      class="pointer-events-none absolute inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
+    >
+      <div
+        class="rounded-lg border-2 border-dashed border-blue-400 bg-blue-500/20 px-6 py-4 text-lg font-medium text-blue-100"
+      >
+        {{ dragMessage }}
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref, toRaw, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 
 import LoadingOverlay from '@/components/load3d/LoadingOverlay.vue'
-import type Load3d from '@/extensions/core/load3d/Load3d'
-import type Load3dAnimation from '@/extensions/core/load3d/Load3dAnimation'
-import type {
-  CameraType,
-  MaterialMode,
-  UpDirection
-} from '@/extensions/core/load3d/interfaces'
-import { t } from '@/i18n'
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
-import { useLoad3dService } from '@/services/load3dService'
+import { useLoad3dDrag } from '@/composables/useLoad3dDrag'
 
 const props = defineProps<{
-  node: LGraphNode
-  inputSpec: CustomInputSpec
-  backgroundColor: string
-  showGrid: boolean
-  lightIntensity: number
-  fov: number
-  cameraType: CameraType
-  showPreview: boolean
-  backgroundImage: string
-  upDirection: UpDirection
-  materialMode: MaterialMode
-  edgeThreshold?: number
-  extraListeners?: Record<string, (value: any) => void>
+  initializeLoad3d: (containerRef: HTMLElement) => Promise<void>
+  cleanup: () => void
+  loading: boolean
+  loadingMessage: string
+  onModelDrop?: (file: File) => void | Promise<void>
+  isPreview: boolean
 }>()
 
 const container = ref<HTMLElement | null>(null)
-const node = ref(props.node)
-const load3d = ref<Load3d | Load3dAnimation | null>(null)
 const loadingOverlayRef = ref<InstanceType<typeof LoadingOverlay> | null>(null)
 
-const eventConfig = {
-  materialModeChange: (value: string) =>
-    emit('materialModeChange', value as MaterialMode),
-  backgroundColorChange: (value: string) =>
-    emit('backgroundColorChange', value),
-  lightIntensityChange: (value: number) => emit('lightIntensityChange', value),
-  fovChange: (value: number) => emit('fovChange', value),
-  cameraTypeChange: (value: string) =>
-    emit('cameraTypeChange', value as CameraType),
-  showGridChange: (value: boolean) => emit('showGridChange', value),
-  showPreviewChange: (value: boolean) => emit('showPreviewChange', value),
-  backgroundImageChange: (value: string) =>
-    emit('backgroundImageChange', value),
-  backgroundImageLoadingStart: () =>
-    loadingOverlayRef.value?.startLoading(t('load3d.loadingBackgroundImage')),
-  backgroundImageLoadingEnd: () => loadingOverlayRef.value?.endLoading(),
-  upDirectionChange: (value: string) =>
-    emit('upDirectionChange', value as UpDirection),
-  edgeThresholdChange: (value: number) => emit('edgeThresholdChange', value),
-  modelLoadingStart: () =>
-    loadingOverlayRef.value?.startLoading(t('load3d.loadingModel')),
-  modelLoadingEnd: () => loadingOverlayRef.value?.endLoading(),
-  materialLoadingStart: () =>
-    loadingOverlayRef.value?.startLoading(t('load3d.switchingMaterialMode')),
-  materialLoadingEnd: () => loadingOverlayRef.value?.endLoading(),
-  exportLoadingStart: (message: string) => {
-    loadingOverlayRef.value?.startLoading(message || t('load3d.exportingModel'))
-  },
-  exportLoadingEnd: () => {
-    loadingOverlayRef.value?.endLoading()
-  },
-  recordingStatusChange: (value: boolean) =>
-    emit('recordingStatusChange', value)
-} as const
-
-watch(
-  () => props.showPreview,
-  (newValue) => {
-    if (load3d.value) {
-      const rawLoad3d = toRaw(load3d.value) as Load3d
-
-      rawLoad3d.togglePreview(newValue)
-    }
-  }
-)
-
-watch(
-  () => props.cameraType,
-  (newValue) => {
-    if (load3d.value) {
-      const rawLoad3d = toRaw(load3d.value) as Load3d
-
-      rawLoad3d.toggleCamera(newValue)
-    }
-  }
-)
-
-watch(
-  () => props.fov,
-  (newValue) => {
-    if (load3d.value) {
-      const rawLoad3d = toRaw(load3d.value) as Load3d
-
-      rawLoad3d.setFOV(newValue)
-    }
-  }
-)
-
-watch(
-  () => props.lightIntensity,
-  (newValue) => {
-    if (load3d.value) {
-      const rawLoad3d = toRaw(load3d.value) as Load3d
-
-      rawLoad3d.setLightIntensity(newValue)
-    }
-  }
-)
-
-watch(
-  () => props.showGrid,
-  (newValue) => {
-    if (load3d.value) {
-      const rawLoad3d = toRaw(load3d.value) as Load3d
-
-      rawLoad3d.toggleGrid(newValue)
-    }
-  }
-)
-
-watch(
-  () => props.backgroundColor,
-  (newValue) => {
-    if (load3d.value) {
-      const rawLoad3d = toRaw(load3d.value) as Load3d
-
-      rawLoad3d.setBackgroundColor(newValue)
-    }
-  }
-)
-
-watch(
-  () => props.backgroundImage,
-  async (newValue) => {
-    if (load3d.value) {
-      const rawLoad3d = toRaw(load3d.value) as Load3d
-
-      await rawLoad3d.setBackgroundImage(newValue)
-    }
-  }
-)
-
-watch(
-  () => props.upDirection,
-  (newValue) => {
-    if (load3d.value) {
-      const rawLoad3d = toRaw(load3d.value) as Load3d
-
-      rawLoad3d.setUpDirection(newValue)
-    }
-  }
-)
-
-watch(
-  () => props.materialMode,
-  (newValue) => {
-    if (load3d.value) {
-      const rawLoad3d = toRaw(load3d.value) as Load3d
-
-      rawLoad3d.setMaterialMode(newValue)
-    }
-  }
-)
-
-watch(
-  () => props.edgeThreshold,
-  (newValue) => {
-    if (load3d.value && newValue) {
-      const rawLoad3d = toRaw(load3d.value) as Load3d
-
-      rawLoad3d.setEdgeThreshold(newValue)
-    }
-  }
-)
-
-const emit = defineEmits<{
-  (e: 'materialModeChange', materialMode: MaterialMode): void
-  (e: 'backgroundColorChange', color: string): void
-  (e: 'lightIntensityChange', lightIntensity: number): void
-  (e: 'fovChange', fov: number): void
-  (e: 'cameraTypeChange', cameraType: CameraType): void
-  (e: 'showGridChange', showGrid: boolean): void
-  (e: 'showPreviewChange', showPreview: boolean): void
-  (e: 'backgroundImageChange', backgroundImage: string): void
-  (e: 'upDirectionChange', upDirection: UpDirection): void
-  (e: 'edgeThresholdChange', threshold: number): void
-  (e: 'recordingStatusChange', status: boolean): void
-}>()
-
-const handleEvents = (action: 'add' | 'remove') => {
-  if (!load3d.value) return
-
-  Object.entries(eventConfig).forEach(([event, handler]) => {
-    const method = `${action}EventListener` as const
-    load3d.value?.[method](event, handler)
+const { isDragging, dragMessage, handleDragOver, handleDragLeave, handleDrop } =
+  useLoad3dDrag({
+    onModelDrop: async (file) => {
+      if (props.onModelDrop) {
+        await props.onModelDrop(file)
+      }
+    },
+    disabled: computed(() => props.isPreview)
   })
 
-  if (props.extraListeners) {
-    Object.entries(props.extraListeners).forEach(([event, handler]) => {
-      const method = `${action}EventListener` as const
-      load3d.value?.[method](event, handler)
-    })
-  }
-}
-
 onMounted(() => {
   if (container.value) {
-    load3d.value = useLoad3dService().registerLoad3d(
-      node.value as LGraphNode,
-      container.value,
-      props.inputSpec
-    )
+    void props.initializeLoad3d(container.value)
   }
-  handleEvents('add')
 })
 
 onUnmounted(() => {
-  handleEvents('remove')
-  useLoad3dService().removeLoad3d(node.value as LGraphNode)
-})
-
-defineExpose({
-  load3d
+  props.cleanup()
 })
 </script>

src/components/load3d/Load3dViewerContent.vue

@@ -9,9 +9,22 @@
     <div ref="mainContentRef" class="relative flex-1">
       <div
         ref="containerRef"
-        class="comfy-load-3d-viewer absolute h-full w-full"
+        class="absolute h-full w-full"
         @resize="viewer.handleResize"
+        @dragover.prevent.stop="handleDragOver"
+        @dragleave.stop="handleDragLeave"
+        @drop.prevent.stop="handleDrop"
       />
+      <div
+        v-if="isDragging"
+        class="pointer-events-none absolute inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
+      >
+        <div
+          class="rounded-lg border-2 border-dashed border-blue-400 bg-blue-500/20 px-6 py-4 text-lg font-medium text-blue-100"
+        >
+          {{ dragMessage }}
+        </div>
+      </div>
     </div>
 
     <div class="flex w-72 flex-col">
@@ -75,6 +88,7 @@ import ExportControls from '@/components/load3d/controls/viewer/ViewerExportCont
 import LightControls from '@/components/load3d/controls/viewer/ViewerLightControls.vue'
 import ModelControls from '@/components/load3d/controls/viewer/ViewerModelControls.vue'
 import SceneControls from '@/components/load3d/controls/viewer/ViewerSceneControls.vue'
+import { useLoad3dDrag } from '@/composables/useLoad3dDrag'
 import { t } from '@/i18n'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { useLoad3dService } from '@/services/load3dService'
@@ -92,6 +106,14 @@ const mutationObserver = ref<MutationObserver | null>(null)
 
 const viewer = useLoad3dService().getOrCreateViewer(toRaw(props.node))
 
+const { isDragging, dragMessage, handleDragOver, handleDragLeave, handleDrop } =
+  useLoad3dDrag({
+    onModelDrop: async (file) => {
+      await viewer.handleModelDrop(file)
+    },
+    disabled: viewer.isPreview
+  })
+
 onMounted(async () => {
   const source = useLoad3dService().getLoad3d(props.node)
   if (source && containerRef.value) {

src/components/load3d/LoadingOverlay.vue

@@ -1,8 +1,8 @@
 <template>
   <Transition name="fade">
     <div
-      v-if="modelLoading"
-      class="absolute inset-0 z-50 flex items-center justify-center bg-black/50"
+      v-if="loading"
+      class="bg-opacity-50 absolute inset-0 z-50 flex items-center justify-center bg-black"
     >
       <div class="flex flex-col items-center">
         <div class="spinner" />
@@ -15,29 +15,10 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, ref } from 'vue'
-
-import { t } from '@/i18n'
-
-const modelLoading = ref(false)
-const loadingMessage = ref('')
-
-const startLoading = async (message?: string) => {
-  loadingMessage.value = message || t('load3d.loadingModel')
-  modelLoading.value = true
-
-  await nextTick()
-}
-
-const endLoading = async () => {
-  await new Promise((resolve) => setTimeout(resolve, 100))
-  modelLoading.value = false
-}
-
-defineExpose({
-  startLoading,
-  endLoading
-})
+defineProps<{
+  loading: boolean
+  loadingMessage: string
+}>()
 </script>
 
 <style scoped>

src/components/load3d/controls/AnimationControls.vue

@@ -15,7 +15,6 @@
       option-label="name"
       option-value="value"
       class="w-24"
-      @change="speedChange"
     />
 
     <Select
@@ -24,7 +23,6 @@
       option-label="name"
       option-value="index"
       class="w-32"
-      @change="animationChange"
     />
   </div>
 </template>
@@ -32,23 +30,13 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
 import Select from 'primevue/select'
-import { ref, watch } from 'vue'
 
-const props = defineProps<{
-  animations: Array<{ name: string; index: number }>
-  playing: boolean
-}>()
+type Animation = { name: string; index: number }
 
-const emit = defineEmits<{
-  (e: 'togglePlay', value: boolean): void
-  (e: 'speedChange', value: number): void
-  (e: 'animationChange', value: number): void
-}>()
-
-const animations = ref(props.animations)
-const playing = ref(props.playing)
-const selectedSpeed = ref(1)
-const selectedAnimation = ref(0)
+const animations = defineModel<Animation[]>('animations')
+const playing = defineModel<boolean>('playing')
+const selectedSpeed = defineModel<number>('selectedSpeed')
+const selectedAnimation = defineModel<number>('selectedAnimation')
 
 const speedOptions = [
   { name: '0.1x', value: 0.1 },
@@ -58,24 +46,7 @@ const speedOptions = [
   { name: '2x', value: 2 }
 ]
 
-watch(
-  () => props.animations,
-  (newVal) => {
-    animations.value = newVal
-  }
-)
-
 const togglePlay = () => {
   playing.value = !playing.value
-
-  emit('togglePlay', playing.value)
-}
-
-const speedChange = () => {
-  emit('speedChange', selectedSpeed.value)
-}
-
-const animationChange = () => {
-  emit('animationChange', selectedAnimation.value)
 }
 </script>

src/components/load3d/controls/CameraControls.vue

@@ -3,7 +3,7 @@
     <Button class="p-button-rounded p-button-text" @click="switchCamera">
       <i
         v-tooltip.right="{
-          value: t('load3d.switchCamera'),
+          value: $t('load3d.switchCamera'),
           showDelay: 300
         }"
         :class="['pi', getCameraIcon, 'text-lg text-white']"
@@ -12,7 +12,7 @@
     <div v-if="showFOVButton" class="show-fov relative">
       <Button class="p-button-rounded p-button-text" @click="toggleFOV">
         <i
-          v-tooltip.right="{ value: t('load3d.fov'), showDelay: 300 }"
+          v-tooltip.right="{ value: $t('load3d.fov'), showDelay: 300 }"
           class="pi pi-expand text-lg text-white"
         />
       </Button>
@@ -21,83 +21,37 @@
         class="absolute top-0 left-12 rounded-lg bg-black/50 p-4 shadow-lg"
         style="width: 150px"
       >
-        <Slider
-          v-model="fov"
-          class="w-full"
-          :min="10"
-          :max="150"
-          :step="1"
-          @change="updateFOV"
-        />
+        <Slider v-model="fov" class="w-full" :min="10" :max="150" :step="1" />
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { Tooltip } from 'primevue'
 import Button from 'primevue/button'
 import Slider from 'primevue/slider'
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 
 import type { CameraType } from '@/extensions/core/load3d/interfaces'
-import { t } from '@/i18n'
 
-const vTooltip = Tooltip
-
-const props = defineProps<{
-  cameraType: CameraType
-  fov: number
-  showFOVButton: boolean
-}>()
-
-const emit = defineEmits<{
-  (e: 'switchCamera'): void
-  (e: 'updateFOV', value: number): void
-}>()
-
-const cameraType = ref(props.cameraType)
-const fov = ref(props.fov)
-const showFOVButton = ref(props.showFOVButton)
 const showFOV = ref(false)
 
-watch(
-  () => props.fov,
-  (newValue) => {
-    fov.value = newValue
-  }
-)
-
-watch(
-  () => props.showFOVButton,
-  (newValue) => {
-    showFOVButton.value = newValue
-  }
-)
-
-watch(
-  () => props.cameraType,
-  (newValue) => {
-    cameraType.value = newValue
-  }
-)
-
-const switchCamera = () => {
-  emit('switchCamera')
-}
+const cameraType = defineModel<CameraType>('cameraType')
+const fov = defineModel<number>('fov')
+const showFOVButton = computed(() => cameraType.value === 'perspective')
+const getCameraIcon = computed(() => {
+  return cameraType.value === 'perspective' ? 'pi-camera' : 'pi-camera'
+})
 
 const toggleFOV = () => {
   showFOV.value = !showFOV.value
 }
 
-const updateFOV = () => {
-  emit('updateFOV', fov.value)
+const switchCamera = () => {
+  cameraType.value =
+    cameraType.value === 'perspective' ? 'orthographic' : 'perspective'
 }
 
-const getCameraIcon = computed(() => {
-  return props.cameraType === 'perspective' ? 'pi-camera' : 'pi-camera'
-})
-
 const closeCameraSlider = (e: MouseEvent) => {
   const target = e.target as HTMLElement
 

src/components/load3d/controls/ExportControls.vue

@@ -7,7 +7,7 @@
       >
         <i
           v-tooltip.right="{
-            value: t('load3d.exportModel'),
+            value: $t('load3d.exportModel'),
             showDelay: 300
           }"
           class="pi pi-download text-lg text-white"
@@ -33,14 +33,9 @@
 </template>
 
 <script setup lang="ts">
-import { Tooltip } from 'primevue'
 import Button from 'primevue/button'
 import { onMounted, onUnmounted, ref } from 'vue'
 
-import { t } from '@/i18n'
-
-const vTooltip = Tooltip
-
 const emit = defineEmits<{
   (e: 'exportModel', format: string): void
 }>()

src/components/load3d/controls/LightControls.vue

@@ -7,7 +7,7 @@
       >
         <i
           v-tooltip.right="{
-            value: t('load3d.lightIntensity'),
+            value: $t('load3d.lightIntensity'),
             showDelay: 300
           }"
           class="pi pi-sun text-lg text-white"
@@ -24,7 +24,6 @@
           :min="lightIntensityMinimum"
           :max="lightIntensityMaximum"
           :step="lightAdjustmentIncrement"
-          @change="updateLightIntensity"
         />
       </div>
     </div>
@@ -32,27 +31,19 @@
 </template>
 
 <script setup lang="ts">
-import { Tooltip } from 'primevue'
 import Button from 'primevue/button'
 import Slider from 'primevue/slider'
-import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 
-import { t } from '@/i18n'
+import type { MaterialMode } from '@/extensions/core/load3d/interfaces'
 import { useSettingStore } from '@/platform/settings/settingStore'
 
-const vTooltip = Tooltip
+const lightIntensity = defineModel<number>('lightIntensity')
+const materialMode = defineModel<MaterialMode>('materialMode')
 
-const props = defineProps<{
-  lightIntensity: number
-  showLightIntensityButton: boolean
-}>()
-
-const emit = defineEmits<{
-  (e: 'updateLightIntensity', value: number): void
-}>()
-
-const lightIntensity = ref(props.lightIntensity)
-const showLightIntensityButton = ref(props.showLightIntensityButton)
+const showLightIntensityButton = computed(
+  () => materialMode.value === 'original'
+)
 const showLightIntensity = ref(false)
 
 const lightIntensityMaximum = useSettingStore().get(
@@ -65,28 +56,10 @@ const lightAdjustmentIncrement = useSettingStore().get(
   'Comfy.Load3D.LightAdjustmentIncrement'
 )
 
-watch(
-  () => props.lightIntensity,
-  (newValue) => {
-    lightIntensity.value = newValue
-  }
-)
-
-watch(
-  () => props.showLightIntensityButton,
-  (newValue) => {
-    showLightIntensityButton.value = newValue
-  }
-)
-
 const toggleLightIntensity = () => {
   showLightIntensity.value = !showLightIntensity.value
 }
 
-const updateLightIntensity = () => {
-  emit('updateLightIntensity', lightIntensity.value)
-}
-
 const closeLightSlider = (e: MouseEvent) => {
   const target = e.target as HTMLElement
 

src/components/load3d/controls/ModelControls.vue

@@ -22,7 +22,7 @@
             :class="{ 'bg-blue-500': upDirection === direction }"
             @click="selectUpDirection(direction)"
           >
-            {{ formatOption(direction) }}
+            {{ direction.toUpperCase() }}
           </Button>
         </div>
       </div>
@@ -49,7 +49,7 @@
           <Button
             v-for="mode in materialModes"
             :key="mode"
-            class="p-button-text text-white"
+            class="p-button-text whitespace-nowrap text-white"
             :class="{ 'bg-blue-500': materialMode === mode }"
             @click="selectMaterialMode(mode)"
           >
@@ -58,75 +58,24 @@
         </div>
       </div>
     </div>
-
-    <div v-if="materialMode === 'lineart'" class="show-edge-threshold relative">
-      <Button
-        class="p-button-rounded p-button-text"
-        @click="toggleEdgeThreshold"
-      >
-        <i
-          v-tooltip.right="{
-            value: t('load3d.edgeThreshold'),
-            showDelay: 300
-          }"
-          class="pi pi-sliders-h text-lg text-white"
-        />
-      </Button>
-      <div
-        v-show="showEdgeThreshold"
-        class="absolute top-0 left-12 rounded-lg bg-black/50 p-4 shadow-lg"
-        style="width: 150px"
-      >
-        <label class="mb-1 block text-xs text-white"
-          >{{ t('load3d.edgeThreshold') }}: {{ edgeThreshold }}°</label
-        >
-        <Slider
-          v-model="edgeThreshold"
-          class="w-full"
-          :min="0"
-          :max="120"
-          :step="1"
-          @change="updateEdgeThreshold"
-        />
-      </div>
-    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { Tooltip } from 'primevue'
 import Button from 'primevue/button'
-import Slider from 'primevue/slider'
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 
 import type {
   MaterialMode,
   UpDirection
 } from '@/extensions/core/load3d/interfaces'
 import { t } from '@/i18n'
-import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 
-const vTooltip = Tooltip
+const materialMode = defineModel<MaterialMode>('materialMode')
+const upDirection = defineModel<UpDirection>('upDirection')
 
-const props = defineProps<{
-  inputSpec: CustomInputSpec
-  upDirection: UpDirection
-  materialMode: MaterialMode
-  edgeThreshold?: number
-}>()
-
-const emit = defineEmits<{
-  (e: 'updateUpDirection', direction: UpDirection): void
-  (e: 'updateMaterialMode', mode: MaterialMode): void
-  (e: 'updateEdgeThreshold', value: number): void
-}>()
-
-const upDirection = ref(props.upDirection || 'original')
-const materialMode = ref(props.materialMode || 'original')
-const edgeThreshold = ref(props.edgeThreshold || 85)
 const showUpDirection = ref(false)
 const showMaterialMode = ref(false)
-const showEdgeThreshold = ref(false)
 
 const upDirections: UpDirection[] = [
   'original',
@@ -146,65 +95,26 @@ const materialModes = computed(() => {
     //'depth' disable for now
   ]
 
-  if (!props.inputSpec.isAnimation && !props.inputSpec.isPreview) {
-    modes.push('lineart')
-  }
-
   return modes
 })
 
-watch(
-  () => props.upDirection,
-  (newValue) => {
-    if (newValue) {
-      upDirection.value = newValue
-    }
-  }
-)
-
-watch(
-  () => props.materialMode,
-  (newValue) => {
-    if (newValue) {
-      materialMode.value = newValue
-    }
-  }
-)
-
-watch(
-  () => props.edgeThreshold,
-  (newValue) => {
-    // @ts-expect-error fixme ts strict error
-    edgeThreshold.value = newValue
-  }
-)
-
 const toggleUpDirection = () => {
   showUpDirection.value = !showUpDirection.value
   showMaterialMode.value = false
-  showEdgeThreshold.value = false
 }
 
 const selectUpDirection = (direction: UpDirection) => {
   upDirection.value = direction
-  emit('updateUpDirection', direction)
   showUpDirection.value = false
 }
 
-const formatOption = (option: string) => {
-  if (option === 'original') return 'Original'
-  return option.toUpperCase()
-}
-
 const toggleMaterialMode = () => {
   showMaterialMode.value = !showMaterialMode.value
   showUpDirection.value = false
-  showEdgeThreshold.value = false
 }
 
 const selectMaterialMode = (mode: MaterialMode) => {
   materialMode.value = mode
-  emit('updateMaterialMode', mode)
   showMaterialMode.value = false
 }
 
@@ -212,16 +122,6 @@ const formatMaterialMode = (mode: MaterialMode) => {
   return t(`load3d.materialModes.${mode}`)
 }
 
-const toggleEdgeThreshold = () => {
-  showEdgeThreshold.value = !showEdgeThreshold.value
-  showUpDirection.value = false
-  showMaterialMode.value = false
-}
-
-const updateEdgeThreshold = () => {
-  emit('updateEdgeThreshold', edgeThreshold.value)
-}
-
 const closeSceneSlider = (e: MouseEvent) => {
   const target = e.target as HTMLElement
 
@@ -232,10 +132,6 @@ const closeSceneSlider = (e: MouseEvent) => {
   if (!target.closest('.show-material-mode')) {
     showMaterialMode.value = false
   }
-
-  if (!target.closest('.show-edge-threshold')) {
-    showEdgeThreshold.value = false
-  }
 }
 
 onMounted(() => {

src/components/load3d/controls/RecordingControls.vue

@@ -1,18 +1,6 @@
 <template>
   <div class="relative rounded-lg bg-smoke-700/30">
     <div class="flex flex-col gap-2">
-      <Button
-        class="p-button-rounded p-button-text"
-        @click="resizeNodeMatchOutput"
-      >
-        <i
-          v-tooltip.right="{
-            value: t('load3d.resizeNodeMatchOutput'),
-            showDelay: 300
-          }"
-          class="pi pi-window-maximize text-lg text-white"
-        />
-      </Button>
       <Button
         class="p-button-rounded p-button-text"
         :class="{
@@ -24,8 +12,8 @@
         <i
           v-tooltip.right="{
             value: isRecording
-              ? t('load3d.stopRecording')
-              : t('load3d.startRecording'),
+              ? $t('load3d.stopRecording')
+              : $t('load3d.startRecording'),
             showDelay: 300
           }"
           :class="[
@@ -39,11 +27,11 @@
       <Button
         v-if="hasRecording && !isRecording"
         class="p-button-rounded p-button-text"
-        @click="exportRecording"
+        @click="handleExportRecording"
       >
         <i
           v-tooltip.right="{
-            value: t('load3d.exportRecording'),
+            value: $t('load3d.exportRecording'),
             showDelay: 300
           }"
           class="pi pi-download text-lg text-white"
@@ -53,11 +41,11 @@
       <Button
         v-if="hasRecording && !isRecording"
         class="p-button-rounded p-button-text"
-        @click="clearRecording"
+        @click="handleClearRecording"
       >
         <i
           v-tooltip.right="{
-            value: t('load3d.clearRecording'),
+            value: $t('load3d.clearRecording'),
             showDelay: 300
           }"
           class="pi pi-trash text-lg text-white"
@@ -65,7 +53,7 @@
       </Button>
 
       <div
-        v-if="recordingDuration > 0 && !isRecording"
+        v-if="recordingDuration && recordingDuration > 0 && !isRecording"
         class="mt-1 text-center text-xs text-white"
       >
         {{ formatDuration(recordingDuration) }}
@@ -75,21 +63,11 @@
 </template>
 
 <script setup lang="ts">
-import { Tooltip } from 'primevue'
 import Button from 'primevue/button'
 
-import { t } from '@/i18n'
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { useLoad3dService } from '@/services/load3dService'
-
-const vTooltip = Tooltip
-
-const { hasRecording, isRecording, node, recordingDuration } = defineProps<{
-  hasRecording: boolean
-  isRecording: boolean
-  node: LGraphNode
-  recordingDuration: number
-}>()
+const hasRecording = defineModel<boolean>('hasRecording')
+const isRecording = defineModel<boolean>('isRecording')
+const recordingDuration = defineModel<number>('recordingDuration')
 
 const emit = defineEmits<{
   (e: 'startRecording'): void
@@ -98,49 +76,19 @@ const emit = defineEmits<{
   (e: 'clearRecording'): void
 }>()
 
-const resizeNodeMatchOutput = () => {
-  const outputWidth = node.widgets?.find((w) => w.name === 'width')
-  const outputHeight = node.widgets?.find((w) => w.name === 'height')
-
-  if (outputWidth && outputHeight && outputHeight.value && outputWidth.value) {
-    const [oldWidth, oldHeight] = node.size
-
-    const scene = node.widgets?.find((w) => w.name === 'image')
-
-    const sceneHeight = scene?.computedHeight
-
-    if (sceneHeight) {
-      const sceneWidth = oldWidth - 20
-
-      const outputRatio = Number(outputHeight.value) / Number(outputWidth.value)
-      const expectSceneHeight = sceneWidth * outputRatio
-
-      node.setSize([oldWidth, oldHeight + (expectSceneHeight - sceneHeight)])
-
-      node.graph?.setDirtyCanvas(true, true)
-
-      const load3d = useLoad3dService().getLoad3d(node as LGraphNode)
-
-      if (load3d) {
-        load3d.refreshViewport()
-      }
-    }
-  }
-}
-
 const toggleRecording = () => {
-  if (isRecording) {
+  if (isRecording.value) {
     emit('stopRecording')
   } else {
     emit('startRecording')
   }
 }
 
-const exportRecording = () => {
+const handleExportRecording = () => {
   emit('exportRecording')
 }
 
-const clearRecording = () => {
+const handleClearRecording = () => {
   emit('clearRecording')
 }
 

src/components/load3d/controls/SceneControls.vue

@@ -6,7 +6,7 @@
       @click="toggleGrid"
     >
       <i
-        v-tooltip.right="{ value: t('load3d.showGrid'), showDelay: 300 }"
+        v-tooltip.right="{ value: $t('load3d.showGrid'), showDelay: 300 }"
         class="pi pi-table text-lg text-white"
       />
     </Button>
@@ -15,7 +15,7 @@
       <Button class="p-button-rounded p-button-text" @click="openColorPicker">
         <i
           v-tooltip.right="{
-            value: t('load3d.backgroundColor'),
+            value: $t('load3d.backgroundColor'),
             showDelay: 300
           }"
           class="pi pi-palette text-lg text-white"
@@ -36,7 +36,7 @@
       <Button class="p-button-rounded p-button-text" @click="openImagePicker">
         <i
           v-tooltip.right="{
-            value: t('load3d.uploadBackgroundImage'),
+            value: $t('load3d.uploadBackgroundImage'),
             showDelay: 300
           }"
           class="pi pi-image text-lg text-white"
@@ -58,7 +58,7 @@
       >
         <i
           v-tooltip.right="{
-            value: t('load3d.removeBackgroundImage'),
+            value: $t('load3d.removeBackgroundImage'),
             showDelay: 300
           }"
           class="pi pi-times text-lg text-white"
@@ -69,60 +69,29 @@
 </template>
 
 <script setup lang="ts">
-import { Tooltip } from 'primevue'
 import Button from 'primevue/button'
-import { ref, watch } from 'vue'
-
-import { t } from '@/i18n'
-
-const vTooltip = Tooltip
-
-const props = defineProps<{
-  backgroundColor: string
-  showGrid: boolean
-  hasBackgroundImage?: boolean
-}>()
+import { computed, ref } from 'vue'
 
 const emit = defineEmits<{
-  (e: 'toggleGrid', value: boolean): void
-  (e: 'updateBackgroundColor', color: string): void
   (e: 'updateBackgroundImage', file: File | null): void
 }>()
 
-const backgroundColor = ref(props.backgroundColor)
-const showGrid = ref(props.showGrid)
-const hasBackgroundImage = ref(props.hasBackgroundImage)
+const showGrid = defineModel<boolean>('showGrid')
+const backgroundColor = defineModel<string>('backgroundColor')
+const backgroundImage = defineModel<string>('backgroundImage')
+const hasBackgroundImage = computed(
+  () => backgroundImage.value && backgroundImage.value !== ''
+)
+
 const colorPickerRef = ref<HTMLInputElement | null>(null)
 const imagePickerRef = ref<HTMLInputElement | null>(null)
 
-watch(
-  () => props.backgroundColor,
-  (newValue) => {
-    backgroundColor.value = newValue
-  }
-)
-
-watch(
-  () => props.showGrid,
-  (newValue) => {
-    showGrid.value = newValue
-  }
-)
-
-watch(
-  () => props.hasBackgroundImage,
-  (newValue) => {
-    hasBackgroundImage.value = newValue
-  }
-)
-
 const toggleGrid = () => {
   showGrid.value = !showGrid.value
-  emit('toggleGrid', showGrid.value)
 }
 
 const updateBackgroundColor = (color: string) => {
-  emit('updateBackgroundColor', color)
+  backgroundColor.value = color
 }
 
 const openColorPicker = () => {

src/components/load3d/controls/ViewerControls.vue

@@ -15,7 +15,6 @@
 </template>
 
 <script setup lang="ts">
-import { Tooltip } from 'primevue'
 import Button from 'primevue/button'
 
 import Load3DViewerContent from '@/components/load3d/Load3dViewerContent.vue'
@@ -24,8 +23,6 @@ import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { useLoad3dService } from '@/services/load3dService'
 import { useDialogStore } from '@/stores/dialogStore'
 
-const vTooltip = Tooltip
-
 const { node } = defineProps<{
   node: LGraphNode
 }>()

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

@@ -8,7 +8,7 @@
   </Select>
 
   <Button severity="secondary" text rounded @click="exportModel(exportFormat)">
-    {{ t('load3d.export') }}
+    {{ $t('load3d.export') }}
   </Button>
 </template>
 
@@ -17,8 +17,6 @@ import Button from 'primevue/button'
 import Select from 'primevue/select'
 import { ref } from 'vue'
 
-import { t } from '@/i18n'
-
 const emit = defineEmits<{
   (e: 'exportModel', format: string): void
 }>()

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

@@ -1,5 +1,5 @@
 <template>
-  <label>{{ t('load3d.lightIntensity') }}</label>
+  <label>{{ $t('load3d.lightIntensity') }}</label>
 
   <Slider
     v-model="lightIntensity"
@@ -13,7 +13,6 @@
 <script setup lang="ts">
 import Slider from 'primevue/slider'
 
-import { t } from '@/i18n'
 import { useSettingStore } from '@/platform/settings/settingStore'
 
 const lightIntensity = defineModel<number>('lightIntensity')

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

@@ -1,7 +1,7 @@
 <template>
   <div class="space-y-4">
     <div>
-      <label>{{ t('load3d.upDirection') }}</label>
+      <label>{{ $t('load3d.upDirection') }}</label>
       <Select
         v-model="upDirection"
         :options="upDirectionOptions"
@@ -11,7 +11,7 @@
     </div>
 
     <div>
-      <label>{{ t('load3d.materialMode') }}</label>
+      <label>{{ $t('load3d.materialMode') }}</label>
       <Select
         v-model="materialMode"
         :options="materialModeOptions"

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

@@ -2,7 +2,7 @@
   <div class="space-y-4">
     <div v-if="!hasBackgroundImage">
       <label>
-        {{ t('load3d.backgroundColor') }}
+        {{ $t('load3d.backgroundColor') }}
       </label>
       <input v-model="backgroundColor" type="color" class="w-full" />
     </div>
@@ -10,14 +10,14 @@
     <div>
       <Checkbox v-model="showGrid" input-id="showGrid" binary name="showGrid" />
       <label for="showGrid" class="pl-2">
-        {{ t('load3d.showGrid') }}
+        {{ $t('load3d.showGrid') }}
       </label>
     </div>
 
     <div v-if="!hasBackgroundImage">
       <Button
         severity="secondary"
-        :label="t('load3d.uploadBackgroundImage')"
+        :label="$t('load3d.uploadBackgroundImage')"
         icon="pi pi-image"
         class="w-full"
         @click="openImagePicker"
@@ -34,7 +34,7 @@
     <div v-if="hasBackgroundImage" class="space-y-2">
       <Button
         severity="secondary"
-        :label="t('load3d.removeBackgroundImage')"
+        :label="$t('load3d.removeBackgroundImage')"
         icon="pi pi-times"
         class="w-full"
         @click="removeBackgroundImage"
@@ -48,8 +48,6 @@ import Button from 'primevue/button'
 import Checkbox from 'primevue/checkbox'
 import { ref } from 'vue'
 
-import { t } from '@/i18n'
-
 const backgroundColor = defineModel<string>('backgroundColor')
 const showGrid = defineModel<boolean>('showGrid')
 

src/components/searchbox/NodeSearchBox.vue

@@ -51,7 +51,7 @@
       multiple
       :option-label="'display_name'"
       @complete="search($event.query)"
-      @option-select="emit('addNode', $event.value)"
+      @option-select="onAddNode($event.value)"
       @focused-option-changed="setHoverSuggestion($event)"
     >
       <template #option="{ option }">
@@ -78,6 +78,7 @@
 </template>
 
 <script setup lang="ts">
+import { debounce } from 'es-toolkit/compat'
 import Button from 'primevue/button'
 import Dialog from 'primevue/dialog'
 import { computed, nextTick, onMounted, ref } from 'vue'
@@ -88,6 +89,7 @@ import AutoCompletePlus from '@/components/primevueOverride/AutoCompletePlus.vue
 import NodeSearchFilter from '@/components/searchbox/NodeSearchFilter.vue'
 import NodeSearchItem from '@/components/searchbox/NodeSearchItem.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { useTelemetry } from '@/platform/telemetry'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 import { useNodeDefStore, useNodeFrequencyStore } from '@/stores/nodeDefStore'
 import type { FuseFilterWithValue } from '@/utils/fuseUtil'
@@ -96,6 +98,7 @@ import SearchFilterChip from '../common/SearchFilterChip.vue'
 
 const settingStore = useSettingStore()
 const { t } = useI18n()
+const telemetry = useTelemetry()
 
 const enableNodePreview = computed(() =>
   settingStore.get('Comfy.NodeSearchBoxImpl.NodePreview')
@@ -118,6 +121,14 @@ const placeholder = computed(() => {
 
 const nodeDefStore = useNodeDefStore()
 const nodeFrequencyStore = useNodeFrequencyStore()
+
+// Debounced search tracking (500ms as per implementation plan)
+const debouncedTrackSearch = debounce((query: string) => {
+  if (query.trim()) {
+    telemetry?.trackNodeSearch({ query })
+  }
+}, 500)
+
 const search = (query: string) => {
   const queryIsEmpty = query === '' && filters.length === 0
   currentQuery.value = query
@@ -128,10 +139,22 @@ const search = (query: string) => {
           limit: searchLimit
         })
       ]
+
+  // Track search queries with debounce
+  debouncedTrackSearch(query)
 }
 
 const emit = defineEmits(['addFilter', 'removeFilter', 'addNode'])
 
+// Track node selection and emit addNode event
+const onAddNode = (nodeDef: ComfyNodeDefImpl) => {
+  telemetry?.trackNodeSearchResultSelected({
+    node_type: nodeDef.name,
+    last_query: currentQuery.value
+  })
+  emit('addNode', nodeDef)
+}
+
 let inputElement: HTMLInputElement | null = null
 const reFocusInput = async () => {
   inputElement ??= document.getElementById(inputId) as HTMLInputElement

src/components/sidebar/ComfyMenuButton.vue

@@ -76,6 +76,7 @@ import { useI18n } from 'vue-i18n'
 
 import SettingDialogHeader from '@/components/dialog/header/SettingDialogHeader.vue'
 import ComfyLogoTransparent from '@/components/icons/ComfyLogoTransparent.vue'
+import { useWorkflowTemplateSelectorDialog } from '@/composables/useWorkflowTemplateSelectorDialog'
 import SettingDialogContent from '@/platform/settings/components/SettingDialogContent.vue'
 import { useColorPaletteService } from '@/services/colorPaletteService'
 import { useCommandStore } from '@/stores/commandStore'
@@ -160,7 +161,7 @@ const extraMenuItems = computed(() => [
     key: 'browse-templates',
     label: t('menuLabels.Browse Templates'),
     icon: 'icon-[comfy--template]',
-    command: () => commandStore.execute('Comfy.BrowseTemplates')
+    command: () => useWorkflowTemplateSelectorDialog().show('menu')
   },
   {
     key: 'settings',

src/components/sidebar/SidebarTemplatesButton.vue

@@ -12,19 +12,18 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
+import { useWorkflowTemplateSelectorDialog } from '@/composables/useWorkflowTemplateSelectorDialog'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { useCommandStore } from '@/stores/commandStore'
 
 import SidebarIcon from './SidebarIcon.vue'
 
 const settingStore = useSettingStore()
-const commandStore = useCommandStore()
 
 const isSmall = computed(
   () => settingStore.get('Comfy.Sidebar.Size') === 'small'
 )
 
 const openTemplates = () => {
-  void commandStore.execute('Comfy.BrowseTemplates')
+  useWorkflowTemplateSelectorDialog().show('sidebar')
 }
 </script>

src/components/sidebar/tabs/AssetSidebarTemplate.vue

@@ -0,0 +1,36 @@
+<template>
+  <div
+    class="flex h-full flex-col bg-interface-panel-surface"
+    :class="props.class"
+  >
+    <div>
+      <div
+        v-if="slots.top"
+        class="flex min-h-12 items-center border-b border-interface-stroke px-4 py-2"
+      >
+        <slot name="top" />
+      </div>
+      <div v-if="slots.header" class="px-4">
+        <slot name="header" />
+      </div>
+    </div>
+    <!-- h-0 to force scrollpanel to grow -->
+    <ScrollPanel class="h-0 grow">
+      <slot name="body" />
+    </ScrollPanel>
+    <div v-if="slots.footer">
+      <slot name="footer" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ScrollPanel from 'primevue/scrollpanel'
+import { useSlots } from 'vue'
+
+const props = defineProps<{
+  class?: string
+}>()
+
+const slots = useSlots()
+</script>

src/components/sidebar/tabs/AssetsSidebarTab.vue

@@ -0,0 +1,398 @@
+<template>
+  <AssetsSidebarTemplate>
+    <template #top>
+      <span v-if="!isInFolderView" class="font-bold">
+        {{ $t('sideToolbar.mediaAssets') }}
+      </span>
+      <div v-else class="flex w-full items-center justify-between gap-2">
+        <div class="flex items-center gap-2">
+          <span class="font-bold">{{ $t('Job ID') }}:</span>
+          <span class="text-sm">{{ folderPromptId?.substring(0, 8) }}</span>
+          <button
+            class="m-0 cursor-pointer border-0 bg-transparent p-0 outline-0"
+            role="button"
+            @click="copyJobId"
+          >
+            <i class="mb-1 icon-[lucide--copy] text-sm"></i>
+          </button>
+        </div>
+        <div>
+          <span>{{ formattedExecutionTime }}</span>
+        </div>
+      </div>
+    </template>
+    <template #header>
+      <!-- Job Detail View Header -->
+      <div v-if="isInFolderView" class="pt-4 pb-2">
+        <IconTextButton
+          :label="$t('sideToolbar.backToAssets')"
+          type="secondary"
+          @click="exitFolderView"
+        >
+          <template #icon>
+            <i class="icon-[lucide--arrow-left] size-4" />
+          </template>
+        </IconTextButton>
+      </div>
+      <!-- Normal Tab View -->
+      <TabList v-else v-model="activeTab" class="pt-4 pb-1">
+        <Tab value="input">{{ $t('sideToolbar.labels.imported') }}</Tab>
+        <Tab value="output">{{ $t('sideToolbar.labels.generated') }}</Tab>
+      </TabList>
+    </template>
+    <template #body>
+      <div v-if="displayAssets.length" class="relative size-full">
+        <VirtualGrid
+          v-if="displayAssets.length"
+          :items="mediaAssetsWithKey"
+          :grid-style="{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+            padding: '0.5rem',
+            gap: '0.5rem'
+          }"
+        >
+          <template #item="{ item }">
+            <MediaAssetCard
+              :asset="item"
+              :selected="isSelected(item.id)"
+              :show-output-count="shouldShowOutputCount(item)"
+              :output-count="getOutputCount(item)"
+              :show-delete-button="!isInFolderView"
+              @click="handleAssetSelect(item)"
+              @zoom="handleZoomClick(item)"
+              @output-count-click="enterFolderView(item)"
+              @asset-deleted="refreshAssets"
+            />
+          </template>
+        </VirtualGrid>
+        <div v-else-if="loading">
+          <ProgressSpinner
+            class="absolute left-1/2 w-[50px] -translate-x-1/2"
+          />
+        </div>
+        <div v-else>
+          <NoResultsPlaceholder
+            icon="pi pi-info-circle"
+            :title="
+              $t(
+                activeTab === 'input'
+                  ? 'sideToolbar.noImportedFiles'
+                  : 'sideToolbar.noGeneratedFiles'
+              )
+            "
+            :message="$t('sideToolbar.noFilesFoundMessage')"
+          />
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <div
+        v-if="hasSelection && activeTab === 'output'"
+        class="flex h-18 w-full items-center justify-between px-4"
+      >
+        <div>
+          <TextButton
+            v-if="isHoveringSelectionCount"
+            :label="$t('mediaAsset.selection.deselectAll')"
+            type="transparent"
+            @click="handleDeselectAll"
+            @mouseleave="isHoveringSelectionCount = false"
+          />
+          <span
+            v-else
+            role="button"
+            tabindex="0"
+            :aria-label="$t('mediaAsset.selection.deselectAll')"
+            class="cursor-pointer px-3 text-sm focus:ring-2 focus:ring-primary focus:outline-none"
+            @mouseenter="isHoveringSelectionCount = true"
+            @keydown.enter="handleDeselectAll"
+            @keydown.space.prevent="handleDeselectAll"
+          >
+            {{
+              $t('mediaAsset.selection.selectedCount', { count: selectedCount })
+            }}
+          </span>
+        </div>
+        <div class="flex gap-2">
+          <IconTextButton
+            v-if="!isInFolderView"
+            :label="$t('mediaAsset.selection.deleteSelected')"
+            type="secondary"
+            icon-position="right"
+            @click="handleDeleteSelected"
+          >
+            <template #icon>
+              <i class="icon-[lucide--trash-2] size-4" />
+            </template>
+          </IconTextButton>
+          <IconTextButton
+            :label="$t('mediaAsset.selection.downloadSelected')"
+            type="secondary"
+            icon-position="right"
+            @click="handleDownloadSelected"
+          >
+            <template #icon>
+              <i class="icon-[lucide--download] size-4" />
+            </template>
+          </IconTextButton>
+        </div>
+      </div>
+    </template>
+  </AssetsSidebarTemplate>
+  <ResultGallery
+    v-model:active-index="galleryActiveIndex"
+    :all-gallery-items="galleryItems"
+  />
+</template>
+
+<script setup lang="ts">
+import ProgressSpinner from 'primevue/progressspinner'
+import { useToast } from 'primevue/usetoast'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+
+import IconTextButton from '@/components/button/IconTextButton.vue'
+import TextButton from '@/components/button/TextButton.vue'
+import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
+import VirtualGrid from '@/components/common/VirtualGrid.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 { t } from '@/i18n'
+import MediaAssetCard from '@/platform/assets/components/MediaAssetCard.vue'
+import { useMediaAssets } from '@/platform/assets/composables/media/useMediaAssets'
+import { useAssetSelection } from '@/platform/assets/composables/useAssetSelection'
+import { useMediaAssetActions } from '@/platform/assets/composables/useMediaAssetActions'
+import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import { ResultItemImpl } from '@/stores/queueStore'
+import { formatDuration, getMediaTypeFromFilename } from '@/utils/formatUtil'
+
+import AssetsSidebarTemplate from './AssetSidebarTemplate.vue'
+
+const activeTab = ref<'input' | 'output'>('input')
+const folderPromptId = ref<string | null>(null)
+const folderExecutionTime = ref<number | undefined>(undefined)
+const isInFolderView = computed(() => folderPromptId.value !== null)
+
+const getOutputCount = (item: AssetItem): number => {
+  const count = item.user_metadata?.outputCount
+  return typeof count === 'number' && count > 0 ? count : 0
+}
+
+const shouldShowOutputCount = (item: AssetItem): boolean => {
+  if (activeTab.value !== 'output' || isInFolderView.value) {
+    return false
+  }
+  return getOutputCount(item) > 1
+}
+
+const formattedExecutionTime = computed(() => {
+  if (!folderExecutionTime.value) return ''
+  return formatDuration(folderExecutionTime.value * 1000)
+})
+
+const toast = useToast()
+
+const inputAssets = useMediaAssets('input')
+const outputAssets = useMediaAssets('output')
+
+// Asset selection
+const {
+  isSelected,
+  handleAssetClick,
+  hasSelection,
+  selectedCount,
+  clearSelection,
+  getSelectedAssets,
+  activate: activateSelection,
+  deactivate: deactivateSelection
+} = useAssetSelection()
+
+const { downloadMultipleAssets, deleteMultipleAssets } = useMediaAssetActions()
+
+// Hover state for selection count
+const isHoveringSelectionCount = ref(false)
+
+const currentAssets = computed(() =>
+  activeTab.value === 'input' ? inputAssets : outputAssets
+)
+const loading = computed(() => currentAssets.value.loading.value)
+const error = computed(() => currentAssets.value.error.value)
+const mediaAssets = computed(() => currentAssets.value.media.value)
+
+const galleryActiveIndex = ref(-1)
+const currentGalleryAssetId = ref<string | null>(null)
+
+const folderAssets = ref<AssetItem[]>([])
+
+const displayAssets = computed(() => {
+  if (isInFolderView.value) {
+    return folderAssets.value
+  }
+  return mediaAssets.value
+})
+
+watch(displayAssets, (newAssets) => {
+  if (currentGalleryAssetId.value && galleryActiveIndex.value !== -1) {
+    const newIndex = newAssets.findIndex(
+      (asset) => asset.id === currentGalleryAssetId.value
+    )
+    if (newIndex !== -1) {
+      galleryActiveIndex.value = newIndex
+    }
+  }
+})
+
+watch(galleryActiveIndex, (index) => {
+  if (index === -1) {
+    currentGalleryAssetId.value = null
+  }
+})
+
+const galleryItems = computed(() => {
+  return displayAssets.value.map((asset) => {
+    const mediaType = getMediaTypeFromFilename(asset.name)
+    const resultItem = new ResultItemImpl({
+      filename: asset.name,
+      subfolder: '',
+      type: 'output',
+      nodeId: '0',
+      mediaType: mediaType === 'image' ? 'images' : mediaType
+    })
+
+    Object.defineProperty(resultItem, 'url', {
+      get() {
+        return asset.preview_url || ''
+      },
+      configurable: true
+    })
+
+    return resultItem
+  })
+})
+
+// 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) {
+    console.error('Failed to refresh assets:', error.value)
+  }
+}
+
+watch(
+  activeTab,
+  () => {
+    clearSelection()
+    void refreshAssets()
+  },
+  { immediate: true }
+)
+
+const handleAssetSelect = (asset: AssetItem) => {
+  const index = displayAssets.value.findIndex((a) => a.id === asset.id)
+  handleAssetClick(asset, index, displayAssets.value)
+}
+
+const handleZoomClick = (asset: AssetItem) => {
+  currentGalleryAssetId.value = asset.id
+  const index = displayAssets.value.findIndex((a) => a.id === asset.id)
+  if (index !== -1) {
+    galleryActiveIndex.value = index
+  }
+}
+
+const enterFolderView = (asset: AssetItem) => {
+  const metadata = getOutputAssetMetadata(asset.user_metadata)
+  if (!metadata) {
+    console.warn('Invalid output asset metadata')
+    return
+  }
+
+  const { promptId, allOutputs, executionTimeInSeconds } = metadata
+
+  if (!promptId || !Array.isArray(allOutputs) || allOutputs.length === 0) {
+    console.warn('Missing required folder view data')
+    return
+  }
+
+  folderPromptId.value = promptId
+  folderExecutionTime.value = executionTimeInSeconds
+
+  folderAssets.value = allOutputs.map((output) => ({
+    id: `${output.nodeId}-${output.filename}`,
+    name: output.filename,
+    size: 0,
+    created_at: asset.created_at,
+    tags: ['output'],
+    preview_url: output.url,
+    user_metadata: {
+      promptId,
+      nodeId: output.nodeId,
+      subfolder: output.subfolder,
+      executionTimeInSeconds,
+      workflow: metadata.workflow
+    }
+  }))
+}
+
+const exitFolderView = () => {
+  folderPromptId.value = null
+  folderExecutionTime.value = undefined
+  folderAssets.value = []
+  clearSelection()
+}
+
+onMounted(() => {
+  activateSelection()
+})
+
+onUnmounted(() => {
+  deactivateSelection()
+})
+
+const handleDeselectAll = () => {
+  clearSelection()
+  isHoveringSelectionCount.value = false
+}
+
+const copyJobId = async () => {
+  if (folderPromptId.value) {
+    try {
+      await navigator.clipboard.writeText(folderPromptId.value)
+      toast.add({
+        severity: 'success',
+        summary: t('mediaAsset.jobIdToast.copied'),
+        detail: t('mediaAsset.jobIdToast.jobIdCopied'),
+        life: 2000
+      })
+    } catch (error) {
+      toast.add({
+        severity: 'error',
+        summary: t('mediaAsset.jobIdToast.error'),
+        detail: t('mediaAsset.jobIdToast.jobIdCopyFailed'),
+        life: 3000
+      })
+    }
+  }
+}
+
+const handleDownloadSelected = () => {
+  const selectedAssets = getSelectedAssets(displayAssets.value)
+  downloadMultipleAssets(selectedAssets)
+  clearSelection()
+}
+
+const handleDeleteSelected = async () => {
+  const selectedAssets = getSelectedAssets(displayAssets.value)
+  await deleteMultipleAssets(selectedAssets)
+  clearSelection()
+}
+</script>

src/components/sidebar/tabs/QueueSidebarTab.vue

@@ -104,6 +104,7 @@ import { useI18n } from 'vue-i18n'
 
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import VirtualGrid from '@/components/common/VirtualGrid.vue'
+import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import type { ComfyNode } from '@/platform/workflow/validation/schemas/workflowSchema'
 import { api } from '@/scripts/api'
@@ -206,7 +207,9 @@ const menuItems = computed<MenuItem[]>(() => {
       label: t('g.loadWorkflow'),
       icon: 'pi pi-file-export',
       command: () => menuTargetTask.value?.loadWorkflow(app),
-      disabled: !menuTargetTask.value?.workflow
+      disabled: isCloud
+        ? !menuTargetTask.value?.isHistory
+        : !menuTargetTask.value?.workflow
     },
     {
       label: t('g.goToNode'),

src/components/tab/Tab.vue

@@ -0,0 +1,48 @@
+<template>
+  <button
+    :id="tabId"
+    :class="tabClasses"
+    role="tab"
+    :aria-selected="isActive"
+    :aria-controls="panelId"
+    :tabindex="0"
+    @click="handleClick"
+  >
+    <slot />
+  </button>
+</template>
+
+<script setup lang="ts">
+import type { Ref } from 'vue'
+import { computed, inject } from 'vue'
+
+import { cn } from '@/utils/tailwindUtil'
+
+const { value, panelId } = defineProps<{
+  value: string
+  panelId?: string
+}>()
+
+const currentValue = inject<Ref<string>>('tabs-value')
+const updateValue = inject<(value: string) => void>('tabs-update')
+
+const tabId = computed(() => `tab-${value}`)
+const isActive = computed(() => currentValue?.value === value)
+
+const tabClasses = computed(() => {
+  return cn(
+    // Base styles from TextButton
+    'flex items-center justify-center shrink-0',
+    'px-2.5 py-2 text-sm rounded-lg cursor-pointer transition-all duration-200',
+    'outline-hidden border-none',
+    // State styles with semantic tokens
+    isActive.value
+      ? 'bg-interface-menu-component-surface-hovered text-text-primary text-bold'
+      : 'bg-transparent text-text-secondary hover:bg-button-hover-surface focus:bg-button-hover-surface'
+  )
+})
+
+const handleClick = () => {
+  updateValue?.(value)
+}
+</script>

src/components/tab/TabList.stories.ts

@@ -0,0 +1,153 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import Tab from './Tab.vue'
+import TabList from './TabList.vue'
+
+const meta: Meta<typeof TabList> = {
+  title: 'Components/Tab/TabList',
+  component: TabList,
+  tags: ['autodocs'],
+  argTypes: {
+    modelValue: {
+      control: 'text',
+      description: 'The currently selected tab value'
+    },
+    'onUpdate:modelValue': { action: 'update:modelValue' }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { TabList, Tab },
+    setup() {
+      const activeTab = ref(args.modelValue || 'tab1')
+      return { activeTab }
+    },
+    template: `
+      <TabList v-model="activeTab">
+        <Tab value="tab1">Tab 1</Tab>
+        <Tab value="tab2">Tab 2</Tab>
+        <Tab value="tab3">Tab 3</Tab>
+      </TabList>
+      <div class="mt-4 p-4 border rounded">
+        Selected tab: {{ activeTab }}
+      </div>
+    `
+  }),
+  args: {
+    modelValue: 'tab1'
+  }
+}
+
+export const ManyTabs: Story = {
+  render: () => ({
+    components: { TabList, Tab },
+    setup() {
+      const activeTab = ref('tab1')
+      return { activeTab }
+    },
+    template: `
+      <TabList v-model="activeTab">
+        <Tab value="tab1">Dashboard</Tab>
+        <Tab value="tab2">Analytics</Tab>
+        <Tab value="tab3">Reports</Tab>
+        <Tab value="tab4">Settings</Tab>
+        <Tab value="tab5">Profile</Tab>
+      </TabList>
+      <div class="mt-4 p-4 border rounded">
+        Selected tab: {{ activeTab }}
+      </div>
+    `
+  })
+}
+
+export const WithIcons: Story = {
+  render: () => ({
+    components: { TabList, Tab },
+    setup() {
+      const activeTab = ref('home')
+      return { activeTab }
+    },
+    template: `
+      <TabList v-model="activeTab">
+        <Tab value="home">
+          <i class="pi pi-home mr-2"></i>
+          Home
+        </Tab>
+        <Tab value="users">
+          <i class="pi pi-users mr-2"></i>
+          Users
+        </Tab>
+        <Tab value="settings">
+          <i class="pi pi-cog mr-2"></i>
+          Settings
+        </Tab>
+      </TabList>
+      <div class="mt-4 p-4 border rounded">
+        Selected tab: {{ activeTab }}
+      </div>
+    `
+  })
+}
+
+export const LongLabels: Story = {
+  render: () => ({
+    components: { TabList, Tab },
+    setup() {
+      const activeTab = ref('overview')
+      return { activeTab }
+    },
+    template: `
+      <TabList v-model="activeTab">
+        <Tab value="overview">Project Overview</Tab>
+        <Tab value="documentation">Documentation & Guides</Tab>
+        <Tab value="deployment">Deployment Settings</Tab>
+        <Tab value="monitoring">Monitoring & Analytics</Tab>
+      </TabList>
+      <div class="mt-4 p-4 border rounded">
+        Selected tab: {{ activeTab }}
+      </div>
+    `
+  })
+}
+
+export const Interactive: Story = {
+  render: () => ({
+    components: { TabList, Tab },
+    setup() {
+      const activeTab = ref('input')
+      const handleTabChange = (value: string) => {
+        console.log('Tab changed to:', value)
+      }
+      return { activeTab, handleTabChange }
+    },
+    template: `
+      <div class="space-y-4">
+        <div>
+          <h3 class="text-sm font-semibold mb-2">Example: Media Assets</h3>
+          <TabList v-model="activeTab" @update:model-value="handleTabChange">
+            <Tab value="input">Imported</Tab>
+            <Tab value="output">Generated</Tab>
+          </TabList>
+        </div>
+        
+        <div class="p-4 bg-gray-50 dark:bg-gray-800 rounded">
+          <div v-if="activeTab === 'input'">
+            <p>Showing imported assets...</p>
+          </div>
+          <div v-else-if="activeTab === 'output'">
+            <p>Showing generated assets...</p>
+          </div>
+        </div>
+        
+        <div class="text-sm text-gray-600">
+          Current tab value: <code>{{ activeTab }}</code>
+        </div>
+      </div>
+    `
+  })
+}

src/components/tab/TabList.vue

@@ -0,0 +1,17 @@
+<template>
+  <div role="tablist" class="flex w-full items-center gap-2 pb-1">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { provide } from 'vue'
+
+const modelValue = defineModel<string>({ required: true })
+
+// Provide for child Tab components
+provide('tabs-value', modelValue)
+provide('tabs-update', (value: string) => {
+  modelValue.value = value
+})
+</script>

src/components/toast/GlobalToast.vue

@@ -66,6 +66,7 @@ function updateToastPosition() {
     .p-toast.p-component.p-toast-top-right {
       top: ${rect.top + 100}px !important;
       right: ${window.innerWidth - (rect.left + rect.width) + 20}px !important;
+       z-index: 10000 !important;
     }
   `
 }

src/components/toast/VueNodesMigrationToast.vue

@@ -0,0 +1,48 @@
+<template>
+  <Toast
+    group="vue-nodes-migration"
+    position="bottom-center"
+    class="w-auto"
+    @close="handleClose"
+  >
+    <template #message>
+      <div class="flex flex-auto items-center justify-between gap-4">
+        <span class="whitespace-nowrap">{{
+          t('vueNodesMigration.message')
+        }}</span>
+        <Button
+          class="whitespace-nowrap"
+          size="small"
+          :label="t('vueNodesMigration.button')"
+          text
+          @click="handleOpenSettings"
+        />
+      </div>
+    </template>
+  </Toast>
+</template>
+
+<script setup lang="ts">
+import { useToast } from 'primevue'
+import Button from 'primevue/button'
+import Toast from 'primevue/toast'
+import { useI18n } from 'vue-i18n'
+
+import { useVueNodesMigrationDismissed } from '@/composables/useVueNodesMigrationDismissed'
+import { useDialogService } from '@/services/dialogService'
+
+const { t } = useI18n()
+const toast = useToast()
+const dialogService = useDialogService()
+const isDismissed = useVueNodesMigrationDismissed()
+
+const handleOpenSettings = () => {
+  dialogService.showSettingsDialog()
+  toast.removeGroup('vue-nodes-migration')
+  isDismissed.value = true
+}
+
+const handleClose = () => {
+  isDismissed.value = true
+}
+</script>

src/components/topbar/CurrentUserPopover.test.ts

@@ -79,9 +79,11 @@ vi.mock('@/stores/firebaseAuthStore', () => ({
 }))
 
 // Mock the useSubscription composable
+const mockFetchStatus = vi.fn().mockResolvedValue(undefined)
 vi.mock('@/platform/cloud/subscription/composables/useSubscription', () => ({
   useSubscription: vi.fn(() => ({
-    isActiveSubscription: vi.fn().mockReturnValue(true)
+    isActiveSubscription: { value: true },
+    fetchStatus: mockFetchStatus
   }))
 }))
 
@@ -105,6 +107,15 @@ vi.mock('@/components/common/UserCredit.vue', () => ({
   }
 }))
 
+vi.mock('@/platform/cloud/subscription/components/SubscribeButton.vue', () => ({
+  default: {
+    name: 'SubscribeButtonMock',
+    render() {
+      return h('div', 'Subscribe Button')
+    }
+  }
+}))
+
 describe('CurrentUserPopover', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -137,9 +148,9 @@ describe('CurrentUserPopover', () => {
   it('renders logout button with correct props', () => {
     const wrapper = mountComponent()
 
-    // Find all buttons and get the logout button (second one)
+    // Find all buttons and get the logout button (last button)
     const buttons = wrapper.findAllComponents(Button)
-    const logoutButton = buttons[1]
+    const logoutButton = buttons[4]
 
     // Check that logout button has correct props
     expect(logoutButton.props('label')).toBe('Log Out')
@@ -149,9 +160,9 @@ describe('CurrentUserPopover', () => {
   it('opens user settings and emits close event when settings button is clicked', async () => {
     const wrapper = mountComponent()
 
-    // Find all buttons and get the settings button (first one)
+    // Find all buttons and get the settings button (third button)
     const buttons = wrapper.findAllComponents(Button)
-    const settingsButton = buttons[0]
+    const settingsButton = buttons[2]
 
     // Click the settings button
     await settingsButton.trigger('click')
@@ -167,9 +178,9 @@ describe('CurrentUserPopover', () => {
   it('calls logout function and emits close event when logout button is clicked', async () => {
     const wrapper = mountComponent()
 
-    // Find all buttons and get the logout button (second one)
+    // Find all buttons and get the logout button (last button)
     const buttons = wrapper.findAllComponents(Button)
-    const logoutButton = buttons[1]
+    const logoutButton = buttons[4]
 
     // Click the logout button
     await logoutButton.trigger('click')
@@ -185,16 +196,16 @@ describe('CurrentUserPopover', () => {
   it('opens API pricing docs and emits close event when API pricing button is clicked', async () => {
     const wrapper = mountComponent()
 
-    // Find all buttons and get the API pricing button (third one now)
+    // Find all buttons and get the Partner Nodes info button (first one)
     const buttons = wrapper.findAllComponents(Button)
-    const apiPricingButton = buttons[2]
+    const partnerNodesButton = buttons[0]
 
-    // Click the API pricing button
-    await apiPricingButton.trigger('click')
+    // Click the Partner Nodes button
+    await partnerNodesButton.trigger('click')
 
     // Verify window.open was called with the correct URL
     expect(window.open).toHaveBeenCalledWith(
-      'https://docs.comfy.org/tutorials/api-nodes/pricing',
+      'https://docs.comfy.org/tutorials/api-nodes/overview#api-nodes',
       '_blank'
     )
 
@@ -206,9 +217,9 @@ describe('CurrentUserPopover', () => {
   it('opens top-up dialog and emits close event when top-up button is clicked', async () => {
     const wrapper = mountComponent()
 
-    // Find all buttons and get the top-up button (last one)
+    // Find all buttons and get the top-up button (second one)
     const buttons = wrapper.findAllComponents(Button)
-    const topUpButton = buttons[buttons.length - 1]
+    const topUpButton = buttons[1]
 
     // Click the top-up button
     await topUpButton.trigger('click')

src/components/topbar/CurrentUserPopover.vue

@@ -23,6 +23,38 @@
       </div>
     </div>
 
+    <div v-if="isActiveSubscription" class="flex items-center justify-between">
+      <div class="flex flex-col gap-1">
+        <UserCredit text-class="text-2xl" />
+        <Button
+          :label="$t('subscription.partnerNodesCredits')"
+          severity="secondary"
+          text
+          size="small"
+          class="pl-6 p-0 h-auto justify-start"
+          :pt="{
+            root: {
+              class: 'hover:bg-transparent active:bg-transparent'
+            }
+          }"
+          @click="handleOpenPartnerNodesInfo"
+        />
+      </div>
+      <Button
+        :label="$t('credits.topUp.topUp')"
+        severity="secondary"
+        size="small"
+        @click="handleTopUp"
+      />
+    </div>
+    <SubscribeButton
+      v-else
+      :label="$t('subscription.subscribeToComfyCloud')"
+      size="small"
+      variant="gradient"
+      @subscribed="handleSubscribed"
+    />
+
     <Divider class="my-2" />
 
     <Button
@@ -35,6 +67,17 @@
       @click="handleOpenUserSettings"
     />
 
+    <Button
+      v-if="isActiveSubscription"
+      class="justify-start"
+      :label="$t(planSettingsLabel)"
+      icon="pi pi-receipt"
+      text
+      fluid
+      severity="secondary"
+      @click="handleOpenPlanAndCreditsSettings"
+    />
+
     <Divider class="my-2" />
 
     <Button
@@ -46,34 +89,6 @@
       severity="secondary"
       @click="handleLogout"
     />
-
-    <Divider class="my-2" />
-
-    <Button
-      class="justify-start"
-      :label="$t('credits.apiPricing')"
-      icon="pi pi-external-link"
-      text
-      fluid
-      severity="secondary"
-      @click="handleOpenApiPricing"
-    />
-
-    <Divider class="my-2" />
-
-    <div class="flex w-full flex-col gap-2 p-2">
-      <div class="text-sm text-muted">
-        {{ $t('credits.yourCreditBalance') }}
-      </div>
-      <div class="flex items-center justify-between">
-        <UserCredit text-class="text-2xl" />
-        <Button
-          v-if="isActiveSubscription"
-          :label="$t('credits.topUp.topUp')"
-          @click="handleTopUp"
-        />
-      </div>
-    </div>
   </div>
 </template>
 
@@ -86,37 +101,60 @@ import UserAvatar from '@/components/common/UserAvatar.vue'
 import UserCredit from '@/components/common/UserCredit.vue'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+import SubscribeButton from '@/platform/cloud/subscription/components/SubscribeButton.vue'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
+import { isCloud } from '@/platform/distribution/types'
 import { useDialogService } from '@/services/dialogService'
 
 const emit = defineEmits<{
   close: []
 }>()
 
+const planSettingsLabel = isCloud
+  ? 'settingsCategories.PlanCredits'
+  : 'settingsCategories.Credits'
+
 const { userDisplayName, userEmail, userPhotoUrl, handleSignOut } =
   useCurrentUser()
 const authActions = useFirebaseAuthActions()
 const dialogService = useDialogService()
-const { isActiveSubscription } = useSubscription()
+const { isActiveSubscription, fetchStatus } = useSubscription()
 
 const handleOpenUserSettings = () => {
   dialogService.showSettingsDialog('user')
   emit('close')
 }
 
+const handleOpenPlanAndCreditsSettings = () => {
+  if (isCloud) {
+    dialogService.showSettingsDialog('subscription')
+  } else {
+    dialogService.showSettingsDialog('credits')
+  }
+
+  emit('close')
+}
+
 const handleTopUp = () => {
   dialogService.showTopUpCreditsDialog()
   emit('close')
 }
 
+const handleOpenPartnerNodesInfo = () => {
+  window.open(
+    'https://docs.comfy.org/tutorials/api-nodes/overview#api-nodes',
+    '_blank'
+  )
+  emit('close')
+}
+
 const handleLogout = async () => {
   await handleSignOut()
   emit('close')
 }
 
-const handleOpenApiPricing = () => {
-  window.open('https://docs.comfy.org/tutorials/api-nodes/pricing', '_blank')
-  emit('close')
+const handleSubscribed = async () => {
+  await fetchStatus()
 }
 
 onMounted(() => {