feat: implement reactive node width synchronization and improve robus…

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) => {

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[] = []

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) => {