Add title editing functionality

src/components/graph/GraphCanvas.vue

@@ -57,6 +57,7 @@
       :data-node-id="nodeData.id"
       @node-click="handleNodeSelect"
       @update:collapsed="handleNodeCollapse"
+      @update:title="handleNodeTitleUpdate"
     />
   </TransformPane>
 
@@ -471,6 +472,17 @@ const handleNodeCollapse = (nodeId: string, collapsed: boolean) => {
   node.flags.collapsed = collapsed
 }
 
+// Handle node title updates
+const handleNodeTitleUpdate = (nodeId: string, newTitle: string) => {
+  if (!nodeManager) return
+
+  const node = nodeManager.getNode(nodeId)
+  if (!node) return
+
+  // Update the node title in LiteGraph for persistence
+  node.title = newTitle
+}
+
 watchEffect(() => {
   nodeDefStore.showDeprecated = settingStore.get('Comfy.Node.ShowDeprecated')
 })

src/components/graph/vueNodes/LGraphNode.vue

@@ -30,6 +30,7 @@
       :lod-level="lodLevel"
       :collapsed="isCollapsed"
       @collapse="handleCollapse"
+      @update:title="handleTitleUpdate"
     />
 
     <!-- Node Body - rendered based on LOD level and collapsed state -->
@@ -116,6 +117,7 @@ const emit = defineEmits<{
     isInput: boolean
   ]
   'update:collapsed': [nodeId: string, collapsed: boolean]
+  'update:title': [nodeId: string, newTitle: string]
 }>()
 
 // LOD (Level of Detail) system based on zoom level
@@ -181,6 +183,10 @@ const handleSlotClick = (
   emit('slot-click', event, props.nodeData, slotIndex, isInput)
 }
 
+const handleTitleUpdate = (newTitle: string) => {
+  emit('update:title', props.nodeData.id, newTitle)
+}
+
 // Expose methods for parent to control dragging state
 defineExpose({
   setDragging(dragging: boolean) {

src/components/graph/vueNodes/NodeHeader.vue

@@ -25,16 +25,21 @@
     </button>
 
     <!-- Node Title -->
-    <span class="text-sm font-medium truncate flex-1">
-      {{ nodeInfo?.title || 'Untitled' }}
-    </span>
+    <div class="text-sm font-medium truncate flex-1">
+      <EditableText
+        :model-value="displayTitle"
+        :is-editing="isEditing"
+        @edit="handleTitleEdit"
+      />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import type { LGraphNode } from '@comfyorg/litegraph'
-import { computed, onErrorCaptured, ref } from 'vue'
+import { computed, onErrorCaptured, ref, watch } from 'vue'
 
+import EditableText from '@/components/common/EditableText.vue'
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
 import type { LODLevel } from '@/composables/graph/useLOD'
 import { useErrorHandling } from '@/composables/useErrorHandling'
@@ -52,6 +57,7 @@ const props = defineProps<NodeHeaderProps>()
 const emit = defineEmits<{
   collapse: []
   'title-edit': []
+  'update:title': [newTitle: string]
 }>()
 
 // Error boundary implementation
@@ -64,8 +70,24 @@ onErrorCaptured((error) => {
   return false
 })
 
+// Editing state
+const isEditing = ref(false)
+
 const nodeInfo = computed(() => props.nodeData || props.node)
 
+// Local state for title to provide immediate feedback
+const displayTitle = ref(nodeInfo.value?.title || 'Untitled')
+
+// Watch for external title changes (e.g., from litegraph or other sources)
+watch(
+  () => nodeInfo.value?.title,
+  (newTitle) => {
+    if (newTitle && newTitle !== displayTitle.value) {
+      displayTitle.value = newTitle
+    }
+  }
+)
+
 // Compute header color based on node color property or type
 const headerColor = computed(() => {
   const info = nodeInfo.value
@@ -101,7 +123,19 @@ const handleCollapse = () => {
 
 const handleDoubleClick = () => {
   if (!props.readonly) {
+    isEditing.value = true
     emit('title-edit')
   }
 }
+
+const handleTitleEdit = (newTitle: string) => {
+  isEditing.value = false
+  const trimmedTitle = newTitle.trim()
+  if (trimmedTitle && trimmedTitle !== displayTitle.value) {
+    // Update local state immediately for instant feedback
+    displayTitle.value = trimmedTitle
+    // Emit for litegraph sync
+    emit('update:title', trimmedTitle)
+  }
+}
 </script>

src/composables/graph/useGraphNodeManager.ts

@@ -204,7 +204,8 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
       executing: false, // Will be updated separately based on execution state
       widgets: safeWidgets,
       inputs: node.inputs ? [...node.inputs] : undefined,
-      outputs: node.outputs ? [...node.outputs] : undefined
+      outputs: node.outputs ? [...node.outputs] : undefined,
+      flags: node.flags ? { ...node.flags } : undefined
     }
   }