Merge main into vue-node/style/improvements

Update semantic token usage to match current design system conventions: - Use bg-component-node-widget-background (main's naming) - Use text-base-foreground for primary text (main's convention) - Use text-secondary for icons and secondary text (semantic token) - Use bg-interface-stroke and bg-button-icon (semantic tokens) - Use hover:bg-interface-menu-component-surface-hovered - Use bg-interface-menu-component-surface-selected This preserves the PR's intent of migrating to semantic tokens while adopting the evolved token names from main.
2026-03-09 07:00:06 +00:00 · 2025-11-05 13:38:17 -07:00
parent 44f485eeca 549ef79e02
commit 6e2b20b5bf
440 changed files with 40866 additions and 27542 deletions
--- a/src/assets/palettes/dark.json
+++ b/src/assets/palettes/dark.json
@@ -22,7 +22,7 @@
    },
    "litegraph_base": {
      "BACKGROUND_IMAGE": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQBJREFUeNrs1rEKwjAUhlETUkj3vP9rdmr1Ysammk2w5wdxuLgcMHyptfawuZX4pJSWZTnfnu/lnIe/jNNxHHGNn//HNbbv+4dr6V+11uF527arU7+u63qfa/bnmh8sWLBgwYJlqRf8MEptXPBXJXa37BSl3ixYsGDBMliwFLyCV/DeLIMFCxYsWLBMwSt4Be/NggXLYMGCBUvBK3iNruC9WbBgwYJlsGApeAWv4L1ZBgsWLFiwYJmCV/AK3psFC5bBggULloJX8BpdwXuzYMGCBctgwVLwCl7Be7MMFixYsGDBsu8FH1FaSmExVfAxBa/gvVmwYMGCZbBg/W4vAQYA5tRF9QYlv/QAAAAASUVORK5CYII=",
-      "CLEAR_BACKGROUND_COLOR": "#222",
+      "CLEAR_BACKGROUND_COLOR": "#141414",
      "NODE_TITLE_COLOR": "#999",
      "NODE_SELECTED_TITLE_COLOR": "#FFF",
      "NODE_TEXT_SIZE": 14,
@@ -52,7 +52,7 @@
    "comfy_base": {
      "fg-color": "#fff",
      "bg-color": "#202020",
-      "comfy-menu-bg": "#353535",
+      "comfy-menu-bg": "#171718",
      "comfy-menu-secondary-bg": "#303030",
      "comfy-input-bg": "#222",
      "input-text": "#ddd",
--- a/src/assets/palettes/light.json
+++ b/src/assets/palettes/light.json
@@ -68,7 +68,12 @@
      "content-fg": "#222",
      "content-hover-bg": "#adadad",
      "content-hover-fg": "#222",
-      "bar-shadow": "rgba(16, 16, 16, 0.25) 0 0 0.5rem"
+      "bar-shadow": "rgba(16, 16, 16, 0.25) 0 0 0.5rem",
+      "interface-panel-box-shadow": "1px 1px 8px 0 rgba(0, 0, 0, 0.2)",
+      "interface-panel-drop-shadow": "1px 1px 4px rgba(0, 0, 0, 0.4)",
+      "interface-panel-hover-surface": "var(--color-gray-200)",
+      "interface-panel-selected-surface": "color-mix(in srgb, var(--interface-panel-surface) 78%, var(--contrast-mix-color))",
+      "contrast-mix-color": "#000"
    }
  }
 }
--- a/src/components/TopMenuSection.vue
+++ b/src/components/TopMenuSection.vue
@@ -1,11 +1,11 @@
 <template>
-  <div v-if="!workspaceStore.focusMode" class="ml-2 flex pt-1">
+  <div v-if="!workspaceStore.focusMode" class="ml-1 flex gap-x-0.5 pt-1">
    <div class="min-w-0 flex-1">
      <SubgraphBreadcrumb />
    </div>

    <div
-      class="actionbar-container pointer-events-auto mx-1 flex h-12 items-center rounded-lg px-2 shadow-md"
+      class="actionbar-container pointer-events-auto flex h-12 items-center rounded-lg border border-[var(--interface-stroke)] px-2 shadow-interface"
    >
      <!-- Support for legacy topbar elements attached by custom scripts, hidden if no elements present -->
      <div
@@ -48,6 +48,5 @@ onMounted(() => {
 <style scoped>
 .actionbar-container {
  background-color: var(--comfy-menu-bg);
-  border: 1px solid var(--p-panel-border-color);
 }
 </style>
--- a/src/components/actionbar/ComfyActionbar.vue
+++ b/src/components/actionbar/ComfyActionbar.vue
@@ -48,6 +48,7 @@ import { computed, nextTick, onMounted, ref, watch } from 'vue'

 import { t } from '@/i18n'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { useTelemetry } from '@/platform/telemetry'
 import { cn } from '@/utils/tailwindUtil'

 import ComfyRunButton from './ComfyRunButton'
@@ -132,6 +133,15 @@ watch(visible, async (newVisible) => {
  }
 })

+/**
+ * Track run button handle drag start using mousedown on the drag handle.
+ */
+useEventListener(dragHandleRef, 'mousedown', () => {
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'actionbar_run_handle_drag_start'
+  })
+})
+
 const lastDragState = ref({
  x: x.value,
  y: y.value,
@@ -258,7 +268,9 @@ const panelClass = computed(() =>
  cn(
    'actionbar pointer-events-auto z1000',
    isDragging.value && 'select-none pointer-events-none',
-    isDocked.value ? 'p-0 static mr-2 border-none bg-transparent' : 'fixed'
+    isDocked.value
+      ? 'p-0 static mr-2 border-none bg-transparent'
+      : 'fixed shadow-interface'
  )
 )
 </script>
--- a/src/components/actionbar/ComfyRunButton/ComfyQueueButton.vue
+++ b/src/components/actionbar/ComfyRunButton/ComfyQueueButton.vue
@@ -100,7 +100,7 @@ import BatchCountEdit from '../BatchCountEdit.vue'

 const workspaceStore = useWorkspaceStore()
 const queueCountStore = storeToRefs(useQueuePendingTaskCountStore())
-const { mode: queueMode } = storeToRefs(useQueueSettingsStore())
+const { mode: queueMode, batchCount } = storeToRefs(useQueueSettingsStore())

 const { t } = useI18n()
 const queueModeMenuItemLookup = computed(() => {
@@ -118,6 +118,9 @@ const queueModeMenuItemLookup = computed(() => {
      label: `${t('menu.run')} (${t('menu.onChange')})`,
      tooltip: t('menu.onChangeTooltip'),
      command: () => {
+        useTelemetry()?.trackUiButtonClicked({
+          button_id: 'queue_mode_option_run_on_change_selected'
+        })
        queueMode.value = 'change'
      }
    }
@@ -128,6 +131,9 @@ const queueModeMenuItemLookup = computed(() => {
      label: `${t('menu.run')} (${t('menu.instant')})`,
      tooltip: t('menu.instantTooltip'),
      command: () => {
+        useTelemetry()?.trackUiButtonClicked({
+          button_id: 'queue_mode_option_run_instant_selected'
+        })
        queueMode.value = 'instant'
      }
    }
@@ -158,11 +164,18 @@ const queuePrompt = async (e: Event) => {
    ? 'Comfy.QueuePromptFront'
    : 'Comfy.QueuePrompt'

-  if (isCloud) {
-    useTelemetry()?.trackRunButton({ subscribe_to_run: false })
+  if (batchCount.value > 1) {
+    useTelemetry()?.trackUiButtonClicked({
+      button_id: 'queue_run_multiple_batches_submitted'
+    })
  }

-  await commandStore.execute(commandId)
+  await commandStore.execute(commandId, {
+    metadata: {
+      subscribe_to_run: false,
+      trigger_source: 'button'
+    }
+  })
 }
 </script>

--- a/src/components/breadcrumb/SubgraphBreadcrumb.vue
+++ b/src/components/breadcrumb/SubgraphBreadcrumb.vue
@@ -1,6 +1,6 @@
 <template>
  <div
-    class="subgraph-breadcrumb w-auto drop-shadow-md"
+    class="subgraph-breadcrumb w-auto drop-shadow-[var(--interface-panel-drop-shadow)]"
    :class="{
      'subgraph-breadcrumb-collapse': collapseTabs,
      'subgraph-breadcrumb-overflow': overflowingTabs
@@ -40,6 +40,7 @@ import { computed, onUpdated, ref, watch } from 'vue'

 import SubgraphBreadcrumbItem from '@/components/breadcrumb/SubgraphBreadcrumbItem.vue'
 import { useOverflowObserver } from '@/composables/element/useOverflowObserver'
+import { useTelemetry } from '@/platform/telemetry'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
@@ -73,6 +74,9 @@ const items = computed(() => {
  const items = navigationStore.navigationStack.map<MenuItem>((subgraph) => ({
    label: subgraph.name,
    command: () => {
+      useTelemetry()?.trackUiButtonClicked({
+        button_id: 'breadcrumb_subgraph_item_selected'
+      })
      const canvas = useCanvasStore().getCanvas()
      if (!canvas.graph) throw new TypeError('Canvas has no graph')

@@ -97,6 +101,9 @@ const home = computed(() => ({
  key: 'root',
  isBlueprint: isBlueprint.value,
  command: () => {
+    useTelemetry()?.trackUiButtonClicked({
+      button_id: 'breadcrumb_subgraph_root_selected'
+    })
    const canvas = useCanvasStore().getCanvas()
    if (!canvas.graph) throw new TypeError('Canvas has no graph')

@@ -201,8 +208,8 @@ onUpdated(() => {
 :deep(.p-breadcrumb-separator),
 :deep(.p-breadcrumb-item) {
  @apply h-12;
-  border-top: 1px solid var(--p-panel-border-color);
-  border-bottom: 1px solid var(--p-panel-border-color);
+  border-top: 1px solid var(--interface-stroke);
+  border-bottom: 1px solid var(--interface-stroke);
  background-color: var(--comfy-menu-bg);
 }

@@ -214,7 +221,7 @@ onUpdated(() => {
  @apply rounded-l-lg;
  /* Then collapse the root workflow */
  flex-shrink: 5000;
-  border-left: 1px solid var(--p-panel-border-color);
+  border-left: 1px solid var(--interface-stroke);

  .p-breadcrumb-item-link {
    padding-left: var(--p-breadcrumb-item-padding);
@@ -225,7 +232,7 @@ onUpdated(() => {
  @apply rounded-r-lg;
  /* Then collapse the active item */
  flex-shrink: 1;
-  border-right: 1px solid var(--p-panel-border-color);
+  border-right: 1px solid var(--interface-stroke);
 }

 :deep(.p-breadcrumb-item-link:hover),
--- a/src/components/card/CardTop.vue
+++ b/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',
--- a/src/components/common/EditableText.vue
+++ b/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>
--- a/src/components/common/FormImageUpload.vue
+++ b/src/components/common/FormImageUpload.vue
@@ -3,14 +3,14 @@
    <div class="flex items-center gap-2">
      <div
        class="preview-box flex h-16 w-16 items-center justify-center rounded border p-2"
-        :class="{ 'bg-gray-100 dark-theme:bg-gray-800': !modelValue }"
+        :class="{ 'bg-smoke-100 dark-theme:bg-smoke-800': !modelValue }"
      >
        <img
          v-if="modelValue"
          :src="modelValue"
          class="max-h-full max-w-full object-contain"
        />
-        <i v-else class="pi pi-image text-xl text-gray-400" />
+        <i v-else class="pi pi-image text-xl text-smoke-400" />
      </div>

      <div class="flex flex-col gap-2">
--- a/src/components/common/UserAvatar.test.ts
+++ b/src/components/common/UserAvatar.test.ts
@@ -56,7 +56,7 @@ describe('UserAvatar', () => {
    const avatar = wrapper.findComponent(Avatar)
    expect(avatar.exists()).toBe(true)
    expect(avatar.props('image')).toBeNull()
-    expect(avatar.props('icon')).toBe('pi pi-user')
+    expect(avatar.props('icon')).toBe('icon-[lucide--user]')
  })

  it('renders with default icon when provided photo Url is null', () => {
@@ -67,7 +67,7 @@ describe('UserAvatar', () => {
    const avatar = wrapper.findComponent(Avatar)
    expect(avatar.exists()).toBe(true)
    expect(avatar.props('image')).toBeNull()
-    expect(avatar.props('icon')).toBe('pi pi-user')
+    expect(avatar.props('icon')).toBe('icon-[lucide--user]')
  })

  it('falls back to icon when image fails to load', async () => {
@@ -82,7 +82,7 @@ describe('UserAvatar', () => {
    avatar.vm.$emit('error')
    await nextTick()

-    expect(avatar.props('icon')).toBe('pi pi-user')
+    expect(avatar.props('icon')).toBe('icon-[lucide--user]')
  })

  it('uses provided ariaLabel', () => {
--- a/src/components/common/UserAvatar.vue
+++ b/src/components/common/UserAvatar.vue
@@ -1,7 +1,9 @@
 <template>
  <Avatar
+    class="bg-interface-panel-selected-surface"
    :image="photoUrl ?? undefined"
-    :icon="hasAvatar ? undefined : 'pi pi-user'"
+    :icon="hasAvatar ? undefined : 'icon-[lucide--user]'"
+    :pt:icon:class="{ 'size-4': !hasAvatar }"
    shape="circle"
    :aria-label="ariaLabel ?? $t('auth.login.userAvatar')"
    @error="handleImageError"
--- a/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
+++ b/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>
+          <!-- Runs On Filter -->
+          <MultiSelect
+            v-model="selectedRunsOnObjects"
+            :label="runsOnFilterLabel"
+            :options="runsOnOptions"
+            :show-search-box="true"
+            :show-selected-count="true"
+            :show-clear-button="true"
+          >
+            <template #icon>
+              <i class="icon-[lucide--server]" />
+            </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
@@ -500,12 +528,12 @@ const {
  searchQuery,
  selectedModels,
  selectedUseCases,
-  selectedLicenses,
+  selectedRunsOn,
  sortBy,
  filteredTemplates,
  availableModels,
  availableUseCases,
-  availableLicenses,
+  availableRunsOn,
  filteredCount,
  totalCount,
  resetFilters
@@ -533,15 +561,15 @@ const selectedUseCaseObjects = computed({
  }
 })

-const selectedLicenseObjects = computed({
+const selectedRunsOnObjects = computed({
  get() {
-    return selectedLicenses.value.map((license) => ({
-      name: license,
-      value: license
+    return selectedRunsOn.value.map((runsOn) => ({
+      name: runsOn,
+      value: runsOn
    }))
  },
  set(value: { name: string; value: string }[]) {
-    selectedLicenses.value = value.map((item) => item.value)
+    selectedRunsOn.value = value.map((item) => item.value)
  }
 })

@@ -574,10 +602,10 @@ const useCaseOptions = computed(() =>
  }))
 )

-const licenseOptions = computed(() =>
-  availableLicenses.value.map((license) => ({
-    name: license,
-    value: license
+const runsOnOptions = computed(() =>
+  availableRunsOn.value.map((runsOn) => ({
+    name: runsOn,
+    value: runsOn
  }))
 )

@@ -606,14 +634,14 @@ const useCaseFilterLabel = computed(() => {
  }
 })

-const licenseFilterLabel = computed(() => {
-  if (selectedLicenseObjects.value.length === 0) {
-    return t('templateWorkflows.licenseFilter', 'License')
-  } else if (selectedLicenseObjects.value.length === 1) {
-    return selectedLicenseObjects.value[0].name
+const runsOnFilterLabel = computed(() => {
+  if (selectedRunsOnObjects.value.length === 0) {
+    return t('templateWorkflows.runsOnFilter', 'Runs On')
+  } else if (selectedRunsOnObjects.value.length === 1) {
+    return selectedRunsOnObjects.value[0].name
  } else {
-    return t('templateWorkflows.licensesSelected', {
-      count: selectedLicenseObjects.value.length
+    return t('templateWorkflows.runsOnSelected', {
+      count: selectedRunsOnObjects.value.length
    })
  }
 })
@@ -680,7 +708,7 @@ watch(
    sortBy,
    selectedModels,
    selectedUseCases,
-    selectedLicenses
+    selectedRunsOn
  ],
  () => {
    resetPagination()
@@ -698,6 +726,7 @@ const onLoadWorkflow = async (template: any) => {
      template.name,
      getEffectiveSourceModule(template)
    )
+    templateWasSelected.value = true
    onClose()
  } finally {
    loadingTemplate.value = null
--- a/src/components/dialog/content/ErrorDialogContent.vue
+++ b/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'
@@ -86,18 +87,33 @@ const repoOwner = 'comfyanonymous'
 const repoName = 'ComfyUI'
 const reportContent = ref('')
 const reportOpen = ref(false)
+/**
+ * Open the error report content and track telemetry.
+ */
 const showReport = () => {
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'error_dialog_show_report_clicked'
+  })
  reportOpen.value = true
 }
 const toast = useToast()
 const { t } = useI18n()
 const systemStatsStore = useSystemStatsStore()
+const telemetry = useTelemetry()

 const title = computed<string>(
  () => error.nodeType ?? error.exceptionType ?? t('errorDialog.defaultTitle')
 )

+/**
+ * Open contact support flow from error dialog and track telemetry.
+ */
 const showContactSupport = async () => {
+  telemetry?.trackHelpResourceClicked({
+    resource_type: 'help_feedback',
+    is_external: true,
+    source: 'error_dialog'
+  })
  await useCommandStore().execute('Comfy.ContactSupport')
 }

--- a/src/components/dialog/content/credit/CreditTopUpOption.vue
+++ b/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
 }
--- a/src/components/dialog/content/error/FindIssueButton.vue
+++ b/src/components/dialog/content/error/FindIssueButton.vue
@@ -11,6 +11,8 @@
 import Button from 'primevue/button'
 import { computed } from 'vue'

+import { useTelemetry } from '@/platform/telemetry'
+
 const props = defineProps<{
  errorMessage: string
  repoOwner: string
@@ -19,7 +21,13 @@ const props = defineProps<{

 const queryString = computed(() => props.errorMessage + ' is:issue')

+/**
+ * Open GitHub issues search and track telemetry.
+ */
 const openGitHubIssues = () => {
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'error_dialog_find_existing_issues_clicked'
+  })
  const query = encodeURIComponent(queryString.value)
  const url = `https://github.com/${props.repoOwner}/${props.repoName}/issues?q=${query}`
  window.open(url, '_blank')
--- a/src/components/dialog/content/setting/CreditsPanel.vue
+++ b/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)

@@ -153,6 +164,8 @@ watch(
 )

 const handlePurchaseCreditsClick = () => {
+  // Track purchase credits entry from Settings > Credits panel
+  useTelemetry()?.trackAddApiCreditButtonClicked()
  dialogService.showTopUpCreditsDialog()
 }

@@ -161,6 +174,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 +186,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>
--- a/src/components/dialog/content/setting/UsageLogsTable.vue
+++ b/src/components/dialog/content/setting/UsageLogsTable.vue
@@ -50,7 +50,7 @@
                <div class="font-semibold">
                  {{ data.params?.api_name || 'API' }}
                </div>
-                <div class="text-sm text-gray-400">
+                <div class="text-sm text-smoke-400">
                  {{ $t('credits.model') }}: {{ data.params?.model || '-' }}
                </div>
              </div>
@@ -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'
    }
--- a/src/components/dialog/content/setting/UserPanel.vue
+++ b/src/components/dialog/content/setting/UserPanel.vue
@@ -78,7 +78,7 @@

      <!-- Login Section -->
      <div v-else class="flex flex-col gap-4">
-        <p class="text-gray-600">
+        <p class="text-smoke-600">
          {{ $t('auth.login.title') }}
        </p>

--- a/src/components/graph/CanvasModeSelector.vue
+++ b/src/components/graph/CanvasModeSelector.vue
@@ -2,14 +2,14 @@
  <Button
    ref="buttonRef"
    severity="secondary"
-    class="group h-8 rounded-none! bg-interface-panel-surface p-0 transition-none! hover:rounded-lg! hover:bg-button-hover-surface!"
+    class="group h-8 rounded-none! bg-comfy-menu-bg p-0 transition-none! hover:rounded-lg! hover:bg-interface-button-hover-surface!"
    :style="buttonStyles"
    @click="toggle"
  >
    <template #default>
      <div class="flex items-center gap-1 pr-0.5">
        <div
-          class="rounded-lg bg-button-active-surface p-2 group-hover:bg-button-hover-surface"
+          class="rounded-lg bg-interface-panel-selected-surface p-2 group-hover:bg-interface-button-hover-surface"
        >
          <i :class="currentModeIcon" class="block h-4 w-4" />
        </div>
@@ -114,7 +114,7 @@ const popoverPt = computed(() => ({
  content: {
    class: [
      'mb-2 text-text-primary',
-      'shadow-lg border border-node-border',
+      'shadow-lg border border-interface-stroke',
      'bg-nav-background',
      'rounded-lg',
      'p-2 px-3',
--- a/src/components/graph/GraphCanvas.vue
+++ b/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: []
 }>()
--- a/src/components/graph/GraphCanvasMenu.vue
+++ b/src/components/graph/GraphCanvasMenu.vue
@@ -10,8 +10,10 @@
    ></div>

    <ButtonGroup
-      class="absolute right-0 bottom-0 z-[1200] flex-row gap-1 border-[1px] border-node-border bg-interface-panel-surface p-2"
-      :style="stringifiedMinimapStyles.buttonGroupStyles"
+      class="absolute right-0 bottom-0 z-[1200] flex-row gap-1 border-[1px] border-interface-stroke bg-comfy-menu-bg p-2"
+      :style="{
+        ...stringifiedMinimapStyles.buttonGroupStyles
+      }"
      @wheel="canvasInteractions.handleWheel"
    >
      <CanvasModeSelector
@@ -26,7 +28,7 @@
        icon="pi pi-expand"
        :aria-label="fitViewTooltip"
        :style="stringifiedMinimapStyles.buttonStyles"
-        class="h-8 w-8 bg-interface-panel-surface p-0 hover:bg-button-hover-surface!"
+        class="h-8 w-8 bg-comfy-menu-bg p-0 hover:bg-interface-button-hover-surface!"
        @click="() => commandStore.execute('Comfy.Canvas.FitView')"
      >
        <template #icon>
@@ -61,7 +63,7 @@
        data-testid="toggle-minimap-button"
        :style="stringifiedMinimapStyles.buttonStyles"
        :class="minimapButtonClass"
-        @click="() => commandStore.execute('Comfy.Canvas.ToggleMinimap')"
+        @click="onMinimapToggleClick"
      >
        <template #icon>
          <i class="icon-[lucide--map] h-4 w-4" />
@@ -82,7 +84,7 @@
        :aria-label="linkVisibilityAriaLabel"
        data-testid="toggle-link-visibility-button"
        :style="stringifiedMinimapStyles.buttonStyles"
-        @click="() => commandStore.execute('Comfy.Canvas.ToggleLinkVisibility')"
+        @click="onLinkVisibilityToggleClick"
      >
        <template #icon>
          <i class="icon-[lucide--route-off] h-4 w-4" />
@@ -101,6 +103,7 @@ import { useI18n } from 'vue-i18n'
 import { useZoomControls } from '@/composables/useZoomControls'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { useTelemetry } from '@/platform/telemetry'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { useMinimap } from '@/renderer/extensions/minimap/composables/useMinimap'
@@ -163,18 +166,18 @@ const minimapCommandText = computed(() =>

 // Computed properties for button classes and states
 const zoomButtonClass = computed(() => [
-  'bg-interface-panel-surface',
-  isModalVisible.value ? 'not-active:bg-button-active-surface!' : '',
-  'hover:bg-button-hover-surface!',
+  'bg-comfy-menu-bg',
+  isModalVisible.value ? 'not-active:bg-interface-panel-selected-surface!' : '',
+  'hover:bg-interface-button-hover-surface!',
  'p-0',
  'h-8',
  'w-15'
 ])

 const minimapButtonClass = computed(() => ({
-  'bg-interface-panel-surface': true,
-  'hover:bg-button-hover-surface!': true,
-  'not-active:bg-button-active-surface!': settingStore.get(
+  'bg-comfy-menu-bg': true,
+  'hover:bg-interface-button-hover-surface!': true,
+  'not-active:bg-interface-panel-selected-surface!': settingStore.get(
    'Comfy.Minimap.Visible'
  ),
  'p-0': true,
@@ -206,9 +209,9 @@ const linkVisibilityAriaLabel = computed(() =>
    : t('graphCanvasMenu.hideLinks')
 )
 const linkVisibleClass = computed(() => [
-  'bg-interface-panel-surface',
-  linkHidden.value ? 'not-active:bg-button-active-surface!' : '',
-  'hover:bg-button-hover-surface!',
+  'bg-comfy-menu-bg',
+  linkHidden.value ? 'not-active:bg-interface-panel-selected-surface!' : '',
+  'hover:bg-interface-button-hover-surface!',
  'p-0',
  'w-8',
  'h-8'
@@ -218,6 +221,26 @@ onMounted(() => {
  canvasStore.initScaleSync()
 })

+/**
+ * Track minimap toggle button click and execute the command.
+ */
+const onMinimapToggleClick = () => {
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'graph_menu_minimap_toggle_clicked'
+  })
+  void commandStore.execute('Comfy.Canvas.ToggleMinimap')
+}
+
+/**
+ * Track hide/show links button click and execute the command.
+ */
+const onLinkVisibilityToggleClick = () => {
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'graph_menu_hide_links_toggle_clicked'
+  })
+  void commandStore.execute('Comfy.Canvas.ToggleLinkVisibility')
+}
+
 onBeforeUnmount(() => {
  canvasStore.cleanupScaleSync()
 })
--- a/src/components/graph/modals/ZoomControlsModal.vue
+++ b/src/components/graph/modals/ZoomControlsModal.vue
@@ -4,7 +4,7 @@
    class="absolute right-0 bottom-[62px] z-1300 flex w-[250px] justify-center border-0! bg-inherit!"
  >
    <div
-      class="w-4/5 rounded-lg border border-node-border bg-interface-panel-surface p-2 text-text-primary shadow-lg select-none"
+      class="w-4/5 rounded-lg border border-interface-stroke bg-interface-panel-surface p-2 text-text-primary shadow-lg select-none"
      :style="filteredMinimapStyles"
      @click.stop
    >
@@ -148,6 +148,6 @@ watch(
 </script>
 <style>
 .zoomInputContainer:focus-within {
-  border: 1px solid var(--color-pure-white);
+  border: 1px solid var(--color-white);
 }
 </style>
--- a/src/components/graph/selectionToolbox/BypassButton.test.ts
+++ b/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'
    )
  })

--- a/src/components/graph/selectionToolbox/BypassButton.vue
+++ b/src/components/graph/selectionToolbox/BypassButton.vue
@@ -7,11 +7,11 @@
    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>
-      <i class="icon-[lucide--ban] h-4 w-4" />
+      <i class="icon-[lucide--redo-dot] h-4 w-4" />
    </template>
  </Button>
 </template>
--- a/src/components/graph/selectionToolbox/ExecuteButton.vue
+++ b/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()"
--- a/src/components/graph/selectionToolbox/InfoButton.vue
+++ b/src/components/graph/selectionToolbox/InfoButton.vue
@@ -7,7 +7,7 @@
    data-testid="info-button"
    text
    severity="secondary"
-    @click="toggleHelp"
+    @click="onInfoClick"
  >
    <i class="icon-[lucide--info] h-4 w-4" />
  </Button>
@@ -17,6 +17,17 @@
 import Button from 'primevue/button'

 import { useSelectionState } from '@/composables/graph/useSelectionState'
+import { useTelemetry } from '@/platform/telemetry'

 const { showNodeHelp: toggleHelp } = useSelectionState()
+
+/**
+ * Track node info button click and toggle node help.
+ */
+const onInfoClick = () => {
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'selection_toolbox_node_info_opened'
+  })
+  toggleHelp()
+}
 </script>
--- a/src/components/graph/selectionToolbox/MenuOptionItem.vue
+++ b/src/components/graph/selectionToolbox/MenuOptionItem.vue
@@ -1,7 +1,7 @@
 <template>
  <div
    v-if="option.type === 'divider'"
-    class="my-1 h-px bg-gray-200 dark-theme:bg-zinc-700"
+    class="my-1 h-px bg-smoke-200 dark-theme:bg-zinc-700"
  />
  <div
    v-else
@@ -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
      }"
--- a/src/components/graph/selectionToolbox/SubmenuPopover.vue
+++ b/src/components/graph/selectionToolbox/SubmenuPopover.vue
@@ -20,15 +20,15 @@
        :key="subOption.label"
        :class="
          isColorSubmenu
-            ? 'w-7 h-7 flex items-center justify-center hover:bg-gray-100 dark-theme:hover:bg-zinc-700 rounded cursor-pointer'
-            : 'flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-gray-100 dark-theme:hover:bg-zinc-700 rounded cursor-pointer'
+            ? 'w-7 h-7 flex items-center justify-center hover:bg-smoke-100 dark-theme:hover:bg-zinc-700 rounded cursor-pointer'
+            : 'flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-smoke-100 dark-theme:hover:bg-zinc-700 rounded cursor-pointer'
        "
        :title="subOption.label"
        @click="handleSubmenuClick(subOption)"
      >
        <div
          v-if="subOption.color"
-          class="h-5 w-5 rounded-full border border-gray-300 dark-theme:border-zinc-600"
+          class="h-5 w-5 rounded-full border border-smoke-300 dark-theme:border-zinc-600"
          :style="{ backgroundColor: subOption.color }"
        />
        <template v-else-if="!subOption.color">
--- a/src/components/graph/selectionToolbox/VerticalDivider.vue
+++ b/src/components/graph/selectionToolbox/VerticalDivider.vue
@@ -1,3 +1,5 @@
 <template>
-  <div class="h-6 w-px self-center bg-gray-300/10 dark-theme:bg-gray-600/10" />
+  <div
+    class="h-6 w-px self-center bg-smoke-300/10 dark-theme:bg-smoke-600/10"
+  />
 </template>
--- a/src/components/graph/widgets/ChatHistoryWidget.vue
+++ b/src/components/graph/widgets/ChatHistoryWidget.vue
@@ -13,7 +13,7 @@
      >
        <div class="mb-1 flex justify-end">
          <div
-            class="max-w-[80%] rounded-xl bg-gray-300 px-4 py-1 text-right dark-theme:bg-gray-800"
+            class="max-w-[80%] rounded-xl bg-smoke-300 px-4 py-1 text-right dark-theme:bg-smoke-800"
          >
            <div class="text-[12px] break-words">{{ item.prompt }}</div>
          </div>
@@ -26,7 +26,7 @@
            "
            text
            rounded
-            class="h-4! w-4! p-1! text-gray-400 transition hover:text-gray-600 hover:dark-theme:text-gray-200"
+            class="h-4! w-4! p-1! text-smoke-400 transition hover:text-smoke-600 hover:dark-theme:text-smoke-200"
            pt:icon:class="text-xs!"
            :icon="editIndex === i ? 'pi pi-times' : 'pi pi-pencil'"
            :aria-label="
--- a/src/components/graph/widgets/DomWidget.vue
+++ b/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)
    }
  )
 })
--- a/src/components/graph/widgets/TextPreviewWidget.vue
+++ b/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(() => {
--- a/src/components/graph/widgets/chatHistory/CopyButton.vue
+++ b/src/components/graph/widgets/chatHistory/CopyButton.vue
@@ -5,7 +5,7 @@
    "
    text
    rounded
-    class="h-4! w-6! p-1! text-gray-400 transition hover:text-gray-600 hover:dark-theme:text-gray-200"
+    class="h-4! w-6! p-1! text-smoke-400 transition hover:text-smoke-600 hover:dark-theme:text-smoke-200"
    pt:icon:class="text-xs!"
    :icon="copied ? 'pi pi-check' : 'pi pi-copy'"
    :aria-label="
--- a/src/components/helpcenter/HelpCenterMenuContent.vue
+++ b/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>
--- a/src/components/icons/ComfyLogoTransparent.vue
+++ b/src/components/icons/ComfyLogoTransparent.vue
@@ -4,13 +4,11 @@
    :width="size"
    :height="size"
    viewBox="0 0 18 18"
-    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M14.8193 0.600586C15.1248 0.600586 15.3296 0.70893 15.459 0.881836C15.5914 1.05888 15.6471 1.33774 15.5527 1.66895L14.8037 4.30176C14.7063 4.64386 14.4729 4.97024 14.1641 5.21191C13.8544 5.45415 13.496 5.58984 13.1699 5.58984H13.1689L9.5791 5.59668H7.90625C7.52654 5.59668 7.19496 5.84986 7.09082 6.21289L5.69434 11.0889C5.63007 11.3133 5.66134 11.5534 5.77734 11.7529L5.83203 11.8359C5.99177 12.0491 6.24252 12.1758 6.50977 12.1758H6.51074L8.88281 12.1709H11.4971C11.7643 12.171 11.9541 12.254 12.084 12.3906L12.1357 12.4521C12.2685 12.6295 12.3249 12.9089 12.2305 13.2402L11.4805 15.8721C11.383 16.2144 11.1498 16.5415 10.8408 16.7832C10.5314 17.0252 10.1736 17.161 9.84766 17.1611H9.84668L6.25684 17.168H3.64258C3.33762 17.1679 3.13349 17.0588 3.00391 16.8857C2.87135 16.7087 2.81482 16.43 2.90918 16.0986L3.39551 14.3887C3.46841 14.1327 3.41794 13.8576 3.25879 13.6445V13.6436C3.09901 13.4303 2.84745 13.3037 2.58008 13.3037H1.18066C0.875088 13.3037 0.670398 13.1953 0.541016 13.0225C0.408483 12.8451 0.351891 12.5655 0.446289 12.2344L2.11914 6.38965L2.30371 5.74707V5.74609C2.40139 5.40341 2.63456 5.07671 2.94336 4.83496C3.25302 4.59258 3.61143 4.45705 3.9375 4.45703H5.6123C5.94484 4.45703 6.24083 4.26316 6.37891 3.9707L6.42773 3.83984L6.98145 1.89551C7.07894 1.55317 7.31212 1.22614 7.62109 0.984375C7.93074 0.742127 8.2892 0.606445 8.61523 0.606445H8.61621L12.1982 0.600586H14.8193Z"
-      :stroke="color"
-      stroke-width="1"
+      v-bind="attributes"
    />
  </svg>
 </template>
@@ -22,11 +20,18 @@ interface Props {
  size?: number | string
  color?: string
  class?: string
+  mode?: 'outline' | 'fill'
 }
 const {
  size = 16,
  color = 'currentColor',
+  mode = 'outline',
  class: className
 } = defineProps<Props>()
 const iconClass = computed(() => className || '')
+const attributes = computed(() => ({
+  stroke: mode === 'outline' ? color : undefined,
+  strokeWidth: mode === 'outline' ? 1 : undefined,
+  fill: mode === 'fill' ? color : 'none'
+}))
 </script>
--- a/src/components/input/MultiSelect.accessibility.stories.ts
+++ b/src/components/input/MultiSelect.accessibility.stories.ts
@@ -119,12 +119,12 @@ export const KeyboardNavigationDemo: Story = {
    },
    template: `
      <div class="space-y-4 p-4">
-        <div class="bg-blue-50 dark-theme:bg-blue-900/20 border border-blue-200 dark-theme:border-blue-700 rounded-lg p-4">
+        <div class="bg-blue-50 dark-theme:bg-blue-900/20 border border-azure-400 dark-theme:border-blue-700 rounded-lg p-4">
          <h3 class="text-lg font-semibold mb-2">🎯 Keyboard Navigation Test</h3>
-          <p class="text-sm text-gray-600 dark-theme:text-gray-300 mb-4">
+          <p class="text-sm text-smoke-600 dark-theme:text-smoke-300 mb-4">
            Use your keyboard to navigate this MultiSelect:
          </p>
-          <ol class="text-sm text-gray-600 list-decimal list-inside space-y-1">
+          <ol class="text-sm text-smoke-600 list-decimal list-inside space-y-1">
            <li><strong>Tab</strong> to focus the dropdown</li>
            <li><strong>Enter/Space</strong> to open dropdown</li>
            <li><strong>Arrow Up/Down</strong> to navigate options</li>
@@ -134,11 +134,11 @@ export const KeyboardNavigationDemo: Story = {
        </div>

        <div class="space-y-2">
-          <label class="block text-sm font-medium text-gray-700">
+          <label class="block text-sm font-medium text-smoke-700">
            Select Frameworks (Keyboard Navigation Test)
          </label>
          <MultiSelect v-bind="args" class="w-80" />
-          <p class="text-xs text-gray-500">
+          <p class="text-xs text-smoke-500">
            Selected: {{ selectedFrameworks.map(f => f.name).join(', ') || 'None' }}
          </p>
        </div>
@@ -186,10 +186,10 @@ export const ScreenReaderFriendly: Story = {
      <div class="space-y-6 p-4">
        <div class="bg-green-50 dark-theme:bg-green-900/20 border border-green-200 dark-theme:border-green-700 rounded-lg p-4">
          <h3 class="text-lg font-semibold mb-2">♿ Screen Reader Test</h3>
-          <p class="text-sm text-gray-600 mb-2">
+          <p class="text-sm text-smoke-600 mb-2">
            These dropdowns have proper ARIA attributes and labels for screen readers:
          </p>
-          <ul class="text-sm text-gray-600 list-disc list-inside space-y-1">
+          <ul class="text-sm text-smoke-600 list-disc list-inside space-y-1">
            <li><code>role="combobox"</code> identifies as dropdown</li>
            <li><code>aria-haspopup="listbox"</code> indicates popup type</li>
            <li><code>aria-expanded</code> shows open/closed state</li>
@@ -200,7 +200,7 @@ export const ScreenReaderFriendly: Story = {

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div class="space-y-2">
-            <label class="block text-sm font-medium text-gray-700">
+            <label class="block text-sm font-medium text-smoke-700">
              Color Preferences
            </label>
            <MultiSelect
@@ -211,13 +211,13 @@ export const ScreenReaderFriendly: Story = {
              :show-clear-button="true"
              class="w-full"
            />
-            <p class="text-xs text-gray-500" aria-live="polite">
+            <p class="text-xs text-smoke-500" aria-live="polite">
              {{ selectedColors.length }} color(s) selected
            </p>
          </div>

          <div class="space-y-2">
-            <label class="block text-sm font-medium text-gray-700">
+            <label class="block text-sm font-medium text-smoke-700">
              Size Preferences
            </label>
            <MultiSelect
@@ -228,7 +228,7 @@ export const ScreenReaderFriendly: Story = {
              :show-search-box="true"
              class="w-full"
            />
-            <p class="text-xs text-gray-500" aria-live="polite">
+            <p class="text-xs text-smoke-500" aria-live="polite">
              {{ selectedSizes.length }} size(s) selected
            </p>
          </div>
@@ -259,25 +259,25 @@ export const FocusManagement: Story = {
      <div class="space-y-4 p-4">
        <div class="bg-purple-50 dark-theme:bg-purple-900/20 border border-purple-200 dark-theme:border-purple-700 rounded-lg p-4">
          <h3 class="text-lg font-semibold mb-2">🎯 Focus Management Test</h3>
-          <p class="text-sm text-gray-600 dark-theme:text-gray-300 mb-4">
+          <p class="text-sm text-smoke-600 dark-theme:text-smoke-300 mb-4">
            Test focus behavior with multiple form elements:
          </p>
        </div>

        <div class="space-y-4">
          <div>
-            <label class="block text-sm font-medium text-gray-700 mb-1">
+            <label class="block text-sm font-medium text-smoke-700 mb-1">
              Before MultiSelect
            </label>
            <input
              type="text"
              placeholder="Previous field"
-              class="block w-64 px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+              class="block w-64 px-3 py-2 border border-smoke-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
            />
          </div>

          <div>
-            <label class="block text-sm font-medium text-gray-700 mb-1">
+            <label class="block text-sm font-medium text-smoke-700 mb-1">
              MultiSelect (Test Focus Ring)
            </label>
            <MultiSelect
@@ -290,13 +290,13 @@ export const FocusManagement: Story = {
          </div>

          <div>
-            <label class="block text-sm font-medium text-gray-700 mb-1">
+            <label class="block text-sm font-medium text-smoke-700 mb-1">
              After MultiSelect
            </label>
            <input
              type="text"
              placeholder="Next field"
-              class="block w-64 px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+              class="block w-64 px-3 py-2 border border-smoke-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
            />
          </div>

@@ -307,7 +307,7 @@ export const FocusManagement: Story = {
          </button>
        </div>

-        <div class="text-sm text-gray-600 mt-4">
+        <div class="text-sm text-smoke-600 mt-4">
          <strong>Test:</strong> Tab through all elements and verify focus rings are visible and logical.
        </div>
      </div>
@@ -319,7 +319,7 @@ export const AccessibilityChecklist: Story = {
  render: () => ({
    template: `
      <div class="max-w-4xl mx-auto p-6 space-y-6">
-        <div class="bg-gray-50 dark-theme:bg-zinc-800 border border-gray-200 dark-theme:border-zinc-700 rounded-lg p-6">
+        <div class="bg-gray-50 dark-theme:bg-zinc-800 border border-smoke-200 dark-theme:border-zinc-700 rounded-lg p-6">
          <h2 class="text-2xl font-bold mb-4">♿ MultiSelect Accessibility Checklist</h2>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -366,9 +366,9 @@ export const AccessibilityChecklist: Story = {
            </div>
          </div>

-          <div class="mt-6 p-4 bg-blue-50 dark-theme:bg-blue-900/20 border border-blue-200 dark-theme:border-blue-700 rounded-lg">
+          <div class="mt-6 p-4 bg-blue-50 dark-theme:bg-blue-900/20 border border-azure-400 dark-theme:border-blue-700 rounded-lg">
            <h4 class="font-semibold mb-2">🎯 Quick Test</h4>
-            <p class="text-sm text-gray-700 dark-theme:text-gray-300">
+            <p class="text-sm text-smoke-700 dark-theme:text-smoke-300">
              Close your eyes, use only the keyboard, and try to select multiple options from any dropdown above.
              If you can successfully navigate and make selections, the accessibility implementation is working!
            </p>
--- a/src/components/input/MultiSelect.vue
+++ b/src/components/input/MultiSelect.vue
@@ -62,7 +62,7 @@

    <!-- Trigger value (keep text scale identical) -->
    <template #value>
-      <span class="text-sm text-zinc-700 dark-theme:text-gray-200">
+      <span class="text-sm text-zinc-700 dark-theme:text-smoke-200">
        {{ label }}
      </span>
      <span
@@ -242,7 +242,7 @@ const pt = computed(() => ({
    )
  },
  listContainer: () => ({
-    style: { maxHeight: listMaxHeight },
+    style: { maxHeight: `min(${listMaxHeight}, 50vh)` },
    class: 'scrollbar-custom'
  }),
  list: {
--- a/src/components/input/SingleSelect.accessibility.stories.ts
+++ b/src/components/input/SingleSelect.accessibility.stories.ts
@@ -101,12 +101,12 @@ export const KeyboardNavigationDemo: Story = {
    },
    template: `
      <div class="space-y-6 p-4">
-        <div class="bg-blue-50 dark-theme:bg-blue-900/20 border border-blue-200 dark-theme:border-blue-700 rounded-lg p-4">
+        <div class="bg-blue-50 dark-theme:bg-blue-900/20 border border-azure-400 dark-theme:border-blue-700 rounded-lg p-4">
          <h3 class="text-lg font-semibold mb-2">🎯 Keyboard Navigation Test</h3>
-          <p class="text-sm text-gray-600 dark-theme:text-gray-300 mb-4">
+          <p class="text-sm text-smoke-600 dark-theme:text-smoke-300 mb-4">
            Use your keyboard to navigate these SingleSelect dropdowns:
          </p>
-          <ol class="text-sm text-gray-600 dark-theme:text-gray-300 list-decimal list-inside space-y-1">
+          <ol class="text-sm text-smoke-600 dark-theme:text-smoke-300 list-decimal list-inside space-y-1">
            <li><strong>Tab</strong> to focus the dropdown</li>
            <li><strong>Enter/Space</strong> to open dropdown</li>
            <li><strong>Arrow Up/Down</strong> to navigate options</li>
@@ -117,7 +117,7 @@ export const KeyboardNavigationDemo: Story = {

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div class="space-y-2">
-            <label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200">
+            <label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200">
              Sort Order
            </label>
            <SingleSelect
@@ -126,13 +126,13 @@ export const KeyboardNavigationDemo: Story = {
              label="Choose sort order"
              class="w-full"
            />
-            <p class="text-xs text-gray-500">
+            <p class="text-xs text-smoke-500">
              Selected: {{ selectedSort ? sortOptions.find(o => o.value === selectedSort)?.name : 'None' }}
            </p>
          </div>

          <div class="space-y-2">
-            <label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200">
+            <label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200">
              Task Priority (With Icon)
            </label>
            <SingleSelect
@@ -147,7 +147,7 @@ export const KeyboardNavigationDemo: Story = {
                </svg>
              </template>
            </SingleSelect>
-            <p class="text-xs text-gray-500">
+            <p class="text-xs text-smoke-500">
              Selected: {{ selectedPriority ? priorityOptions.find(o => o.value === selectedPriority)?.name : 'None' }}
            </p>
          </div>
@@ -191,10 +191,10 @@ export const ScreenReaderFriendly: Story = {
      <div class="space-y-6 p-4">
        <div class="bg-green-50 dark-theme:bg-green-900/20 border border-green-200 dark-theme:border-green-700 rounded-lg p-4">
          <h3 class="text-lg font-semibold mb-2">♿ Screen Reader Test</h3>
-          <p class="text-sm text-gray-600 dark-theme:text-gray-300 mb-2">
+          <p class="text-sm text-smoke-600 dark-theme:text-smoke-300 mb-2">
            These dropdowns have proper ARIA attributes and labels for screen readers:
          </p>
-          <ul class="text-sm text-gray-600 dark-theme:text-gray-300 list-disc list-inside space-y-1">
+          <ul class="text-sm text-smoke-600 dark-theme:text-smoke-300 list-disc list-inside space-y-1">
            <li><code>role="combobox"</code> identifies as dropdown</li>
            <li><code>aria-haspopup="listbox"</code> indicates popup type</li>
            <li><code>aria-expanded</code> shows open/closed state</li>
@@ -205,7 +205,7 @@ export const ScreenReaderFriendly: Story = {

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div class="space-y-2">
-            <label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200" id="language-label">
+            <label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200" id="language-label">
              Preferred Language
            </label>
            <SingleSelect
@@ -215,13 +215,13 @@ export const ScreenReaderFriendly: Story = {
              class="w-full"
              aria-labelledby="language-label"
            />
-            <p class="text-xs text-gray-500" aria-live="polite">
+            <p class="text-xs text-smoke-500" aria-live="polite">
              Current: {{ selectedLanguage ? languageOptions.find(o => o.value === selectedLanguage)?.name : 'None selected' }}
            </p>
          </div>

          <div class="space-y-2">
-            <label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200" id="theme-label">
+            <label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200" id="theme-label">
              Interface Theme
            </label>
            <SingleSelect
@@ -231,7 +231,7 @@ export const ScreenReaderFriendly: Story = {
              class="w-full"
              aria-labelledby="theme-label"
            />
-            <p class="text-xs text-gray-500" aria-live="polite">
+            <p class="text-xs text-smoke-500" aria-live="polite">
              Current: {{ selectedTheme ? themeOptions.find(o => o.value === selectedTheme)?.name : 'No theme selected' }}
            </p>
          </div>
@@ -239,7 +239,7 @@ export const ScreenReaderFriendly: Story = {

        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
          <h4 class="font-semibold mb-2">🎧 Screen Reader Testing Tips</h4>
-          <ul class="text-sm text-gray-600 dark-theme:text-gray-300 space-y-1">
+          <ul class="text-sm text-smoke-600 dark-theme:text-smoke-300 space-y-1">
            <li>• Listen for role announcements when focusing</li>
            <li>• Verify dropdown state changes are announced</li>
            <li>• Check that selected values are spoken clearly</li>
@@ -299,7 +299,7 @@ export const FormIntegration: Story = {
      <div class="max-w-2xl mx-auto p-6">
        <div class="bg-purple-50 dark-theme:bg-purple-900/20 border border-purple-200 dark-theme:border-purple-700 rounded-lg p-4 mb-6">
          <h3 class="text-lg font-semibold mb-2">📝 Form Integration Test</h3>
-          <p class="text-sm text-gray-600 dark-theme:text-gray-300">
+          <p class="text-sm text-smoke-600 dark-theme:text-smoke-300">
            Test keyboard navigation through a complete form with SingleSelect components.
            Tab order should be logical and all elements should be accessible.
          </p>
@@ -307,19 +307,19 @@ export const FormIntegration: Story = {

        <form @submit.prevent="handleSubmit" class="space-y-6">
          <div>
-            <label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200 mb-1">
+            <label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200 mb-1">
              Title *
            </label>
            <input
              type="text"
              required
              placeholder="Enter a title"
-              class="block w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+              class="block w-full px-3 py-2 border border-smoke-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
            />
          </div>

          <div>
-            <label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200 mb-1">
+            <label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200 mb-1">
              Category *
            </label>
            <SingleSelect
@@ -332,7 +332,7 @@ export const FormIntegration: Story = {
          </div>

          <div>
-            <label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200 mb-1">
+            <label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200 mb-1">
              Status
            </label>
            <SingleSelect
@@ -344,7 +344,7 @@ export const FormIntegration: Story = {
          </div>

          <div>
-            <label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200 mb-1">
+            <label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200 mb-1">
              Assignee
            </label>
            <SingleSelect
@@ -356,13 +356,13 @@ export const FormIntegration: Story = {
          </div>

          <div>
-            <label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200 mb-1">
+            <label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200 mb-1">
              Description
            </label>
            <textarea
              rows="4"
              placeholder="Enter description"
-              class="block w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+              class="block w-full px-3 py-2 border border-smoke-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
            />
          </div>

@@ -375,16 +375,16 @@ export const FormIntegration: Story = {
            </button>
            <button
              type="button"
-              class="px-4 py-2 bg-gray-300 dark-theme:bg-gray-600 text-gray-700 dark-theme:text-gray-200 rounded-md hover:bg-gray-400 dark-theme:hover:bg-gray-500 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
+              class="px-4 py-2 bg-smoke-300 dark-theme:bg-smoke-600 text-smoke-700 dark-theme:text-smoke-200 rounded-md hover:bg-smoke-400 dark-theme:hover:bg-smoke-500 focus:ring-2 focus:ring-smoke-500 focus:ring-offset-2"
            >
              Cancel
            </button>
          </div>
        </form>

-        <div class="mt-6 p-4 bg-gray-50 dark-theme:bg-zinc-800 border border-gray-200 dark-theme:border-zinc-700 rounded-lg">
+        <div class="mt-6 p-4 bg-gray-50 dark-theme:bg-zinc-800 border border-smoke-200 dark-theme:border-zinc-700 rounded-lg">
          <h4 class="font-semibold mb-2">Current Form Data:</h4>
-          <pre class="text-xs text-gray-600 dark-theme:text-gray-300">{{ JSON.stringify(formData, null, 2) }}</pre>
+          <pre class="text-xs text-smoke-600 dark-theme:text-smoke-300">{{ JSON.stringify(formData, null, 2) }}</pre>
        </div>
      </div>
    `
@@ -395,7 +395,7 @@ export const AccessibilityChecklist: Story = {
  render: () => ({
    template: `
      <div class="max-w-4xl mx-auto p-6 space-y-6">
-        <div class="bg-gray-50 dark-theme:bg-zinc-800 border border-gray-200 dark-theme:border-zinc-700 rounded-lg p-6">
+        <div class="bg-gray-50 dark-theme:bg-zinc-800 border border-smoke-200 dark-theme:border-zinc-700 rounded-lg p-6">
          <h2 class="text-2xl font-bold mb-4">♿ SingleSelect Accessibility Checklist</h2>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -442,9 +442,9 @@ export const AccessibilityChecklist: Story = {
            </div>
          </div>

-          <div class="mt-6 p-4 bg-blue-50 dark-theme:bg-blue-900/20 border border-blue-200 dark-theme:border-blue-700 rounded-lg">
+          <div class="mt-6 p-4 bg-blue-50 dark-theme:bg-blue-900/20 border border-azure-400 dark-theme:border-blue-700 rounded-lg">
            <h4 class="font-semibold mb-2">🎯 Quick Test</h4>
-            <p class="text-sm text-gray-700 dark-theme:text-gray-200">
+            <p class="text-sm text-smoke-700 dark-theme:text-smoke-200">
              Close your eyes, use only the keyboard, and try to select different options from any dropdown above.
              If you can successfully navigate and make selections, the accessibility implementation is working!
            </p>
@@ -452,7 +452,7 @@ export const AccessibilityChecklist: Story = {

          <div class="mt-4 p-4 bg-orange-50 border border-orange-200 rounded-lg">
            <h4 class="font-semibold mb-2">⚡ Performance Note</h4>
-            <p class="text-sm text-gray-700 dark-theme:text-gray-200">
+            <p class="text-sm text-smoke-700 dark-theme:text-smoke-200">
              These accessibility features are built into the component with minimal performance impact.
              The ARIA attributes and keyboard handlers add less than 1KB to the bundle size.
            </p>
--- a/src/components/input/SingleSelect.vue
+++ b/src/components/input/SingleSelect.vue
@@ -26,11 +26,11 @@
        <slot name="icon" />
        <span
          v-if="slotProps.value !== null && slotProps.value !== undefined"
-          class="text-zinc-700 dark-theme:text-gray-200"
+          class="text-zinc-700 dark-theme:text-smoke-200"
        >
          {{ getLabel(slotProps.value) }}
        </span>
-        <span v-else class="text-zinc-700 dark-theme:text-gray-200">
+        <span v-else class="text-zinc-700 dark-theme:text-smoke-200">
          {{ label }}
        </span>
      </div>
@@ -158,7 +158,7 @@ const pt = computed(() => ({
    )
  },
  listContainer: () => ({
-    style: `max-height: ${listMaxHeight}`,
+    style: `max-height: min(${listMaxHeight}, 50vh)`,
    class: 'scrollbar-custom'
  }),
  list: {
--- a/src/components/load3d/Load3D.vue
+++ b/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>
--- a/src/components/load3d/Load3DAnimation.vue
+++ b/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>
--- a/src/components/load3d/Load3DAnimationScene.vue
+++ b/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>
--- a/src/components/load3d/Load3DControls.vue
+++ b/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-gray-700/30"
+    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">
@@ -16,83 +20,61 @@
            v-for="category in availableCategories"
            :key="category"
            class="p-button-text flex w-full items-center justify-start"
-            :class="{ 'bg-gray-600': activeCategory === category }"
+            :class="{ 'bg-smoke-600': activeCategory === category }"
            @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>
    </div>

-    <div v-show="activeCategory" class="rounded-lg bg-gray-700/30">
+    <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)
 })
--- a/src/components/load3d/Load3DScene.vue
+++ b/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>
--- a/src/components/load3d/Load3dViewerContent.vue
+++ b/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) {
--- a/src/components/load3d/LoadingOverlay.vue
+++ b/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>
--- a/src/components/load3d/controls/AnimationControls.vue
+++ b/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>
--- a/src/components/load3d/controls/CameraControls.vue
+++ b/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

--- a/src/components/load3d/controls/ExportControls.vue
+++ b/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
 }>()
--- a/src/components/load3d/controls/LightControls.vue
+++ b/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

--- a/src/components/load3d/controls/ModelControls.vue
+++ b/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(() => {
--- a/src/components/load3d/controls/RecordingControls.vue
+++ b/src/components/load3d/controls/RecordingControls.vue
@@ -1,18 +1,6 @@
 <template>
-  <div class="relative rounded-lg bg-gray-700/30">
+  <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')
 }

--- a/src/components/load3d/controls/SceneControls.vue
+++ b/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 = () => {
--- a/src/components/load3d/controls/ViewerControls.vue
+++ b/src/components/load3d/controls/ViewerControls.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="relative rounded-lg bg-gray-700/30">
+  <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="openIn3DViewer">
        <i
@@ -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
 }>()
--- a/src/components/load3d/controls/viewer/ViewerExportControls.vue
+++ b/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
 }>()
--- a/src/components/load3d/controls/viewer/ViewerLightControls.vue
+++ b/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')
--- a/src/components/load3d/controls/viewer/ViewerModelControls.vue
+++ b/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"
--- a/src/components/load3d/controls/viewer/ViewerSceneControls.vue
+++ b/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')

--- a/src/components/searchbox/NodeSearchBox.vue
+++ b/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
--- a/src/components/sidebar/ComfyMenuButton.vue
+++ b/src/components/sidebar/ComfyMenuButton.vue
@@ -1,21 +1,23 @@
 <template>
  <div
-    class="comfy-menu-button-wrapper flex shrink-0 cursor-pointer flex-col items-center justify-center rounded-t-md p-2 transition-colors"
+    v-tooltip="{
+      value: t('sideToolbar.labels.menu'),
+      showDelay: 300,
+      hideDelay: 300
+    }"
+    class="comfy-menu-button-wrapper flex shrink-0 cursor-pointer flex-col items-center justify-center p-2 transition-colors"
    :class="{
      'comfy-menu-button-active': menuRef?.visible
    }"
-    @click="menuRef?.toggle($event)"
+    @click="onLogoMenuClick($event)"
  >
-    <ComfyLogoTransparent
-      alt="ComfyUI Logo"
-      class="comfyui-logo h-[18px] w-[18px]"
-    />
-
-    <span
-      v-if="!isSmall"
-      class="side-bar-button-label mt-1 text-center text-[10px]"
-      >{{ t('sideToolbar.labels.menu') }}</span
-    >
+    <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-black">
+      <ComfyLogo
+        alt="ComfyUI Logo"
+        class="comfyui-logo h-[18px] w-[18px] text-white"
+        mode="fill"
+      />
+    </div>
  </div>

  <TieredMenu
@@ -75,8 +77,10 @@ import { computed, nextTick, ref } from 'vue'
 import { useI18n } from 'vue-i18n'

 import SettingDialogHeader from '@/components/dialog/header/SettingDialogHeader.vue'
-import ComfyLogoTransparent from '@/components/icons/ComfyLogoTransparent.vue'
+import ComfyLogo from '@/components/icons/ComfyLogo.vue'
+import { useWorkflowTemplateSelectorDialog } from '@/composables/useWorkflowTemplateSelectorDialog'
 import SettingDialogContent from '@/platform/settings/components/SettingDialogContent.vue'
+import { useTelemetry } from '@/platform/telemetry'
 import { useColorPaletteService } from '@/services/colorPaletteService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useDialogStore } from '@/stores/dialogStore'
@@ -95,14 +99,19 @@ const colorPaletteService = useColorPaletteService()
 const dialogStore = useDialogStore()
 const managerState = useManagerState()

-const { isSmall = false } = defineProps<{
-  isSmall?: boolean
-}>()
-
 const menuRef = ref<
  ({ dirty: boolean } & TieredMenuMethods & TieredMenuState) | null
 >(null)

+const telemetry = useTelemetry()
+
+function onLogoMenuClick(event: MouseEvent) {
+  telemetry?.trackUiButtonClicked({
+    button_id: 'sidebar_comfy_menu_opened'
+  })
+  menuRef.value?.toggle(event)
+}
+
 const translateMenuItem = (item: MenuItem): MenuItem => {
  const label = typeof item.label === 'function' ? item.label() : item.label
  const translatedLabel = label
@@ -160,13 +169,18 @@ 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',
    label: t('g.settings'),
    icon: 'mdi mdi-cog-outline',
-    command: () => showSettings()
+    command: () => {
+      telemetry?.trackUiButtonClicked({
+        button_id: 'sidebar_settings_menu_opened'
+      })
+      showSettings()
+    }
  },
  {
    key: 'manage-extensions',
@@ -276,12 +290,12 @@ const hasActiveStateSiblings = (item: MenuItem): boolean => {
 }

 .comfy-menu-button-wrapper:hover {
-  background: var(--p-button-text-secondary-hover-background);
+  background: var(--interface-panel-hover-surface);
 }

 .comfy-menu-button-active,
 .comfy-menu-button-active:hover {
-  background-color: var(--content-hover-bg);
+  background: var(--interface-panel-selected-surface);
 }

 .keybinding-tag {
--- a/src/components/sidebar/SideToolbar.vue
+++ b/src/components/sidebar/SideToolbar.vue
@@ -6,7 +6,8 @@
      'small-sidebar': isSmall,
      'connected-sidebar': isConnected,
      'floating-sidebar': !isConnected,
-      'overflowing-sidebar': isOverflowing
+      'overflowing-sidebar': isOverflowing,
+      'border-r border-[var(--interface-stroke)] shadow-interface': isConnected
    }"
  >
    <div
@@ -18,7 +19,7 @@
      "
    >
      <div ref="topToolbarRef" :class="groupClasses">
-        <ComfyMenuButton :is-small="isSmall" />
+        <ComfyMenuButton />
        <SidebarIcon
          v-for="tab in tabs"
          :key="tab.id"
@@ -57,6 +58,7 @@ import ComfyMenuButton from '@/components/sidebar/ComfyMenuButton.vue'
 import SidebarBottomPanelToggleButton from '@/components/sidebar/SidebarBottomPanelToggleButton.vue'
 import SidebarShortcutsToggleButton from '@/components/sidebar/SidebarShortcutsToggleButton.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { useTelemetry } from '@/platform/telemetry'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { useKeybindingStore } from '@/stores/keybindingStore'
@@ -97,10 +99,40 @@ const isConnected = computed(
 const tabs = computed(() => workspaceStore.getSidebarTabs())
 const selectedTab = computed(() => workspaceStore.sidebarTab.activeSidebarTab)

-const onTabClick = async (item: SidebarTabExtension) =>
+/**
+ * Handle sidebar tab icon click.
+ * - Emits UI button telemetry for known tabs
+ * - Delegates to the corresponding toggle command
+ */
+const onTabClick = async (item: SidebarTabExtension) => {
+  const telemetry = useTelemetry()
+
+  const isNodeLibraryTab = item.id === 'node-library'
+  const isModelLibraryTab = item.id === 'model-library'
+  const isWorkflowsTab = item.id === 'workflows'
+  const isAssetsTab = item.id === 'assets'
+
+  if (isNodeLibraryTab)
+    telemetry?.trackUiButtonClicked({
+      button_id: 'sidebar_tab_node_library_selected'
+    })
+  else if (isModelLibraryTab)
+    telemetry?.trackUiButtonClicked({
+      button_id: 'sidebar_tab_model_library_selected'
+    })
+  else if (isWorkflowsTab)
+    telemetry?.trackUiButtonClicked({
+      button_id: 'sidebar_tab_workflows_selected'
+    })
+  else if (isAssetsTab)
+    telemetry?.trackUiButtonClicked({
+      button_id: 'sidebar_tab_assets_media_selected'
+    })
+
  await commandStore.commands
    .find((cmd) => cmd.id === `Workspace.ToggleSidebarTab.${item.id}`)
    ?.function?.()
+}

 const keybindingStore = useKeybindingStore()
 const getTabTooltipSuffix = (tab: SidebarTabExtension) => {
@@ -114,7 +146,7 @@ const isOverflowing = ref(false)
 const groupClasses = computed(() =>
  cn(
    'sidebar-item-group pointer-events-auto flex flex-col items-center overflow-hidden flex-shrink-0' +
-      (isConnected.value ? '' : ' rounded-lg shadow-md')
+      (isConnected.value ? '' : ' rounded-lg shadow-interface')
  )
 )

@@ -183,7 +215,7 @@ onMounted(() => {
  --sidebar-padding: 4px;
  --sidebar-icon-size: 1rem;

-  --sidebar-default-floating-width: 56px;
+  --sidebar-default-floating-width: 48px;
  --sidebar-default-connected-width: calc(
    var(--sidebar-default-floating-width) + var(--sidebar-padding) * 2
  );
--- a/src/components/sidebar/SidebarBottomPanelToggleButton.vue
+++ b/src/components/sidebar/SidebarBottomPanelToggleButton.vue
@@ -3,7 +3,7 @@
    :label="$t('sideToolbar.labels.console')"
    :tooltip="$t('menu.toggleBottomPanel')"
    :selected="bottomPanelStore.activePanel == 'terminal'"
-    @click="bottomPanelStore.toggleBottomPanel"
+    @click="toggleConsole"
  >
    <template #icon>
      <i-ph:terminal-bold />
@@ -12,9 +12,20 @@
 </template>

 <script setup lang="ts">
+import { useTelemetry } from '@/platform/telemetry'
 import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'

 import SidebarIcon from './SidebarIcon.vue'

 const bottomPanelStore = useBottomPanelStore()
+
+/**
+ * Toggle console bottom panel and track UI button click.
+ */
+const toggleConsole = () => {
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'sidebar_bottom_panel_console_toggled'
+  })
+  bottomPanelStore.toggleBottomPanel()
+}
 </script>
--- a/src/components/sidebar/SidebarHelpCenterIcon.vue
+++ b/src/components/sidebar/SidebarHelpCenterIcon.vue
@@ -65,6 +65,7 @@ import { computed, onMounted, toRefs } from 'vue'

 import HelpCenterMenuContent from '@/components/helpcenter/HelpCenterMenuContent.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { useTelemetry } from '@/platform/telemetry'
 import { useReleaseStore } from '@/platform/updates/common/releaseStore'
 import ReleaseNotificationToast from '@/platform/updates/components/ReleaseNotificationToast.vue'
 import WhatsNewPopup from '@/platform/updates/components/WhatsNewPopup.vue'
@@ -104,7 +105,13 @@ const sidebarLocation = computed(() =>
  settingStore.get('Comfy.Sidebar.Location')
 )

+/**
+ * Toggle Help Center and track UI button click.
+ */
 const toggleHelpCenter = () => {
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'sidebar_help_center_toggled'
+  })
  helpCenterStore.toggle()
 }

--- a/src/components/sidebar/SidebarIcon.vue
+++ b/src/components/sidebar/SidebarIcon.vue
@@ -86,7 +86,11 @@ const computedTooltip = computed(() => t(tooltip) + tooltipSuffix)
 }

 .side-bar-button-selected {
-  background-color: var(--content-hover-bg);
+  background-color: var(--interface-panel-selected-surface);
+  color: var(--content-hover-fg);
+}
+.side-bar-button:hover {
+  background-color: var(--interface-panel-hover-surface);
  color: var(--content-hover-fg);
 }

--- a/src/components/sidebar/SidebarShortcutsToggleButton.vue
+++ b/src/components/sidebar/SidebarShortcutsToggleButton.vue
@@ -15,6 +15,7 @@
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'

+import { useTelemetry } from '@/platform/telemetry'
 import { useCommandStore } from '@/stores/commandStore'
 import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'

@@ -34,7 +35,13 @@ const tooltipText = computed(
  () => `${t('shortcuts.keyboardShortcuts')} (${formatKeySequence(command)})`
 )

+/**
+ * Toggle keyboard shortcuts panel and track UI button click.
+ */
 const toggleShortcutsPanel = () => {
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'sidebar_shortcuts_panel_toggled'
+  })
  bottomPanelStore.togglePanel('shortcuts')
 }
 </script>
--- a/src/components/sidebar/SidebarTemplatesButton.vue
+++ b/src/components/sidebar/SidebarTemplatesButton.vue
@@ -12,19 +12,25 @@
 <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 { useTelemetry } from '@/platform/telemetry'

 import SidebarIcon from './SidebarIcon.vue'

 const settingStore = useSettingStore()
-const commandStore = useCommandStore()

 const isSmall = computed(
  () => settingStore.get('Comfy.Sidebar.Size') === 'small'
 )

+/**
+ * Open templates dialog from sidebar and track UI button click.
+ */
 const openTemplates = () => {
-  void commandStore.execute('Comfy.BrowseTemplates')
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'sidebar_templates_dialog_opened'
+  })
+  useWorkflowTemplateSelectorDialog().show('sidebar')
 }
 </script>
--- a/src/components/sidebar/tabs/AssetSidebarTemplate.vue
+++ b/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>
--- a/src/components/sidebar/tabs/AssetsSidebarTab.vue
+++ b/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'>('output')
+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>
--- a/src/components/sidebar/tabs/QueueSidebarTab.vue
+++ b/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'),
--- a/src/components/tab/Tab.vue
+++ b/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>
--- a/src/components/tab/TabList.stories.ts
+++ b/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>
+    `
+  })
+}
--- a/src/components/tab/TabList.vue
+++ b/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>
--- a/src/components/toast/GlobalToast.vue
+++ b/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;
    }
  `
 }
--- a/src/components/toast/VueNodesMigrationToast.vue
+++ b/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>
--- a/src/components/topbar/CurrentUserButton.vue
+++ b/src/components/topbar/CurrentUserButton.vue
@@ -3,16 +3,18 @@
  <div>
    <Button
      v-if="isLoggedIn"
-      class="user-profile-button p-1"
+      class="user-profile-button p-1 hover:bg-transparent"
      severity="secondary"
      text
      :aria-label="$t('g.currentUser')"
      @click="popover?.toggle($event)"
    >
-      <div class="flex items-center rounded-full bg-(--p-content-background)">
+      <div
+        class="flex items-center gap-1 rounded-full hover:bg-interface-button-hover-surface"
+      >
        <UserAvatar :photo-url="photoURL" />

-        <i class="pi pi-chevron-down px-1" :style="{ fontSize: '0.5rem' }" />
+        <i class="pi pi-chevron-down px-1" :style="{ fontSize: '0.6rem' }" />
      </div>
    </Button>

--- a/src/components/topbar/CurrentUserPopover.test.ts
+++ b/src/components/topbar/CurrentUserPopover.test.ts
@@ -69,6 +69,24 @@ vi.mock('@/services/dialogService', () => ({
  }))
 }))

+// Mock the firebaseAuthStore
+vi.mock('@/stores/firebaseAuthStore', () => ({
+  useFirebaseAuthStore: vi.fn(() => ({
+    getAuthHeader: vi
+      .fn()
+      .mockResolvedValue({ Authorization: 'Bearer mock-token' })
+  }))
+}))
+
+// Mock the useSubscription composable
+const mockFetchStatus = vi.fn().mockResolvedValue(undefined)
+vi.mock('@/platform/cloud/subscription/composables/useSubscription', () => ({
+  useSubscription: vi.fn(() => ({
+    isActiveSubscription: { value: true },
+    fetchStatus: mockFetchStatus
+  }))
+}))
+
 // Mock UserAvatar component
 vi.mock('@/components/common/UserAvatar.vue', () => ({
  default: {
@@ -89,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()
@@ -121,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')
@@ -133,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')
@@ -151,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')
@@ -169,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'
    )

@@ -190,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')
--- a/src/components/topbar/CurrentUserPopover.vue
+++ b/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,30 +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 :label="$t('credits.topUp.topUp')" @click="handleTopUp" />
-      </div>
-    </div>
  </div>
 </template>

@@ -82,35 +101,63 @@ 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 { useTelemetry } from '@/platform/telemetry'
 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, fetchStatus } = useSubscription()

 const handleOpenUserSettings = () => {
  dialogService.showSettingsDialog('user')
  emit('close')
 }

+const handleOpenPlanAndCreditsSettings = () => {
+  if (isCloud) {
+    dialogService.showSettingsDialog('subscription')
+  } else {
+    dialogService.showSettingsDialog('credits')
+  }
+
+  emit('close')
+}
+
 const handleTopUp = () => {
+  // Track purchase credits entry from avatar popover
+  useTelemetry()?.trackAddApiCreditButtonClicked()
  dialogService.showTopUpCreditsDialog()
  emit('close')
 }

+const handleOpenPartnerNodesInfo = () => {
+  window.open(
+    '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(() => {
--- a/src/components/topbar/LoginButton.vue
+++ b/src/components/topbar/LoginButton.vue
@@ -1,15 +1,18 @@
 <template>
  <Button
    v-if="!isLoggedIn"
-    :label="t('auth.login.loginButton')"
    outlined
+    rounded
    severity="secondary"
-    class="text-neutral border-black/50 px-4 capitalize dark-theme:border-white/50 dark-theme:text-white"
+    class="size-8 border-black/50 bg-transparent text-black hover:bg-interface-panel-hover-surface dark-theme:border-white/50 dark-theme:text-white"
    @click="handleSignIn()"
    @mouseenter="showPopover"
    @mouseleave="hidePopover"
-  />
-
+  >
+    <template #icon>
+      <i class="icon-[lucide--user] size-4" />
+    </template>
+  </Button>
  <Popover
    ref="popoverRef"
    class="p-2"
--- a/src/components/topbar/TopbarBadge.test.ts
+++ b/src/components/topbar/TopbarBadge.test.ts
@@ -160,8 +160,8 @@ describe('TopbarBadge', () => {
        'full'
      )

-      expect(wrapper.find('.bg-warning-100').exists()).toBe(true)
-      expect(wrapper.find('.text-warning-100').exists()).toBe(true)
+      expect(wrapper.find('.bg-gold-600').exists()).toBe(true)
+      expect(wrapper.find('.text-gold-600').exists()).toBe(true)
    })

    it('uses default error icon for error variant', () => {
--- a/src/components/topbar/TopbarBadge.vue
+++ b/src/components/topbar/TopbarBadge.vue
@@ -37,7 +37,7 @@
        >
          {{ badge.label }}
        </div>
-        <div class="text-sm font-semibold">{{ badge.text }}</div>
+        <div class="text-sm font-inter">{{ badge.text }}</div>
        <div v-if="badge.tooltip" class="text-xs">
          {{ badge.tooltip }}
        </div>
@@ -90,7 +90,7 @@
        >
          {{ badge.label }}
        </div>
-        <div class="text-sm font-semibold">{{ badge.text }}</div>
+        <div class="text-sm font-inter">{{ badge.text }}</div>
        <div v-if="badge.tooltip" class="text-xs">
          {{ badge.tooltip }}
        </div>
@@ -117,7 +117,7 @@
    >
      {{ badge.label }}
    </div>
-    <div class="font-inter text-sm font-extrabold" :class="textClasses">
+    <div class="font-inter text-sm" :class="textClasses">
      {{ badge.text }}
    </div>
  </div>
@@ -162,7 +162,7 @@ const labelClasses = computed(() => {
    case 'error':
      return 'bg-danger-100 text-white'
    case 'warning':
-      return 'bg-warning-100 text-black'
+      return 'bg-gold-600 text-black'
    case 'info':
    default:
      return 'bg-white text-black'
@@ -174,10 +174,10 @@ const textClasses = computed(() => {
    case 'error':
      return 'text-danger-100'
    case 'warning':
-      return 'text-warning-100'
+      return 'text-gold-600'
    case 'info':
    default:
-      return 'text-slate-100'
+      return 'text-text-primary'
  }
 })

@@ -205,7 +205,7 @@ const dotClasses = computed(() => {
    case 'error':
      return 'bg-danger-100'
    case 'warning':
-      return 'bg-warning-100'
+      return 'bg-gold-600'
    case 'info':
    default:
      return 'bg-slate-100'
--- a/src/components/topbar/TryVueNodeBanner.vue
+++ b/src/components/topbar/TryVueNodeBanner.vue
@@ -0,0 +1,71 @@
+<template>
+  <div
+    v-if="showVueNodesBanner"
+    class="pointer-events-auto relative w-full h-10 bg-gradient-to-r from-blue-600 to-blue-700 flex items-center justify-center px-4"
+  >
+    <div class="flex items-center">
+      <i class="icon-[lucide--sparkles]"></i>
+      <span class="pl-2">{{ $t('vueNodesBanner.message') }}</span>
+      <Button
+        class="cursor-pointer bg-transparent rounded h-7 px-3 border border-white text-white ml-4 text-xs"
+        @click="handleTryItOut"
+      >
+        {{ $t('vueNodesBanner.tryItOut') }}
+      </Button>
+    </div>
+    <Button
+      class="cursor-pointer bg-transparent border-0 outline-0 grid place-items-center absolute right-4"
+      unstyled
+      @click="handleDismiss"
+    >
+      <i class="w-5 h-5 icon-[lucide--x]"></i>
+    </Button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useLocalStorage } from '@vueuse/core'
+import Button from 'primevue/button'
+import { computed } from 'vue'
+
+import { useSettingStore } from '@/platform/settings/settingStore'
+
+const STORAGE_KEY = 'vueNodesBannerDismissed'
+
+const settingStore = useSettingStore()
+const bannerDismissed = useLocalStorage(STORAGE_KEY, false)
+
+const vueNodesEnabled = computed(() => {
+  try {
+    return settingStore.get('Comfy.VueNodes.Enabled') ?? false
+  } catch {
+    return false
+  }
+})
+
+const showVueNodesBanner = computed(() => {
+  if (vueNodesEnabled.value) {
+    return false
+  }
+
+  if (bannerDismissed.value) {
+    return false
+  }
+
+  return true
+})
+
+const handleDismiss = (): void => {
+  bannerDismissed.value = true
+}
+
+const handleTryItOut = async (): Promise<void> => {
+  try {
+    await settingStore.set('Comfy.VueNodes.Enabled', true)
+  } catch (error) {
+    console.error('Failed to enable Vue nodes:', error)
+  } finally {
+    handleDismiss()
+  }
+}
+</script>
--- a/src/components/topbar/WorkflowTabs.vue
+++ b/src/components/topbar/WorkflowTabs.vue
@@ -1,7 +1,7 @@
 <template>
  <div
    ref="containerRef"
-    class="workflow-tabs-container flex h-full max-w-full flex-auto flex-row overflow-hidden"
+    class="workflow-tabs-container flex h-full max-w-full flex-auto flex-row overflow-hidden border-b border-[var(--interface-stroke)] shadow-interface"
    :class="{ 'workflow-tabs-container-desktop': isDesktop }"
  >
    <Button
--- a/src/components/widget/layout/BaseModalLayout.vue
+++ b/src/components/widget/layout/BaseModalLayout.vue
@@ -133,7 +133,7 @@ const toggleRightPanel = () => {
 const layoutClasses = cn(
  'base-widget-layout',
  'rounded-2xl overflow-hidden relative',
-  'bg-gray-50 dark-theme:bg-gray-800'
+  'bg-gray-50 dark-theme:bg-smoke-800'
 )

 const rightPanelButtonClasses = computed(() => {
@@ -150,7 +150,7 @@ const closeButtonClasses = cn(

 const mainContainerClasses = cn(
  'flex-1 flex',
-  'bg-gray-100 dark-theme:bg-neutral-900'
+  'bg-smoke-100 dark-theme:bg-neutral-900'
 )

 const headerClasses = cn(
--- a/src/components/widget/nav/NavItem.vue
+++ b/src/components/widget/nav/NavItem.vue
@@ -3,8 +3,8 @@
    class="flex cursor-pointer items-center gap-2 rounded-md px-4 py-3 text-sm transition-colors"
    :class="
      active
-        ? 'bg-gray-400 dark-theme:bg-charcoal-300 text-neutral'
-        : 'text-neutral hover:bg-gray-100 dark-theme:hover:bg-charcoal-300'
+        ? 'bg-smoke-400 dark-theme:bg-charcoal-300 text-neutral'
+        : 'text-neutral hover:bg-smoke-100 dark-theme:hover:bg-charcoal-300'
    "
    role="button"
    @click="onClick"
--- a/src/composables/auth/useFirebaseAuthActions.ts
+++ b/src/composables/auth/useFirebaseAuthActions.ts
@@ -1,12 +1,13 @@
 import { FirebaseError } from 'firebase/app'
 import { AuthErrorCodes } from 'firebase/auth'
 import { ref } from 'vue'
-import { useRouter } from 'vue-router'

 import { useErrorHandling } from '@/composables/useErrorHandling'
 import type { ErrorRecoveryStrategy } from '@/composables/useErrorHandling'
 import { t } from '@/i18n'
 import { isCloud } from '@/platform/distribution/types'
+import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
+import { useTelemetry } from '@/platform/telemetry'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import { useDialogService } from '@/services/dialogService'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
@@ -59,8 +60,7 @@ export const useFirebaseAuthActions = () => {

    if (isCloud) {
      try {
-        const router = useRouter()
-        await router.push({ name: 'cloud-login' })
+        window.location.href = '/cloud/login'
      } catch (error) {
        // needed for local development until we bring in cloud login pages.
        window.location.reload()
@@ -82,6 +82,9 @@ export const useFirebaseAuthActions = () => {
  )

  const purchaseCredits = wrapWithErrorHandlingAsync(async (amount: number) => {
+    const { isActiveSubscription } = useSubscription()
+    if (!isActiveSubscription.value) return
+
    const response = await authStore.initiateCreditPurchase({
      amount_micros: usdToMicros(amount),
      currency: 'usd'
@@ -95,7 +98,7 @@ export const useFirebaseAuthActions = () => {
      )
    }

-    // Go to Stripe checkout page
+    useTelemetry()?.startTopupTracking()
    window.open(response.checkout_url, '_blank')
  }, reportError)

@@ -112,7 +115,9 @@ export const useFirebaseAuthActions = () => {
  }, reportError)

  const fetchBalance = wrapWithErrorHandlingAsync(async () => {
-    return await authStore.fetchBalance()
+    const result = await authStore.fetchBalance()
+    // Top-up completion tracking happens in UsageLogsTable when events are fetched
+    return result
  }, reportError)

  const signInWithGoogle = wrapWithErrorHandlingAsync(async () => {
--- a/src/composables/canvas/useSelectionToolboxPosition.ts
+++ b/src/composables/canvas/useSelectionToolboxPosition.ts
@@ -5,7 +5,11 @@ import type { Ref } from 'vue'
 import { useSelectedLiteGraphItems } from '@/composables/canvas/useSelectedLiteGraphItems'
 import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
 import type { ReadOnlyRect } from '@/lib/litegraph/src/interfaces'
-import { LGraphGroup, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import {
+  LGraphGroup,
+  LGraphNode,
+  LiteGraph
+} from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import { isLGraphGroup, isLGraphNode } from '@/utils/litegraphUtil'
@@ -95,8 +99,12 @@ export function useSelectionToolboxPosition(
      } else {
        // Fallback to LiteGraph bounds for regular nodes or non-string IDs
        if (item instanceof LGraphNode || item instanceof LGraphGroup) {
-          const bounds = item.getBounding()
-          allBounds.push([bounds[0], bounds[1], bounds[2], bounds[3]] as const)
+          allBounds.push([
+            item.pos[0],
+            item.pos[1] - LiteGraph.NODE_TITLE_HEIGHT,
+            item.size[0],
+            item.size[1] + LiteGraph.NODE_TITLE_HEIGHT
+          ])
        }
      }
    }
--- a/src/composables/graph/useGraphNodeManager.ts
+++ b/src/composables/graph/useGraphNodeManager.ts
@@ -269,10 +269,13 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
      const updatedWidgets = currentData.widgets.map((w) =>
        w.name === widgetName ? { ...w, value: validateWidgetValue(value) } : w
      )
-      vueNodeData.set(nodeId, {
+      // Create a completely new object to ensure Vue reactivity triggers
+      const updatedData = {
        ...currentData,
        widgets: updatedWidgets
-      })
+      }
+
+      vueNodeData.set(nodeId, updatedData)
    } catch (error) {
      // Ignore widget update errors to prevent cascade failures
    }
--- a/src/composables/graph/useVueNodeLifecycle.ts
+++ b/src/composables/graph/useVueNodeLifecycle.ts
@@ -4,14 +4,15 @@ import { shallowRef, watch } from 'vue'
 import { useGraphNodeManager } from '@/composables/graph/useGraphNodeManager'
 import type { GraphNodeManager } from '@/composables/graph/useGraphNodeManager'
 import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
-import type { LGraphCanvas, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { useVueNodesMigrationDismissed } from '@/composables/useVueNodesMigrationDismissed'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import { useLayoutSync } from '@/renderer/core/layout/sync/useLayoutSync'
-import { useLinkLayoutSync } from '@/renderer/core/layout/sync/useLinkLayoutSync'
-import { useSlotLayoutSync } from '@/renderer/core/layout/sync/useSlotLayoutSync'
+import { ensureCorrectLayoutScale } from '@/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale'
 import { app as comfyApp } from '@/scripts/app'
+import { useToastStore } from '@/platform/updates/common/toastStore'

 function useVueNodeLifecycleIndividual() {
  const canvasStore = useCanvasStore()
@@ -21,8 +22,8 @@ function useVueNodeLifecycleIndividual() {
  const nodeManager = shallowRef<GraphNodeManager | null>(null)

  const { startSync } = useLayoutSync()
-  const linkSyncManager = useLinkLayoutSync()
-  const slotSyncManager = useSlotLayoutSync()
+
+  const isVueNodeToastDismissed = useVueNodesMigrationDismissed()

  const initializeNodeManager = () => {
    // Use canvas graph if available (handles subgraph contexts), fallback to app graph
@@ -62,10 +63,6 @@ function useVueNodeLifecycleIndividual() {

    // Initialize layout sync (one-way: Layout Store → LiteGraph)
    startSync(canvasStore.canvas)
-
-    if (comfyApp.canvas) {
-      linkSyncManager.start(comfyApp.canvas)
-    }
  }

  const disposeNodeManagerAndSyncs = () => {
@@ -77,17 +74,25 @@ function useVueNodeLifecycleIndividual() {
      /* empty */
    }
    nodeManager.value = null
-
-    linkSyncManager.stop()
  }

  // Watch for Vue nodes enabled state changes
  watch(
    () => shouldRenderVueNodes.value && Boolean(comfyApp.canvas?.graph),
-    (enabled) => {
+    (enabled, wasEnabled) => {
      if (enabled) {
        initializeNodeManager()
+        ensureCorrectLayoutScale()
+
+        if (!wasEnabled && !isVueNodeToastDismissed.value) {
+          useToastStore().add({
+            group: 'vue-nodes-migration',
+            severity: 'info',
+            life: 0
+          })
+        }
      } else {
+        comfyApp.canvas?.setDirty(true, true)
        disposeNodeManagerAndSyncs()
      }
    },
@@ -96,25 +101,14 @@ function useVueNodeLifecycleIndividual() {

  // Consolidated watch for slot layout sync management
  watch(
-    [() => canvasStore.canvas, () => shouldRenderVueNodes.value],
-    ([canvas, vueMode], [, oldVueMode]) => {
+    () => shouldRenderVueNodes.value,
+    (vueMode, oldVueMode) => {
      const modeChanged = vueMode !== oldVueMode

      // Clear stale slot layouts when switching modes
      if (modeChanged) {
        layoutStore.clearAllSlotLayouts()
      }
-
-      // Switching to Vue
-      if (vueMode) {
-        slotSyncManager.stop()
-      }
-
-      // Switching to LG
-      const shouldRun = Boolean(canvas?.graph) && !vueMode
-      if (shouldRun && canvas) {
-        slotSyncManager.attemptStart(canvas as LGraphCanvas)
-      }
    },
    { immediate: true, flush: 'sync' }
  )
@@ -152,8 +146,6 @@ function useVueNodeLifecycleIndividual() {
      nodeManager.value.cleanup()
      nodeManager.value = null
    }
-    slotSyncManager.stop()
-    linkSyncManager.stop()
  }

  return {
--- a/src/composables/graph/useWidgetValue.ts
+++ b/src/composables/graph/useWidgetValue.ts
@@ -2,16 +2,17 @@
 * Composable for managing widget value synchronization between Vue and LiteGraph
 * Provides consistent pattern for immediate UI updates and LiteGraph callbacks
 */
-import { ref, watch } from 'vue'
+import { computed, toValue, ref, watch } from 'vue'
 import type { Ref } from 'vue'

 import type { SimplifiedWidget, WidgetValue } from '@/types/simplifiedWidget'
+import type { MaybeRefOrGetter } from '@vueuse/core'

 interface UseWidgetValueOptions<T extends WidgetValue = WidgetValue, U = T> {
  /** The widget configuration from LiteGraph */
  widget: SimplifiedWidget<T>
-  /** The current value from parent component */
-  modelValue: T
+  /** The current value from parent component (can be a value or a getter function) */
+  modelValue: MaybeRefOrGetter<T>
  /** Default value if modelValue is null/undefined */
  defaultValue: T
  /** Emit function from component setup */
@@ -46,8 +47,21 @@ export function useWidgetValue<T extends WidgetValue = WidgetValue, U = T>({
  emit,
  transform
 }: UseWidgetValueOptions<T, U>): UseWidgetValueReturn<T, U> {
-  // Local value for immediate UI updates
-  const localValue = ref<T>(modelValue ?? defaultValue)
+  // Ref for immediate UI feedback before value flows back through modelValue
+  const newProcessedValue = ref<T | null>(null)
+
+  // Computed that prefers the immediately processed value, then falls back to modelValue
+  const localValue = computed<T>(
+    () => newProcessedValue.value ?? toValue(modelValue) ?? defaultValue
+  )
+
+  // Clear newProcessedValue when modelValue updates (allowing external changes to flow through)
+  watch(
+    () => toValue(modelValue),
+    () => {
+      newProcessedValue.value = null
+    }
+  )

  // Handle user changes
  const onChange = (newValue: U) => {
@@ -71,21 +85,13 @@ export function useWidgetValue<T extends WidgetValue = WidgetValue, U = T>({
      }
    }

-    // 1. Update local state for immediate UI feedback
-    localValue.value = processedValue
+    // Set for immediate UI feedback
+    newProcessedValue.value = processedValue

-    // 2. Emit to parent component
+    // Emit to parent component
    emit('update:modelValue', processedValue)
  }

-  // Watch for external updates from LiteGraph
-  watch(
-    () => modelValue,
-    (newValue) => {
-      localValue.value = newValue ?? defaultValue
-    }
-  )
-
  return {
    localValue: localValue as Ref<T>,
    onChange
@@ -97,7 +103,7 @@ export function useWidgetValue<T extends WidgetValue = WidgetValue, U = T>({
 */
 export function useStringWidgetValue(
  widget: SimplifiedWidget<string>,
-  modelValue: string,
+  modelValue: string | (() => string),
  emit: (event: 'update:modelValue', value: string) => void
 ) {
  return useWidgetValue({
@@ -114,7 +120,7 @@ export function useStringWidgetValue(
 */
 export function useNumberWidgetValue(
  widget: SimplifiedWidget<number>,
-  modelValue: number,
+  modelValue: number | (() => number),
  emit: (event: 'update:modelValue', value: number) => void
 ) {
  return useWidgetValue({
@@ -137,7 +143,7 @@ export function useNumberWidgetValue(
 */
 export function useBooleanWidgetValue(
  widget: SimplifiedWidget<boolean>,
-  modelValue: boolean,
+  modelValue: boolean | (() => boolean),
  emit: (event: 'update:modelValue', value: boolean) => void
 ) {
  return useWidgetValue({
--- a/src/composables/node/useNodeBadge.ts
+++ b/src/composables/node/useNodeBadge.ts
@@ -2,6 +2,7 @@ import _ from 'es-toolkit/compat'
 import { computed, onMounted, watch } from 'vue'

 import { useNodePricing } from '@/composables/node/useNodePricing'
+import { usePriceBadge } from '@/composables/node/usePriceBadge'
 import { useComputedWithWidgetWatch } from '@/composables/node/useWatchWidget'
 import { BadgePosition, LGraphBadge } from '@/lib/litegraph/src/litegraph'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
@@ -12,7 +13,6 @@ import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { NodeBadgeMode } from '@/types/nodeSource'
-import { adjustColor } from '@/utils/colorUtil'

 /**
 * Add LGraphBadge to LGraphNode based on settings.
@@ -27,6 +27,7 @@ export const useNodeBadge = () => {
  const settingStore = useSettingStore()
  const extensionStore = useExtensionStore()
  const colorPaletteStore = useColorPaletteStore()
+  const priceBadge = usePriceBadge()

  const nodeSourceBadgeMode = computed(
    () =>
@@ -118,29 +119,7 @@ export const useNodeBadge = () => {
          let creditsBadge
          const createBadge = () => {
            const price = nodePricing.getNodeDisplayPrice(node)
-
-            const isLightTheme =
-              colorPaletteStore.completedActivePalette.light_theme
-            return new LGraphBadge({
-              text: price,
-              iconOptions: {
-                unicode: '\ue96b',
-                fontFamily: 'PrimeIcons',
-                color: isLightTheme
-                  ? adjustColor('#FABC25', { lightness: 0.5 })
-                  : '#FABC25',
-                bgColor: isLightTheme
-                  ? adjustColor('#654020', { lightness: 0.5 })
-                  : '#654020',
-                fontSize: 8
-              },
-              fgColor:
-                colorPaletteStore.completedActivePalette.colors.litegraph_base
-                  .BADGE_FG_COLOR,
-              bgColor: isLightTheme
-                ? adjustColor('#8D6932', { lightness: 0.5 })
-                : '#8D6932'
-            })
+            return priceBadge.getCreditsBadge(price)
          }

          if (hasDynamicPricing) {
@@ -162,6 +141,23 @@ export const useNodeBadge = () => {

          node.badges.push(() => creditsBadge.value)
        }
+      },
+      init() {
+        app.canvas.canvas.addEventListener<'litegraph:set-graph'>(
+          'litegraph:set-graph',
+          () => {
+            for (const node of app.canvas.graph?.nodes ?? [])
+              priceBadge.updateSubgraphCredits(node)
+          }
+        )
+        app.canvas.canvas.addEventListener<'subgraph-converted'>(
+          'subgraph-converted',
+          (e) => priceBadge.updateSubgraphCredits(e.detail.subgraphNode)
+        )
+      },
+      afterConfigureGraph() {
+        for (const node of app.canvas.graph?.nodes ?? [])
+          priceBadge.updateSubgraphCredits(node)
      }
    })
  })
--- a/src/composables/node/useNodeImageUpload.ts
+++ b/src/composables/node/useNodeImageUpload.ts
@@ -5,6 +5,7 @@ import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import type { ResultItemType } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
+import { useAssetsStore } from '@/stores/assetsStore'

 const PASTED_IMAGE_EXPIRY_MS = 2000

@@ -37,6 +38,13 @@ const uploadFile = async (
  }

  const data = await resp.json()
+
+  // Update AssetsStore input assets when files are uploaded to input folder
+  if (formFields.type === 'input' || (!formFields.type && !isPasted)) {
+    const assetsStore = useAssetsStore()
+    await assetsStore.updateInputs()
+  }
+
  return data.subfolder ? `${data.subfolder}/${data.name}` : data.name
 }

--- a/src/composables/node/usePriceBadge.ts
+++ b/src/composables/node/usePriceBadge.ts
@@ -0,0 +1,69 @@
+import type { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { LGraphBadge } from '@/lib/litegraph/src/litegraph'
+
+import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
+import { adjustColor } from '@/utils/colorUtil'
+
+export const usePriceBadge = () => {
+  function updateSubgraphCredits(node: LGraphNode) {
+    if (!node.isSubgraphNode()) return
+    node.badges = node.badges.filter((b) => !isCreditsBadge(b))
+    const newBadges = collectCreditsBadges(node.subgraph)
+    if (newBadges.length > 1) {
+      node.badges.push(getCreditsBadge('Partner Nodes x ' + newBadges.length))
+    } else {
+      node.badges.push(...newBadges)
+    }
+  }
+  function collectCreditsBadges(
+    graph: LGraph,
+    visited: Set<string> = new Set()
+  ): (LGraphBadge | (() => LGraphBadge))[] {
+    if (visited.has(graph.id)) return []
+    visited.add(graph.id)
+    const badges = []
+    for (const node of graph.nodes) {
+      badges.push(
+        ...(node.isSubgraphNode()
+          ? collectCreditsBadges(node.subgraph, visited)
+          : node.badges.filter((b) => isCreditsBadge(b)))
+      )
+    }
+    return badges
+  }
+
+  function isCreditsBadge(badge: LGraphBadge | (() => LGraphBadge)): boolean {
+    return (
+      (typeof badge === 'function' ? badge() : badge).icon?.unicode === '\ue96b'
+    )
+  }
+
+  const colorPaletteStore = useColorPaletteStore()
+  function getCreditsBadge(price: string): LGraphBadge {
+    const isLightTheme = colorPaletteStore.completedActivePalette.light_theme
+    return new LGraphBadge({
+      text: price,
+      iconOptions: {
+        unicode: '\ue96b',
+        fontFamily: 'PrimeIcons',
+        color: isLightTheme
+          ? adjustColor('#FABC25', { lightness: 0.5 })
+          : '#FABC25',
+        bgColor: isLightTheme
+          ? adjustColor('#654020', { lightness: 0.5 })
+          : '#654020',
+        fontSize: 8
+      },
+      fgColor:
+        colorPaletteStore.completedActivePalette.colors.litegraph_base
+          .BADGE_FG_COLOR,
+      bgColor: isLightTheme
+        ? adjustColor('#8D6932', { lightness: 0.5 })
+        : '#8D6932'
+    })
+  }
+  return {
+    getCreditsBadge,
+    updateSubgraphCredits
+  }
+}
--- a/src/composables/sidebarTabs/useAssetsSidebarTab.ts
+++ b/src/composables/sidebarTabs/useAssetsSidebarTab.ts
@@ -0,0 +1,16 @@
+import { markRaw } from 'vue'
+
+import AssetsSidebarTab from '@/components/sidebar/tabs/AssetsSidebarTab.vue'
+import type { SidebarTabExtension } from '@/types/extensionTypes'
+
+export const useAssetsSidebarTab = (): SidebarTabExtension => {
+  return {
+    id: 'assets',
+    icon: 'icon-[comfy--image-ai-edit]',
+    title: 'sideToolbar.assets',
+    tooltip: 'sideToolbar.assets',
+    label: 'sideToolbar.labels.assets',
+    component: markRaw(AssetsSidebarTab),
+    type: 'vue'
+  }
+}
--- a/src/composables/useContextMenuTranslation.ts
+++ b/src/composables/useContextMenuTranslation.ts
@@ -1,4 +1,5 @@
 import { st, te } from '@/i18n'
+import { legacyMenuCompat } from '@/lib/litegraph/src/contextMenuCompat'
 import type {
  IContextMenuOptions,
  IContextMenuValue,
@@ -6,18 +7,40 @@ import type {
  IWidget
 } from '@/lib/litegraph/src/litegraph'
 import { LGraphCanvas, LiteGraph } from '@/lib/litegraph/src/litegraph'
+import { app } from '@/scripts/app'
 import { normalizeI18nKey } from '@/utils/formatUtil'

 /**
 * Add translation for litegraph context menu.
 */
 export const useContextMenuTranslation = () => {
-  const f = LGraphCanvas.prototype.getCanvasMenuOptions
+  // Install compatibility layer BEFORE any extensions load
+  legacyMenuCompat.install(LGraphCanvas.prototype, 'getCanvasMenuOptions')
+
+  const { getCanvasMenuOptions } = LGraphCanvas.prototype
  const getCanvasCenterMenuOptions = function (
    this: LGraphCanvas,
-    ...args: Parameters<typeof f>
+    ...args: Parameters<typeof getCanvasMenuOptions>
  ) {
-    const res = f.apply(this, args) as ReturnType<typeof f>
+    const res: IContextMenuValue[] = getCanvasMenuOptions.apply(this, args)
+
+    // Add items from new extension API
+    const newApiItems = app.collectCanvasMenuItems(this)
+    for (const item of newApiItems) {
+      res.push(item)
+    }
+
+    // Add legacy monkey-patched items
+    const legacyItems = legacyMenuCompat.extractLegacyItems(
+      'getCanvasMenuOptions',
+      this,
+      ...args
+    )
+    for (const item of legacyItems) {
+      res.push(item)
+    }
+
+    // Translate all items
    for (const item of res) {
      if (item?.content) {
        item.content = st(`contextMenu.${item.content}`, item.content)
@@ -28,6 +51,33 @@ export const useContextMenuTranslation = () => {

  LGraphCanvas.prototype.getCanvasMenuOptions = getCanvasCenterMenuOptions

+  legacyMenuCompat.registerWrapper(
+    'getCanvasMenuOptions',
+    getCanvasCenterMenuOptions,
+    getCanvasMenuOptions,
+    LGraphCanvas.prototype
+  )
+
+  // Wrap getNodeMenuOptions to add new API items
+  const nodeMenuFn = LGraphCanvas.prototype.getNodeMenuOptions
+  const getNodeMenuOptionsWithExtensions = function (
+    this: LGraphCanvas,
+    ...args: Parameters<typeof nodeMenuFn>
+  ) {
+    const res = nodeMenuFn.apply(this, args)
+
+    // Add items from new extension API
+    const node = args[0]
+    const newApiItems = app.collectNodeMenuItems(node)
+    for (const item of newApiItems) {
+      res.push(item)
+    }
+
+    return res
+  }
+
+  LGraphCanvas.prototype.getNodeMenuOptions = getNodeMenuOptionsWithExtensions
+
  function translateMenus(
    values: readonly (IContextMenuValue | string | null)[] | undefined,
    options: IContextMenuOptions
--- a/src/composables/useCoreCommands.ts
+++ b/src/composables/useCoreCommands.ts
@@ -5,10 +5,7 @@ import {
  DEFAULT_DARK_COLOR_PALETTE,
  DEFAULT_LIGHT_COLOR_PALETTE
 } from '@/constants/coreColorPalettes'
-import {
-  promoteRecommendedWidgets,
-  tryToggleWidgetPromotion
-} from '@/core/graph/subgraph/proxyWidgetUtils'
+import { tryToggleWidgetPromotion } from '@/core/graph/subgraph/proxyWidgetUtils'
 import { showSubgraphNodeDialog } from '@/core/graph/subgraph/useSubgraphNodeDialog'
 import { t } from '@/i18n'
 import {
@@ -21,10 +18,11 @@ import {
 import type { Point } from '@/lib/litegraph/src/litegraph'
 import { useAssetBrowserDialog } from '@/platform/assets/composables/useAssetBrowserDialog'
 import { createModelNodeFromAsset } from '@/platform/assets/utils/createModelNodeFromAsset'
-import { isCloud } from '@/platform/distribution/types'
+import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { SUPPORT_URL } from '@/platform/support/config'
 import { useTelemetry } from '@/platform/telemetry'
+import type { ExecutionTriggerSource } from '@/platform/telemetry/types'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
@@ -63,6 +61,8 @@ import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTyp

 import { useWorkflowTemplateSelectorDialog } from './useWorkflowTemplateSelectorDialog'

+const { isActiveSubscription, showSubscriptionDialog } = useSubscription()
+
 const moveSelectedNodesVersionAdded = '1.22.2'

 export function useCoreCommands(): ComfyCommand[] {
@@ -74,6 +74,7 @@ export function useCoreCommands(): ComfyCommand[] {
  const toastStore = useToastStore()
  const canvasStore = useCanvasStore()
  const executionStore = useExecutionStore()
+  const telemetry = useTelemetry()

  const bottomPanelStore = useBottomPanelStore()

@@ -102,7 +103,14 @@ export function useCoreCommands(): ComfyCommand[] {
      label: 'New Blank Workflow',
      menubarLabel: 'New',
      category: 'essentials' as const,
-      function: () => workflowService.loadBlankWorkflow()
+      function: async () => {
+        const previousWorkflowHadNodes = app.graph._nodes.length > 0
+        await workflowService.loadBlankWorkflow()
+        telemetry?.trackWorkflowCreated({
+          workflow_type: 'blank',
+          previous_workflow_had_nodes: previousWorkflowHadNodes
+        })
+      }
    },
    {
      id: 'Comfy.OpenWorkflow',
@@ -118,7 +126,14 @@ export function useCoreCommands(): ComfyCommand[] {
      id: 'Comfy.LoadDefaultWorkflow',
      icon: 'pi pi-code',
      label: 'Load Default Workflow',
-      function: () => workflowService.loadDefaultWorkflow()
+      function: async () => {
+        const previousWorkflowHadNodes = app.graph._nodes.length > 0
+        await workflowService.loadDefaultWorkflow()
+        telemetry?.trackWorkflowCreated({
+          workflow_type: 'default',
+          previous_workflow_had_nodes: previousWorkflowHadNodes
+        })
+      }
    },
    {
      id: 'Comfy.SaveWorkflow',
@@ -452,12 +467,19 @@ export function useCoreCommands(): ComfyCommand[] {
      label: 'Queue Prompt',
      versionAdded: '1.3.7',
      category: 'essentials' as const,
-      function: async () => {
+      function: async (metadata?: {
+        subscribe_to_run?: boolean
+        trigger_source?: ExecutionTriggerSource
+      }) => {
+        useTelemetry()?.trackRunButton(metadata)
+        if (!isActiveSubscription.value) {
+          showSubscriptionDialog()
+          return
+        }
+
        const batchCount = useQueueSettingsStore().batchCount

-        if (isCloud) {
-          useTelemetry()?.trackWorkflowExecution()
-        }
+        useTelemetry()?.trackWorkflowExecution()

        await app.queuePrompt(0, batchCount)
      }
@@ -468,12 +490,19 @@ export function useCoreCommands(): ComfyCommand[] {
      label: 'Queue Prompt (Front)',
      versionAdded: '1.3.7',
      category: 'essentials' as const,
-      function: async () => {
+      function: async (metadata?: {
+        subscribe_to_run?: boolean
+        trigger_source?: ExecutionTriggerSource
+      }) => {
+        useTelemetry()?.trackRunButton(metadata)
+        if (!isActiveSubscription.value) {
+          showSubscriptionDialog()
+          return
+        }
+
        const batchCount = useQueueSettingsStore().batchCount

-        if (isCloud) {
-          useTelemetry()?.trackWorkflowExecution()
-        }
+        useTelemetry()?.trackWorkflowExecution()

        await app.queuePrompt(-1, batchCount)
      }
@@ -483,7 +512,16 @@ export function useCoreCommands(): ComfyCommand[] {
      icon: 'pi pi-play',
      label: 'Queue Selected Output Nodes',
      versionAdded: '1.19.6',
-      function: async () => {
+      function: async (metadata?: {
+        subscribe_to_run?: boolean
+        trigger_source?: ExecutionTriggerSource
+      }) => {
+        useTelemetry()?.trackRunButton(metadata)
+        if (!isActiveSubscription.value) {
+          showSubscriptionDialog()
+          return
+        }
+
        const batchCount = useQueueSettingsStore().batchCount
        const selectedNodes = getSelectedNodes()
        const selectedOutputNodes = filterOutputNodes(selectedNodes)
@@ -501,6 +539,17 @@ export function useCoreCommands(): ComfyCommand[] {
        // Get execution IDs for all selected output nodes and their descendants
        const executionIds =
          getExecutionIdsForSelectedNodes(selectedOutputNodes)
+
+        if (executionIds.length === 0) {
+          toastStore.add({
+            severity: 'error',
+            summary: t('toastMessages.failedToQueue'),
+            detail: t('toastMessages.failedExecutionPathResolution'),
+            life: 3000
+          })
+          return
+        }
+        useTelemetry()?.trackWorkflowExecution()
        await app.queuePrompt(0, batchCount, executionIds)
      }
    },
@@ -706,6 +755,11 @@ export function useCoreCommands(): ComfyCommand[] {
      menubarLabel: 'ComfyUI Issues',
      versionAdded: '1.5.5',
      function: () => {
+        telemetry?.trackHelpResourceClicked({
+          resource_type: 'github',
+          is_external: true,
+          source: 'menu'
+        })
        window.open(
          'https://github.com/comfyanonymous/ComfyUI/issues',
          '_blank'
@@ -719,6 +773,11 @@ export function useCoreCommands(): ComfyCommand[] {
      menubarLabel: 'ComfyUI Docs',
      versionAdded: '1.5.5',
      function: () => {
+        telemetry?.trackHelpResourceClicked({
+          resource_type: 'docs',
+          is_external: true,
+          source: 'menu'
+        })
        window.open('https://docs.comfy.org/', '_blank')
      }
    },
@@ -729,6 +788,11 @@ export function useCoreCommands(): ComfyCommand[] {
      menubarLabel: 'Comfy-Org Discord',
      versionAdded: '1.5.5',
      function: () => {
+        telemetry?.trackHelpResourceClicked({
+          resource_type: 'discord',
+          is_external: true,
+          source: 'menu'
+        })
        window.open('https://www.comfy.org/discord', '_blank')
      }
    },
@@ -786,6 +850,11 @@ export function useCoreCommands(): ComfyCommand[] {
      menubarLabel: 'ComfyUI Forum',
      versionAdded: '1.8.2',
      function: () => {
+        telemetry?.trackHelpResourceClicked({
+          resource_type: 'help_feedback',
+          is_external: true,
+          source: 'menu'
+        })
        window.open('https://forum.comfy.org/', '_blank')
      }
    },
@@ -927,7 +996,6 @@ export function useCoreCommands(): ComfyCommand[] {

        const { node } = res
        canvas.select(node)
-        promoteRecommendedWidgets(node)
        canvasStore.updateSelectedItems()
      }
    },
--- a/src/composables/useLoad3d.ts
+++ b/src/composables/useLoad3d.ts
@@ -0,0 +1,536 @@
+import { toRef } from '@vueuse/core'
+import type { MaybeRef } from '@vueuse/core'
+import { nextTick, ref, toRaw, watch } from 'vue'
+
+import Load3d from '@/extensions/core/load3d/Load3d'
+import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
+import type {
+  AnimationItem,
+  CameraConfig,
+  CameraType,
+  LightConfig,
+  MaterialMode,
+  ModelConfig,
+  SceneConfig,
+  UpDirection
+} from '@/extensions/core/load3d/interfaces'
+import { t } from '@/i18n'
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import { useToastStore } from '@/platform/updates/common/toastStore'
+import { api } from '@/scripts/api'
+import { useLoad3dService } from '@/services/load3dService'
+
+type Load3dReadyCallback = (load3d: Load3d) => void
+export const nodeToLoad3dMap = new Map<LGraphNode, Load3d>()
+const pendingCallbacks = new Map<LGraphNode, Load3dReadyCallback[]>()
+
+export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
+  const nodeRef = toRef(nodeOrRef)
+  let load3d: Load3d | null = null
+
+  const sceneConfig = ref<SceneConfig>({
+    showGrid: true,
+    backgroundColor: '#000000',
+    backgroundImage: ''
+  })
+
+  const modelConfig = ref<ModelConfig>({
+    upDirection: 'original',
+    materialMode: 'original'
+  })
+
+  const cameraConfig = ref<CameraConfig>({
+    cameraType: 'perspective',
+    fov: 75
+  })
+
+  const lightConfig = ref<LightConfig>({
+    intensity: 5
+  })
+
+  const isRecording = ref(false)
+  const hasRecording = ref(false)
+  const recordingDuration = ref(0)
+
+  const animations = ref<AnimationItem[]>([])
+  const playing = ref(false)
+  const selectedSpeed = ref(1)
+  const selectedAnimation = ref(0)
+  const loading = ref(false)
+  const loadingMessage = ref('')
+  const isPreview = ref(false)
+
+  const initializeLoad3d = async (containerRef: HTMLElement) => {
+    const rawNode = toRaw(nodeRef.value)
+    if (!containerRef || !rawNode) return
+
+    const node = rawNode as LGraphNode
+
+    try {
+      load3d = new Load3d(containerRef, {
+        node
+      })
+
+      const widthWidget = node.widgets?.find((w) => w.name === 'width')
+      const heightWidget = node.widgets?.find((w) => w.name === 'height')
+
+      if (!(widthWidget && heightWidget)) {
+        isPreview.value = true
+      }
+
+      await restoreConfigurationsFromNode(node)
+
+      node.onMouseEnter = function () {
+        load3d?.refreshViewport()
+
+        load3d?.updateStatusMouseOnNode(true)
+      }
+
+      node.onMouseLeave = function () {
+        load3d?.updateStatusMouseOnNode(false)
+      }
+
+      node.onResize = function () {
+        load3d?.handleResize()
+      }
+
+      node.onDrawBackground = function () {
+        if (load3d) {
+          load3d.renderer.domElement.hidden = this.flags.collapsed ?? false
+        }
+      }
+
+      node.onRemoved = function () {
+        useLoad3dService().removeLoad3d(node)
+        pendingCallbacks.delete(node)
+      }
+
+      nodeToLoad3dMap.set(node, load3d)
+
+      const callbacks = pendingCallbacks.get(node)
+
+      if (callbacks && load3d) {
+        callbacks.forEach((callback) => {
+          if (load3d) {
+            callback(load3d)
+          }
+        })
+        pendingCallbacks.delete(node)
+      }
+
+      handleEvents('add')
+    } catch (error) {
+      console.error('Error initializing Load3d:', error)
+      useToastStore().addAlert(t('toastMessages.failedToInitializeLoad3d'))
+    }
+  }
+
+  const restoreConfigurationsFromNode = async (node: LGraphNode) => {
+    if (!load3d) return
+
+    // Restore configs - watchers will handle applying them to the Three.js scene
+    const savedSceneConfig = node.properties['Scene Config'] as SceneConfig
+    if (savedSceneConfig) {
+      sceneConfig.value = savedSceneConfig
+    }
+
+    const savedModelConfig = node.properties['Model Config'] as ModelConfig
+    if (savedModelConfig) {
+      modelConfig.value = savedModelConfig
+    }
+
+    const savedCameraConfig = node.properties['Camera Config'] as CameraConfig
+    const cameraStateToRestore = savedCameraConfig?.state
+
+    if (savedCameraConfig) {
+      cameraConfig.value = savedCameraConfig
+    }
+
+    const savedLightConfig = node.properties['Light Config'] as LightConfig
+    if (savedLightConfig) {
+      lightConfig.value = savedLightConfig
+    }
+
+    const modelWidget = node.widgets?.find((w) => w.name === 'model_file')
+    if (modelWidget?.value) {
+      const modelUrl = getModelUrl(modelWidget.value as string)
+      if (modelUrl) {
+        loading.value = true
+        loadingMessage.value = t('load3d.reloadingModel')
+        try {
+          await load3d.loadModel(modelUrl)
+
+          if (cameraStateToRestore) {
+            await nextTick()
+            load3d.setCameraState(cameraStateToRestore)
+          }
+        } catch (error) {
+          console.error('Failed to reload model:', error)
+          useToastStore().addAlert(t('toastMessages.failedToLoadModel'))
+        } finally {
+          loading.value = false
+          loadingMessage.value = ''
+        }
+      }
+    } else if (cameraStateToRestore) {
+      load3d.setCameraState(cameraStateToRestore)
+    }
+  }
+
+  const getModelUrl = (modelPath: string): string | null => {
+    if (!modelPath) return null
+
+    try {
+      if (modelPath.startsWith('http')) {
+        return modelPath
+      }
+
+      const [subfolder, filename] = Load3dUtils.splitFilePath(modelPath)
+      return api.apiURL(
+        Load3dUtils.getResourceURL(
+          subfolder,
+          filename,
+          isPreview.value ? 'output' : 'input'
+        )
+      )
+    } catch (error) {
+      console.error('Failed to construct model URL:', error)
+      return null
+    }
+  }
+
+  const waitForLoad3d = (callback: Load3dReadyCallback) => {
+    const rawNode = toRaw(nodeRef.value)
+    if (!rawNode) return
+
+    const node = rawNode as LGraphNode
+    const existingInstance = nodeToLoad3dMap.get(node)
+
+    if (existingInstance) {
+      callback(existingInstance)
+
+      return
+    }
+
+    if (!pendingCallbacks.has(node)) {
+      pendingCallbacks.set(node, [])
+    }
+
+    pendingCallbacks.get(node)!.push(callback)
+  }
+
+  watch(
+    sceneConfig,
+    (newValue) => {
+      if (load3d && nodeRef.value) {
+        nodeRef.value.properties['Scene Config'] = newValue
+        load3d.toggleGrid(newValue.showGrid)
+        load3d.setBackgroundColor(newValue.backgroundColor)
+        void load3d.setBackgroundImage(newValue.backgroundImage || '')
+      }
+    },
+    { deep: true }
+  )
+
+  watch(
+    modelConfig,
+    (newValue) => {
+      if (load3d && nodeRef.value) {
+        nodeRef.value.properties['Model Config'] = newValue
+        load3d.setUpDirection(newValue.upDirection)
+        load3d.setMaterialMode(newValue.materialMode)
+      }
+    },
+    { deep: true }
+  )
+
+  watch(
+    cameraConfig,
+    (newValue) => {
+      if (load3d && nodeRef.value) {
+        nodeRef.value.properties['Camera Config'] = newValue
+        load3d.toggleCamera(newValue.cameraType)
+        load3d.setFOV(newValue.fov)
+      }
+    },
+    { deep: true }
+  )
+
+  watch(
+    lightConfig,
+    (newValue) => {
+      if (load3d && nodeRef.value) {
+        nodeRef.value.properties['Light Config'] = newValue
+        load3d.setLightIntensity(newValue.intensity)
+      }
+    },
+    { deep: true }
+  )
+
+  watch(playing, (newValue) => {
+    if (load3d) {
+      load3d.toggleAnimation(newValue)
+    }
+  })
+
+  watch(selectedSpeed, (newValue) => {
+    if (load3d && newValue) {
+      load3d.setAnimationSpeed(newValue)
+    }
+  })
+
+  watch(selectedAnimation, (newValue) => {
+    if (load3d && newValue !== undefined) {
+      load3d.updateSelectedAnimation(newValue)
+    }
+  })
+
+  const handleMouseEnter = () => {
+    load3d?.updateStatusMouseOnScene(true)
+  }
+
+  const handleMouseLeave = () => {
+    load3d?.updateStatusMouseOnScene(false)
+  }
+
+  const handleStartRecording = async () => {
+    if (load3d) {
+      await load3d.startRecording()
+      isRecording.value = true
+    }
+  }
+
+  const handleStopRecording = () => {
+    if (load3d) {
+      load3d.stopRecording()
+      isRecording.value = false
+      recordingDuration.value = load3d.getRecordingDuration()
+      hasRecording.value = recordingDuration.value > 0
+    }
+  }
+
+  const handleExportRecording = () => {
+    if (load3d) {
+      const timestamp = new Date().toISOString().replace(/[:.]/g, '-')
+      const filename = `${timestamp}-scene-recording.mp4`
+      load3d.exportRecording(filename)
+    }
+  }
+
+  const handleClearRecording = () => {
+    if (load3d) {
+      load3d.clearRecording()
+      hasRecording.value = false
+      recordingDuration.value = 0
+    }
+  }
+
+  const handleBackgroundImageUpdate = async (file: File | null) => {
+    if (!file) {
+      sceneConfig.value.backgroundImage = ''
+      await load3d?.setBackgroundImage('')
+      return
+    }
+
+    const resourceFolder =
+      (nodeRef.value?.properties['Resource Folder'] as string) || ''
+
+    const subfolder = resourceFolder.trim()
+      ? `3d/${resourceFolder.trim()}`
+      : '3d'
+
+    const uploadedPath = await Load3dUtils.uploadFile(file, subfolder)
+    sceneConfig.value.backgroundImage = uploadedPath
+    await load3d?.setBackgroundImage(uploadedPath)
+  }
+
+  const handleExportModel = async (format: string) => {
+    if (!load3d) {
+      useToastStore().addAlert(t('toastMessages.no3dSceneToExport'))
+      return
+    }
+
+    try {
+      await load3d.exportModel(format)
+    } catch (error) {
+      console.error('Error exporting model:', error)
+      useToastStore().addAlert(
+        t('toastMessages.failedToExportModel', {
+          format: format.toUpperCase()
+        })
+      )
+    }
+  }
+
+  const handleModelDrop = async (file: File) => {
+    if (!load3d) {
+      useToastStore().addAlert(t('toastMessages.no3dScene'))
+      return
+    }
+
+    const node = toRaw(nodeRef.value)
+    if (!node) return
+
+    try {
+      const resourceFolder =
+        (node.properties['Resource Folder'] as string) || ''
+
+      const subfolder = resourceFolder.trim()
+        ? `3d/${resourceFolder.trim()}`
+        : '3d'
+
+      loading.value = true
+      loadingMessage.value = t('load3d.uploadingModel')
+
+      const uploadedPath = await Load3dUtils.uploadFile(file, subfolder)
+
+      if (!uploadedPath) {
+        useToastStore().addAlert(t('toastMessages.fileUploadFailed'))
+        return
+      }
+
+      const modelUrl = api.apiURL(
+        Load3dUtils.getResourceURL(
+          ...Load3dUtils.splitFilePath(uploadedPath),
+          isPreview.value ? 'output' : 'input'
+        )
+      )
+
+      loadingMessage.value = t('load3d.loadingModel')
+      await load3d.loadModel(modelUrl)
+
+      const modelWidget = node.widgets?.find((w) => w.name === 'model_file')
+
+      if (modelWidget) {
+        const options = modelWidget.options as { values?: string[] } | undefined
+        if (options?.values && !options.values.includes(uploadedPath)) {
+          options.values.push(uploadedPath)
+        }
+        modelWidget.value = uploadedPath
+      }
+    } catch (error) {
+      console.error('Model drop failed:', error)
+      useToastStore().addAlert(t('toastMessages.failedToLoadModel'))
+    } finally {
+      loading.value = false
+      loadingMessage.value = ''
+    }
+  }
+
+  const eventConfig = {
+    materialModeChange: (value: string) => {
+      modelConfig.value.materialMode = value as MaterialMode
+    },
+    backgroundColorChange: (value: string) => {
+      sceneConfig.value.backgroundColor = value
+    },
+    lightIntensityChange: (value: number) => {
+      lightConfig.value.intensity = value
+    },
+    fovChange: (value: number) => {
+      cameraConfig.value.fov = value
+    },
+    cameraTypeChange: (value: string) => {
+      cameraConfig.value.cameraType = value as CameraType
+    },
+    showGridChange: (value: boolean) => {
+      sceneConfig.value.showGrid = value
+    },
+    upDirectionChange: (value: string) => {
+      modelConfig.value.upDirection = value as UpDirection
+    },
+    backgroundImageChange: (value: string) => {
+      sceneConfig.value.backgroundImage = value
+    },
+    backgroundImageLoadingStart: () => {
+      loadingMessage.value = t('load3d.loadingBackgroundImage')
+      loading.value = true
+    },
+    backgroundImageLoadingEnd: () => {
+      loadingMessage.value = ''
+      loading.value = false
+    },
+    modelLoadingStart: () => {
+      loadingMessage.value = t('load3d.loadingModel')
+      loading.value = true
+    },
+    modelLoadingEnd: () => {
+      loadingMessage.value = ''
+      loading.value = false
+    },
+    exportLoadingStart: (message: string) => {
+      loadingMessage.value = message || t('load3d.exportingModel')
+      loading.value = true
+    },
+    exportLoadingEnd: () => {
+      loadingMessage.value = ''
+      loading.value = false
+    },
+    recordingStatusChange: (value: boolean) => {
+      isRecording.value = value
+
+      if (!value && load3d) {
+        recordingDuration.value = load3d.getRecordingDuration()
+        hasRecording.value = recordingDuration.value > 0
+      }
+    },
+    animationListChange: (newValue: any) => {
+      animations.value = newValue
+    }
+  } as const
+
+  const handleEvents = (action: 'add' | 'remove') => {
+    Object.entries(eventConfig).forEach(([event, handler]) => {
+      const method = `${action}EventListener` as const
+      load3d?.[method](event, handler)
+    })
+  }
+
+  const cleanup = () => {
+    handleEvents('remove')
+
+    const rawNode = toRaw(nodeRef.value)
+    if (!rawNode) return
+
+    const node = rawNode as LGraphNode
+    if (nodeToLoad3dMap.get(node) === load3d) {
+      nodeToLoad3dMap.delete(node)
+    }
+
+    load3d?.remove()
+    load3d = null
+  }
+
+  return {
+    // state
+    load3d,
+    sceneConfig,
+    modelConfig,
+    cameraConfig,
+    lightConfig,
+    isRecording,
+    isPreview,
+    hasRecording,
+    recordingDuration,
+    animations,
+    playing,
+    selectedSpeed,
+    selectedAnimation,
+    loading,
+    loadingMessage,
+
+    // Methods
+    initializeLoad3d,
+    waitForLoad3d,
+    handleMouseEnter,
+    handleMouseLeave,
+    handleStartRecording,
+    handleStopRecording,
+    handleExportRecording,
+    handleClearRecording,
+    handleBackgroundImageUpdate,
+    handleExportModel,
+    handleModelDrop,
+    cleanup
+  }
+}
--- a/src/composables/useLoad3dDrag.ts
+++ b/src/composables/useLoad3dDrag.ts
@@ -0,0 +1,70 @@
+import { computed, ref, toValue } from 'vue'
+import type { MaybeRefOrGetter } from 'vue'
+
+import { SUPPORTED_EXTENSIONS } from '@/extensions/core/load3d/interfaces'
+import { t } from '@/i18n'
+import { useToastStore } from '@/platform/updates/common/toastStore'
+
+interface UseLoad3dDragOptions {
+  onModelDrop: (file: File) => void | Promise<void>
+  disabled?: MaybeRefOrGetter<boolean>
+}
+
+export function useLoad3dDrag(options: UseLoad3dDragOptions) {
+  const isDragging = ref(false)
+  const dragMessage = ref('')
+
+  const isDisabled = computed(() => toValue(options.disabled) ?? false)
+
+  function isValidModelFile(file: File): boolean {
+    const fileName = file.name.toLowerCase()
+    const extension = fileName.substring(fileName.lastIndexOf('.'))
+    return SUPPORTED_EXTENSIONS.has(extension)
+  }
+
+  function handleDragOver(event: DragEvent) {
+    if (isDisabled.value) return
+
+    if (!event.dataTransfer) return
+
+    const hasFiles = event.dataTransfer.types.includes('Files')
+
+    if (!hasFiles) return
+
+    isDragging.value = true
+    event.dataTransfer.dropEffect = 'copy'
+    dragMessage.value = t('load3d.dropToLoad')
+  }
+
+  function handleDragLeave() {
+    isDragging.value = false
+  }
+
+  async function handleDrop(event: DragEvent) {
+    isDragging.value = false
+
+    if (isDisabled.value) return
+
+    if (!event.dataTransfer) return
+
+    const files = Array.from(event.dataTransfer.files)
+
+    if (files.length === 0) return
+
+    const modelFile = files.find(isValidModelFile)
+
+    if (modelFile) {
+      await options.onModelDrop(modelFile)
+    } else {
+      useToastStore().addAlert(t('load3d.unsupportedFileType'))
+    }
+  }
+
+  return {
+    isDragging,
+    dragMessage,
+    handleDragOver,
+    handleDragLeave,
+    handleDrop
+  }
+}
--- a/src/composables/useLoad3dViewer.ts
+++ b/src/composables/useLoad3dViewer.ts
@@ -10,6 +10,7 @@ import type {
 import { t } from '@/i18n'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { useToastStore } from '@/platform/updates/common/toastStore'
+import { api } from '@/scripts/api'
 import { useLoad3dService } from '@/services/load3dService'

 interface Load3dViewerState {
@@ -22,7 +23,6 @@ interface Load3dViewerState {
  backgroundImage: string
  upDirection: UpDirection
  materialMode: MaterialMode
-  edgeThreshold: number
 }

 export const useLoad3dViewer = (node: LGraphNode) => {
@@ -35,8 +35,8 @@ export const useLoad3dViewer = (node: LGraphNode) => {
  const hasBackgroundImage = ref(false)
  const upDirection = ref<UpDirection>('original')
  const materialMode = ref<MaterialMode>('original')
-  const edgeThreshold = ref(85)
  const needApplyChanges = ref(true)
+  const isPreview = ref(false)

  let load3d: Load3d | null = null
  let sourceLoad3d: Load3d | null = null
@@ -50,8 +50,7 @@ export const useLoad3dViewer = (node: LGraphNode) => {
    cameraState: null,
    backgroundImage: '',
    upDirection: 'original',
-    materialMode: 'original',
-    edgeThreshold: 85
+    materialMode: 'original'
  })

  watch(backgroundColor, (newColor) => {
@@ -149,18 +148,6 @@ export const useLoad3dViewer = (node: LGraphNode) => {
    }
  })

-  watch(edgeThreshold, (newValue) => {
-    if (!load3d) return
-    try {
-      load3d.setEdgeThreshold(Number(newValue))
-    } catch (error) {
-      console.error('Error updating edge threshold:', error)
-      useToastStore().addAlert(
-        t('toastMessages.failedToUpdateEdgeThreshold', { threshold: newValue })
-      )
-    }
-  })
-
  const initializeViewer = async (
    containerRef: HTMLElement,
    source: Load3d
@@ -178,34 +165,52 @@ export const useLoad3dViewer = (node: LGraphNode) => {

      await useLoad3dService().copyLoad3dState(source, load3d)

-      const sourceCameraType = source.getCurrentCameraType()
      const sourceCameraState = source.getCameraState()

-      cameraType.value = sourceCameraType
-      backgroundColor.value = source.sceneManager.currentBackgroundColor
-      showGrid.value = source.sceneManager.gridHelper.visible
-      lightIntensity.value = (node.properties['Light Intensity'] as number) || 1
+      const sceneConfig = node.properties['Scene Config'] as any
+      const modelConfig = node.properties['Model Config'] as any
+      const cameraConfig = node.properties['Camera Config'] as any
+      const lightConfig = node.properties['Light Config'] as any

-      const backgroundInfo = source.sceneManager.getCurrentBackgroundInfo()
-      if (
-        backgroundInfo.type === 'image' &&
-        node.properties['Background Image']
-      ) {
-        backgroundImage.value = node.properties['Background Image'] as string
-        hasBackgroundImage.value = true
+      isPreview.value = node.type === 'Preview3D'
+
+      if (sceneConfig) {
+        backgroundColor.value =
+          sceneConfig.backgroundColor ||
+          source.sceneManager.currentBackgroundColor
+        showGrid.value =
+          sceneConfig.showGrid ?? source.sceneManager.gridHelper.visible
+
+        const backgroundInfo = source.sceneManager.getCurrentBackgroundInfo()
+        if (backgroundInfo.type === 'image' && sceneConfig.backgroundImage) {
+          backgroundImage.value = sceneConfig.backgroundImage
+          hasBackgroundImage.value = true
+        } else {
+          backgroundImage.value = ''
+          hasBackgroundImage.value = false
+        }
+      }
+
+      if (cameraConfig) {
+        cameraType.value =
+          cameraConfig.cameraType || source.getCurrentCameraType()
+        fov.value =
+          cameraConfig.fov || source.cameraManager.perspectiveCamera.fov
+      }
+
+      if (lightConfig) {
+        lightIntensity.value = lightConfig.intensity || 1
      } else {
-        backgroundImage.value = ''
-        hasBackgroundImage.value = false
+        lightIntensity.value = 1
      }

-      if (sourceCameraType === 'perspective') {
-        fov.value = source.cameraManager.perspectiveCamera.fov
+      if (modelConfig) {
+        upDirection.value =
+          modelConfig.upDirection || source.modelManager.currentUpDirection
+        materialMode.value =
+          modelConfig.materialMode || source.modelManager.materialMode
      }

-      upDirection.value = source.modelManager.currentUpDirection
-      materialMode.value = source.modelManager.materialMode
-      edgeThreshold.value = (node.properties['Edge Threshold'] as number) || 85
-
      initialState.value = {
        backgroundColor: backgroundColor.value,
        showGrid: showGrid.value,
@@ -215,8 +220,7 @@ export const useLoad3dViewer = (node: LGraphNode) => {
        cameraState: sourceCameraState,
        backgroundImage: backgroundImage.value,
        upDirection: upDirection.value,
-        materialMode: materialMode.value,
-        edgeThreshold: edgeThreshold.value
+        materialMode: materialMode.value
      }

      const width = node.widgets?.find((w) => w.name === 'width')
@@ -267,16 +271,31 @@ export const useLoad3dViewer = (node: LGraphNode) => {
    needApplyChanges.value = false

    if (nodeValue.properties) {
-      nodeValue.properties['Background Color'] =
-        initialState.value.backgroundColor
-      nodeValue.properties['Show Grid'] = initialState.value.showGrid
-      nodeValue.properties['Camera Type'] = initialState.value.cameraType
-      nodeValue.properties['FOV'] = initialState.value.fov
-      nodeValue.properties['Light Intensity'] =
-        initialState.value.lightIntensity
-      nodeValue.properties['Camera Info'] = initialState.value.cameraState
-      nodeValue.properties['Background Image'] =
-        initialState.value.backgroundImage
+      nodeValue.properties['Scene Config'] = {
+        showGrid: initialState.value.showGrid,
+        backgroundColor: initialState.value.backgroundColor,
+        backgroundImage: initialState.value.backgroundImage
+      }
+
+      nodeValue.properties['Camera Config'] = {
+        cameraType: initialState.value.cameraType,
+        fov: initialState.value.fov
+      }
+
+      nodeValue.properties['Light Config'] = {
+        intensity: initialState.value.lightIntensity
+      }
+
+      nodeValue.properties['Model Config'] = {
+        upDirection: initialState.value.upDirection,
+        materialMode: initialState.value.materialMode
+      }
+
+      const currentCameraConfig = nodeValue.properties['Camera Config'] as any
+      nodeValue.properties['Camera Config'] = {
+        ...currentCameraConfig,
+        state: initialState.value.cameraState
+      }
    }
  }

@@ -287,20 +306,31 @@ export const useLoad3dViewer = (node: LGraphNode) => {
    const nodeValue = node

    if (nodeValue.properties) {
-      nodeValue.properties['Background Color'] = backgroundColor.value
-      nodeValue.properties['Show Grid'] = showGrid.value
-      nodeValue.properties['Camera Type'] = cameraType.value
-      nodeValue.properties['FOV'] = fov.value
-      nodeValue.properties['Light Intensity'] = lightIntensity.value
-      nodeValue.properties['Camera Info'] = viewerCameraState
-      nodeValue.properties['Background Image'] = backgroundImage.value
+      nodeValue.properties['Scene Config'] = {
+        showGrid: showGrid.value,
+        backgroundColor: backgroundColor.value,
+        backgroundImage: backgroundImage.value
+      }
+
+      nodeValue.properties['Camera Config'] = {
+        cameraType: cameraType.value,
+        fov: fov.value,
+        state: viewerCameraState
+      }
+
+      nodeValue.properties['Light Config'] = {
+        intensity: lightIntensity.value
+      }
+
+      nodeValue.properties['Model Config'] = {
+        upDirection: upDirection.value,
+        materialMode: materialMode.value
+      }
    }

    await useLoad3dService().copyLoad3dState(load3d, sourceLoad3d)

-    if (backgroundImage.value) {
-      await sourceLoad3d.setBackgroundImage(backgroundImage.value)
-    }
+    await sourceLoad3d.setBackgroundImage(backgroundImage.value)

    sourceLoad3d.forceRender()

@@ -341,6 +371,49 @@ export const useLoad3dViewer = (node: LGraphNode) => {
    }
  }

+  const handleModelDrop = async (file: File) => {
+    if (!load3d) {
+      useToastStore().addAlert(t('toastMessages.no3dScene'))
+      return
+    }
+
+    try {
+      const resourceFolder =
+        (node.properties['Resource Folder'] as string) || ''
+      const subfolder = resourceFolder.trim()
+        ? `3d/${resourceFolder.trim()}`
+        : '3d'
+
+      const uploadedPath = await Load3dUtils.uploadFile(file, subfolder)
+
+      if (!uploadedPath) {
+        useToastStore().addAlert(t('toastMessages.fileUploadFailed'))
+        return
+      }
+
+      const modelUrl = api.apiURL(
+        Load3dUtils.getResourceURL(
+          ...Load3dUtils.splitFilePath(uploadedPath),
+          'input'
+        )
+      )
+
+      await load3d.loadModel(modelUrl)
+
+      const modelWidget = node.widgets?.find((w) => w.name === 'model_file')
+      if (modelWidget) {
+        const options = modelWidget.options as { values?: string[] } | undefined
+        if (options?.values && !options.values.includes(uploadedPath)) {
+          options.values.push(uploadedPath)
+        }
+        modelWidget.value = uploadedPath
+      }
+    } catch (error) {
+      console.error('Model drop failed:', error)
+      useToastStore().addAlert(t('toastMessages.failedToLoadModel'))
+    }
+  }
+
  const cleanup = () => {
    load3d?.remove()
    load3d = null
@@ -358,8 +431,8 @@ export const useLoad3dViewer = (node: LGraphNode) => {
    hasBackgroundImage,
    upDirection,
    materialMode,
-    edgeThreshold,
    needApplyChanges,
+    isPreview,

    // Methods
    initializeViewer,
@@ -371,6 +444,7 @@ export const useLoad3dViewer = (node: LGraphNode) => {
    applyChanges,
    refreshViewport,
    handleBackgroundImageUpdate,
+    handleModelDrop,
    cleanup
  }
 }
--- a/src/composables/useTemplateFiltering.ts
+++ b/src/composables/useTemplateFiltering.ts
@@ -1,9 +1,11 @@
 import { refDebounced } from '@vueuse/core'
 import Fuse from 'fuse.js'
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import type { Ref } from 'vue'

+import { useTelemetry } from '@/platform/telemetry'
 import type { TemplateInfo } from '@/platform/workflow/templates/types/template'
+import { debounce } from 'es-toolkit/compat'

 export function useTemplateFiltering(
  templates: Ref<TemplateInfo[]> | TemplateInfo[]
@@ -11,7 +13,7 @@ export function useTemplateFiltering(
  const searchQuery = ref('')
  const selectedModels = ref<string[]>([])
  const selectedUseCases = ref<string[]>([])
-  const selectedLicenses = ref<string[]>([])
+  const selectedRunsOn = ref<string[]>([])
  const sortBy = ref<
    | 'default'
    | 'alphabetical'
@@ -61,8 +63,8 @@ export function useTemplateFiltering(
    return Array.from(tagSet).sort()
  })

-  const availableLicenses = computed(() => {
-    return ['Open Source', 'Closed Source (API Nodes)']
+  const availableRunsOn = computed(() => {
+    return ['ComfyUI', 'External or Remote API']
  })

  const debouncedSearchQuery = refDebounced(searchQuery, 50)
@@ -106,22 +108,23 @@ export function useTemplateFiltering(
    })
  })

-  const filteredByLicenses = computed(() => {
-    if (selectedLicenses.value.length === 0) {
+  const filteredByRunsOn = computed(() => {
+    if (selectedRunsOn.value.length === 0) {
      return filteredByUseCases.value
    }

    return filteredByUseCases.value.filter((template) => {
-      // Check if template has API in its tags or name (indicating it's a closed source API node)
-      const isApiTemplate =
-        template.tags?.includes('API') ||
-        template.name?.toLowerCase().includes('api_')
+      // Use openSource field to determine where template runs
+      // openSource === false -> External/Remote API
+      // openSource !== false -> ComfyUI (includes true and undefined)
+      const isExternalAPI = template.openSource === false
+      const isComfyUI = template.openSource !== false

-      return selectedLicenses.value.some((selectedLicense) => {
-        if (selectedLicense === 'Closed Source (API Nodes)') {
-          return isApiTemplate
-        } else if (selectedLicense === 'Open Source') {
-          return !isApiTemplate
+      return selectedRunsOn.value.some((selectedRunsOn) => {
+        if (selectedRunsOn === 'External or Remote API') {
+          return isExternalAPI
+        } else if (selectedRunsOn === 'ComfyUI') {
+          return isComfyUI
        }
        return false
      })
@@ -140,7 +143,7 @@ export function useTemplateFiltering(
  }

  const sortedTemplates = computed(() => {
-    const templates = [...filteredByLicenses.value]
+    const templates = [...filteredByRunsOn.value]

    switch (sortBy.value) {
      case 'alphabetical':
@@ -193,7 +196,7 @@ export function useTemplateFiltering(
    searchQuery.value = ''
    selectedModels.value = []
    selectedUseCases.value = []
-    selectedLicenses.value = []
+    selectedRunsOn.value = []
    sortBy.value = 'default'
  }

@@ -205,26 +208,58 @@ export function useTemplateFiltering(
    selectedUseCases.value = selectedUseCases.value.filter((t) => t !== tag)
  }

-  const removeLicenseFilter = (license: string) => {
-    selectedLicenses.value = selectedLicenses.value.filter((l) => l !== license)
+  const removeRunsOnFilter = (runsOn: string) => {
+    selectedRunsOn.value = selectedRunsOn.value.filter((r) => r !== runsOn)
  }

  const filteredCount = computed(() => filteredTemplates.value.length)
  const totalCount = computed(() => templatesArray.value.length)

+  // Template filter tracking (debounced to avoid excessive events)
+  const debouncedTrackFilterChange = debounce(() => {
+    useTelemetry()?.trackTemplateFilterChanged({
+      search_query: searchQuery.value || undefined,
+      selected_models: selectedModels.value,
+      selected_use_cases: selectedUseCases.value,
+      selected_runs_on: selectedRunsOn.value,
+      sort_by: sortBy.value,
+      filtered_count: filteredCount.value,
+      total_count: totalCount.value
+    })
+  }, 500)
+
+  // Watch for filter changes and track them
+  watch(
+    [searchQuery, selectedModels, selectedUseCases, selectedRunsOn, sortBy],
+    () => {
+      // Only track if at least one filter is active (to avoid tracking initial state)
+      const hasActiveFilters =
+        searchQuery.value.trim() !== '' ||
+        selectedModels.value.length > 0 ||
+        selectedUseCases.value.length > 0 ||
+        selectedRunsOn.value.length > 0 ||
+        sortBy.value !== 'default'
+
+      if (hasActiveFilters) {
+        debouncedTrackFilterChange()
+      }
+    },
+    { deep: true }
+  )
+
  return {
    // State
    searchQuery,
    selectedModels,
    selectedUseCases,
-    selectedLicenses,
+    selectedRunsOn,
    sortBy,

    // Computed
    filteredTemplates,
    availableModels,
    availableUseCases,
-    availableLicenses,
+    availableRunsOn,
    filteredCount,
    totalCount,

@@ -232,6 +267,6 @@ export function useTemplateFiltering(
    resetFilters,
    removeModelFilter,
    removeUseCaseFilter,
-    removeLicenseFilter
+    removeRunsOnFilter
  }
 }
--- a/src/composables/useVueNodesMigrationDismissed.ts
+++ b/src/composables/useVueNodesMigrationDismissed.ts
@@ -0,0 +1,8 @@
+import { createSharedComposable, useLocalStorage } from '@vueuse/core'
+
+// Browser storage events don't fire in the same tab, so separate
+// useLocalStorage() calls create isolated reactive refs. Use shared
+// composable to ensure all components use the same ref instance.
+export const useVueNodesMigrationDismissed = createSharedComposable(() =>
+  useLocalStorage('comfy.vueNodesMigration.dismissed', false)
+)
--- a/Show More
+++ b/Show More