From 24368aa77c4ff84bb60717c729f844e4bdb26148 Mon Sep 17 00:00:00 2001
From: --list <18093452+simula-r@users.noreply.github.com>
Date: Wed, 3 Dec 2025 16:27:06 -0800
Subject: [PATCH 1/3] fix: vue nodes preview node to match lg and add node when
 clicked

---
 src/components/searchbox/NodeSearchBox.vue    |  6 +--
 .../vueNodes/components/LGraphNodePreview.vue | 54 ++++++++++++-------
 src/stores/nodeDefStore.ts                    | 10 +++-
 3 files changed, 47 insertions(+), 23 deletions(-)

diff --git a/src/components/searchbox/NodeSearchBox.vue b/src/components/searchbox/NodeSearchBox.vue
index 956147472a3..780c1885815 100644
--- a/src/components/searchbox/NodeSearchBox.vue
+++ b/src/components/searchbox/NodeSearchBox.vue
@@ -3,11 +3,11 @@
     class="comfy-vue-node-search-container flex w-full min-w-96 items-center justify-center"
   >
     <div
-      v-if="enableNodePreview"
-      class="comfy-vue-node-preview-container absolute top-[50px] left-[-350px]"
+      v-if="enableNodePreview && hoveredSuggestion"
+      class="comfy-vue-node-preview-container absolute top-[50px] left-[-350px] z-50 cursor-pointer"
+      @mousedown.stop="onAddNode(hoveredSuggestion)"
     >
       <NodePreview
-        v-if="hoveredSuggestion"
         :key="hoveredSuggestion?.name || ''"
         :node-def="hoveredSuggestion"
       />
diff --git a/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue b/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
index 38b0b6884cc..1662cb7c109 100644
--- a/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
+++ b/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
@@ -1,23 +1,29 @@
 <template>
-  <div class="scale-75">
+  <div
+    :data-node-id="nodeData.id"
+    class="bg-component-node-background lg-node absolute pb-1 contain-style contain-layout w-[350px] rounded-2xl touch-none flex flex-col border-1 border-solid outline-transparent outline-2 border-node-stroke"
+    :style="[
+      {
+        '--component-node-background': nodeBodyBackgroundColor
+      }
+    ]"
+  >
     <div
-      class="lg-node pointer-events-none absolute rounded-2xl border border-solid border-node-component-border bg-node-component-surface outline-2 -outline-offset-2 outline-transparent"
+      class="flex flex-col justify-center items-center relative pointer-events-none"
     >
       <NodeHeader :node-data="nodeData" />
+    </div>
+    <div
+      class="flex flex-1 flex-col gap-1 pb-2 pointer-events-none"
+      :data-testid="`node-body-${nodeData.id}`"
+    >
+      <NodeSlots :node-data="nodeData" />
 
-      <div class="mx-0 mb-4 h-px w-full bg-node-component-border" />
-
-      <div class="flex flex-col gap-4 pb-4">
-        <NodeSlots :node-data="nodeData" />
-
-        <NodeWidgets v-if="nodeData.widgets?.length" :node-data="nodeData" />
-
-        <NodeContent
-          v-if="hasCustomContent"
-          :node-data="nodeData"
-          :image-urls="nodeImageUrls"
-        />
-      </div>
+      <NodeWidgets
+        v-if="nodeData.widgets?.length"
+        :node-data="nodeData"
+        class="pointer-events-none"
+      />
     </div>
   </div>
 </template>
@@ -31,12 +37,14 @@ import type {
   INodeOutputSlot
 } from '@/lib/litegraph/src/interfaces'
 import { RenderShape } from '@/lib/litegraph/src/litegraph'
-import NodeContent from '@/renderer/extensions/vueNodes/components/NodeContent.vue'
 import NodeHeader from '@/renderer/extensions/vueNodes/components/NodeHeader.vue'
 import NodeSlots from '@/renderer/extensions/vueNodes/components/NodeSlots.vue'
 import NodeWidgets from '@/renderer/extensions/vueNodes/components/NodeWidgets.vue'
 import type { ComfyNodeDef as ComfyNodeDefV2 } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { useWidgetStore } from '@/stores/widgetStore'
+import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
+
+import { applyLightThemeColor } from '../utils/nodeStyleUtils'
 
 const { nodeDef } = defineProps<{
   nodeDef: ComfyNodeDefV2
@@ -108,6 +116,16 @@ const nodeData = computed<VueNodeData>(() => {
   }
 })
 
-const hasCustomContent = false
-const nodeImageUrls = ['']
+const nodeBodyBackgroundColor = computed(() => {
+  const colorPaletteStore = useColorPaletteStore()
+
+  if (!nodeData.value.bgcolor) {
+    return ''
+  }
+
+  return applyLightThemeColor(
+    nodeData.value.bgcolor,
+    Boolean(colorPaletteStore.completedActivePalette.light_theme)
+  )
+})
 </script>
diff --git a/src/stores/nodeDefStore.ts b/src/stores/nodeDefStore.ts
index 232bba7fbfa..64ee100f365 100644
--- a/src/stores/nodeDefStore.ts
+++ b/src/stores/nodeDefStore.ts
@@ -198,7 +198,10 @@ export const SYSTEM_NODE_DEFS: Record<string, ComfyNodeDefV1> = {
     name: 'Note',
     display_name: 'Note',
     category: 'utils',
-    input: { required: {}, optional: {} },
+    input: {
+      required: { text: ['STRING', { multiline: true }] },
+      optional: {}
+    },
     output: [],
     output_name: [],
     output_is_list: [],
@@ -210,7 +213,10 @@ export const SYSTEM_NODE_DEFS: Record<string, ComfyNodeDefV1> = {
     name: 'MarkdownNote',
     display_name: 'Markdown Note',
     category: 'utils',
-    input: { required: {}, optional: {} },
+    input: {
+      required: { text: ['STRING', { multiline: true }] },
+      optional: {}
+    },
     output: [],
     output_name: [],
     output_is_list: [],

From 22dcd712f5cd20c54d1e39ec39522a2be62d12a3 Mon Sep 17 00:00:00 2001
From: --list <18093452+simula-r@users.noreply.github.com>
Date: Wed, 3 Dec 2025 18:16:57 -0800
Subject: [PATCH 2/3] refactor: unused code

---
 src/components/searchbox/NodeSearchBox.vue    |  2 +-
 .../vueNodes/components/LGraphNodePreview.vue | 22 +------------------
 2 files changed, 2 insertions(+), 22 deletions(-)

diff --git a/src/components/searchbox/NodeSearchBox.vue b/src/components/searchbox/NodeSearchBox.vue
index 780c1885815..0fe74529c92 100644
--- a/src/components/searchbox/NodeSearchBox.vue
+++ b/src/components/searchbox/NodeSearchBox.vue
@@ -4,7 +4,7 @@
   >
     <div
       v-if="enableNodePreview && hoveredSuggestion"
-      class="comfy-vue-node-preview-container absolute top-[50px] left-[-350px] z-50 cursor-pointer"
+      class="comfy-vue-node-preview-container absolute top-[50px] left-[-375px] z-50 cursor-pointer"
       @mousedown.stop="onAddNode(hoveredSuggestion)"
     >
       <NodePreview
diff --git a/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue b/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
index 1662cb7c109..f4f6b1740a3 100644
--- a/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
+++ b/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
@@ -2,11 +2,6 @@
   <div
     :data-node-id="nodeData.id"
     class="bg-component-node-background lg-node absolute pb-1 contain-style contain-layout w-[350px] rounded-2xl touch-none flex flex-col border-1 border-solid outline-transparent outline-2 border-node-stroke"
-    :style="[
-      {
-        '--component-node-background': nodeBodyBackgroundColor
-      }
-    ]"
   >
     <div
       class="flex flex-col justify-center items-center relative pointer-events-none"
@@ -42,9 +37,6 @@ import NodeSlots from '@/renderer/extensions/vueNodes/components/NodeSlots.vue'
 import NodeWidgets from '@/renderer/extensions/vueNodes/components/NodeWidgets.vue'
 import type { ComfyNodeDef as ComfyNodeDefV2 } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { useWidgetStore } from '@/stores/widgetStore'
-import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
-
-import { applyLightThemeColor } from '../utils/nodeStyleUtils'
 
 const { nodeDef } = defineProps<{
   nodeDef: ComfyNodeDefV2
@@ -110,22 +102,10 @@ const nodeData = computed<VueNodeData>(() => {
     widgets,
     inputs,
     outputs,
+
     flags: {
       collapsed: false
     }
   }
 })
-
-const nodeBodyBackgroundColor = computed(() => {
-  const colorPaletteStore = useColorPaletteStore()
-
-  if (!nodeData.value.bgcolor) {
-    return ''
-  }
-
-  return applyLightThemeColor(
-    nodeData.value.bgcolor,
-    Boolean(colorPaletteStore.completedActivePalette.light_theme)
-  )
-})
 </script>

From 4b5adc3bcc412a8e25c945e91443c9879db300c3 Mon Sep 17 00:00:00 2001
From: --list <18093452+simula-r@users.noreply.github.com>
Date: Wed, 3 Dec 2025 18:20:06 -0800
Subject: [PATCH 3/3] refactor: type safety

---
 src/components/searchbox/NodeSearchBox.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/searchbox/NodeSearchBox.vue b/src/components/searchbox/NodeSearchBox.vue
index 0fe74529c92..0a22f4c275f 100644
--- a/src/components/searchbox/NodeSearchBox.vue
+++ b/src/components/searchbox/NodeSearchBox.vue
@@ -5,7 +5,7 @@
     <div
       v-if="enableNodePreview && hoveredSuggestion"
       class="comfy-vue-node-preview-container absolute top-[50px] left-[-375px] z-50 cursor-pointer"
-      @mousedown.stop="onAddNode(hoveredSuggestion)"
+      @mousedown.stop="onAddNode(hoveredSuggestion!)"
     >
       <NodePreview
         :key="hoveredSuggestion?.name || ''"