From 3624dded1dba4382f8c16c50911a83ca6f7b5248 Mon Sep 17 00:00:00 2001
From: Navid Shad <navidshad72@gmail.com>
Date: Fri, 10 Apr 2026 15:17:18 +0300
Subject: [PATCH] feat: implement reactive node width synchronization and
 improve robustness of node position persistence #86ex65mr3

---
 .../src/components/graph/ConversationNode.vue |  9 +++-
 src/renderer/src/pages/GraphChatPage.vue      |  2 +-
 src/renderer/src/stores/videoStore.ts         | 43 ++++++++++++++-----
 3 files changed, 41 insertions(+), 13 deletions(-)

diff --git a/src/renderer/src/components/graph/ConversationNode.vue b/src/renderer/src/components/graph/ConversationNode.vue
index 7e9f9cb..3b3c1d7 100644
--- a/src/renderer/src/components/graph/ConversationNode.vue
+++ b/src/renderer/src/components/graph/ConversationNode.vue
@@ -187,7 +187,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { Handle, Position, useVueFlow } from '@vue-flow/core'
 import { useVideoStore } from '../../stores/videoStore'
 import { Button } from 'pilotui/elements'
@@ -203,6 +203,13 @@ const videoStore = useVideoStore()
 
 // Resizing logic
 const nodeWidth = ref(props.data.width || 380)
+
+// Sync width if it changes from parent/store
+watch(() => props.data.width, (newWidth) => {
+  if (newWidth && !isResizing.value) {
+    nodeWidth.value = newWidth
+  }
+})
 const isResizing = ref(false)
 
 const startResizing = (e: MouseEvent) => {
diff --git a/src/renderer/src/pages/GraphChatPage.vue b/src/renderer/src/pages/GraphChatPage.vue
index 1d5f2b2..d18daf2 100644
--- a/src/renderer/src/pages/GraphChatPage.vue
+++ b/src/renderer/src/pages/GraphChatPage.vue
@@ -122,7 +122,7 @@ const onNodeDragStop = (event: any) => {
 }
 
 // Hydrate Graph from active real messages
-watch(() => videoStore.messages, (messages) => {
+watch([() => videoStore.messages, () => videoStore.currentThread?.nodePositions], ([messages]) => {
   if (!videoStore.currentThreadId) return
 
   const newNodes: any[] = []
diff --git a/src/renderer/src/stores/videoStore.ts b/src/renderer/src/stores/videoStore.ts
index 4487e94..8ce224c 100644
--- a/src/renderer/src/stores/videoStore.ts
+++ b/src/renderer/src/stores/videoStore.ts
@@ -114,13 +114,26 @@ export const useVideoStore = defineStore('video', () => {
 	const updateNodePositions = async (positions: Record<string, { x: number; y: number }>) => {
 		if (!currentThreadId.value || !currentThread.value) return
 		
-		currentThread.value.nodePositions = {
-			...(currentThread.value.nodePositions || {}),
-			...positions
+		const currentPositions = JSON.parse(JSON.stringify(currentThread.value.nodePositions || {}))
+		
+		for (const [id, pos] of Object.entries(positions)) {
+			currentPositions[id] = {
+				...(currentPositions[id] || {}),
+				...JSON.parse(JSON.stringify(pos))
+			}
 		}
 		
-		const cleanPositions = JSON.parse(JSON.stringify(currentThread.value.nodePositions))
-		await (window as any).api.saveNodePositions(currentThreadId.value, cleanPositions)
+		try {
+			const success = await (window as any).api.saveNodePositions(
+				String(currentThreadId.value), 
+				currentPositions
+			)
+			if (success && currentThread.value) {
+				currentThread.value.nodePositions = currentPositions
+			}
+		} catch (error) {
+			console.error('[videoStore] Failed to save node positions:', error)
+		}
 	}
 
 	const startProcessing = async (threadId: string, editReferenceMessageId?: string) => {
@@ -287,22 +300,30 @@ export const useVideoStore = defineStore('video', () => {
 	const updateNodeMetadata = async (nodeId: string, metadata: { x?: number, y?: number, width?: number }) => {
 		if (!currentThreadId.value || !currentThread.value) return
 		
-		const currentPositions = currentThread.value.nodePositions || {}
+		const currentPositions = JSON.parse(JSON.stringify(currentThread.value.nodePositions || {}))
 		const existing = currentPositions[nodeId] || { x: 0, y: 0 }
 		
 		const updatedPositions = {
 			...currentPositions,
 			[nodeId]: {
 				...existing,
-				...metadata
+				...JSON.parse(JSON.stringify(metadata))
 			}
 		}
 		
-		const success = await (window as any).api.saveNodePositions(currentThreadId.value, updatedPositions)
-		if (success) {
-			currentThread.value.nodePositions = updatedPositions
+		try {
+			const success = await (window as any).api.saveNodePositions(
+				String(currentThreadId.value), 
+				JSON.parse(JSON.stringify(updatedPositions))
+			)
+			if (success && currentThread.value) {
+				currentThread.value.nodePositions = updatedPositions
+			}
+			return success
+		} catch (error) {
+			console.error('[videoStore] Failed to save node positions:', error)
+			return false
 		}
-		return success
 	}
 
 	const retryMessage = async (messageId: string) => {