merge main into rh-test

src/components/node/NodePreview.test.ts

@@ -76,11 +76,11 @@ describe('NodePreview', () => {
     expect(wrapper.find('._sb_preview_badge').text()).toBe('Preview')
   })
 
-  it('applies overflow-ellipsis class to node header for text truncation', () => {
+  it('applies text-ellipsis class to node header for text truncation', () => {
     const wrapper = mountComponent()
     const nodeHeader = wrapper.find('.node_header')
 
-    expect(nodeHeader.classes()).toContain('overflow-ellipsis')
+    expect(nodeHeader.classes()).toContain('text-ellipsis')
     expect(nodeHeader.classes()).toContain('mr-4')
   })
 
@@ -105,7 +105,7 @@ describe('NodePreview', () => {
     expect(nodeHeader.attributes('title')).toBe(longNameNodeDef.display_name)
 
     // Verify overflow handling classes are applied
-    expect(nodeHeader.classes()).toContain('overflow-ellipsis')
+    expect(nodeHeader.classes()).toContain('text-ellipsis')
 
     // The actual text content should still be the full name (CSS handles truncation)
     expect(nodeHeader.text()).toContain(longNameNodeDef.display_name)

src/components/node/NodePreview.vue

@@ -1,12 +1,12 @@
 <!-- Reference:
 https://github.com/Nuked88/ComfyUI-N-Sidebar/blob/7ae7da4a9761009fb6629bc04c683087a3e168db/app/js/functions/sb_fn.js#L149
 -->
-
 <template>
-  <div class="_sb_node_preview">
+  <LGraphNodePreview v-if="shouldRenderVueNodes" :node-def="nodeDef" />
+  <div v-else class="_sb_node_preview">
     <div class="_sb_table">
       <div
-        class="node_header overflow-ellipsis mr-4"
+        class="node_header text-ellipsis mr-4"
         :title="nodeDef.display_name"
         :style="{
           backgroundColor: litegraphColors.NODE_DEFAULT_COLOR,
@@ -85,6 +85,8 @@ https://github.com/Nuked88/ComfyUI-N-Sidebar/blob/7ae7da4a9761009fb6629bc04c6830
 import _ from 'es-toolkit/compat'
 import { computed } from 'vue'
 
+import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
+import LGraphNodePreview from '@/renderer/extensions/vueNodes/components/LGraphNodePreview.vue'
 import type { ComfyNodeDef as ComfyNodeDefV2 } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { useWidgetStore } from '@/stores/widgetStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
@@ -94,6 +96,8 @@ const { nodeDef } = defineProps<{
   nodeDef: ComfyNodeDefV2
 }>()
 
+const { shouldRenderVueNodes } = useVueFeatureFlags()
+
 const colorPaletteStore = useColorPaletteStore()
 const litegraphColors = computed(
   () => colorPaletteStore.completedActivePalette.colors.litegraph_base