From e32804c3e07a7faf694e6a0ba0b2f568fbd7aa31 Mon Sep 17 00:00:00 2001
From: Navid Shad <navidshad72@gmail.com>
Date: Tue, 7 Apr 2026 23:19:32 +0300
Subject: [PATCH 1/4] feat: implement single message deletion and content
 editing capabilities with re-chaining logic #86ex65mr3

---
 src/main/index.ts                             |  8 ++
 src/main/threads/index.ts                     | 38 +++++++++
 src/preload/index.ts                          |  4 +
 src/renderer/src/assets/main.css              |  7 ++
 .../src/components/chat/ChatMessage.vue       | 51 +++++++++--
 .../src/components/graph/ConversationNode.vue | 84 +++++++++++++++++--
 src/renderer/src/pages/GraphChatPage.vue      |  4 +-
 src/renderer/src/stores/videoStore.ts         | 29 +++++++
 8 files changed, 212 insertions(+), 13 deletions(-)

diff --git a/src/main/index.ts b/src/main/index.ts
index da0a978..6cbda25 100644
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -358,6 +358,14 @@ app.whenReady().then(() => {
 	ipcMain.handle('remove-message', async (_event, { threadId, messageId }) => {
 		return await threadManager.removeMessageBranchFromThread(threadId, messageId)
 	})
+	
+	ipcMain.handle('remove-single-message', async (_event, { threadId, messageId }) => {
+		return await threadManager.removeSingleMessage(threadId, messageId)
+	})
+
+	ipcMain.handle('update-message', async (_event, { threadId, messageId, updates }) => {
+		return await threadManager.updateMessageInThread(threadId, messageId, updates)
+	})
 
 	ipcMain.handle('save-node-positions', async (_event, { threadId, positions }) => {
 		return await threadManager.updateThreadNodePositions(threadId, positions)
diff --git a/src/main/threads/index.ts b/src/main/threads/index.ts
index 6d4cb9a..1f15779 100644
--- a/src/main/threads/index.ts
+++ b/src/main/threads/index.ts
@@ -615,6 +615,44 @@ class ThreadManager {
 
 		return !!result
 	}
+
+	// NEW: Remove a single message from a thread and re-chain its children
+	async removeSingleMessage(threadId: string, messageId: string): Promise<boolean> {
+		const thread = this.getThread(threadId)
+		if (!thread) return false
+
+		const msg = thread.messages.find(m => m.id === messageId)
+		if (!msg) return false
+
+		// 1. Delete associated files for THIS message only (except original and protected reference/analysis files)
+		if (msg.files) {
+			for (const file of msg.files) {
+				if (file.type !== FileType.Original) {
+					const cleanPath = file.url.replace('file://', '').replace('media://', '')
+					
+					// Only allow deletion if it belongs to generated directories
+					const isGenerated = cleanPath.includes(`/${THREAD_DIRS.GENERATED_IMAGES}/`) || 
+										cleanPath.includes(`/${THREAD_DIRS.GENERATED_VIDEOS}/`)
+					
+					if (isGenerated) {
+						this.deleteFile(file.url)
+					}
+				}
+			}
+		}
+
+		// 2. Re-chain children to point to this message's parent (editRefId)
+		const parentId = msg.editRefId
+		const updatedMessages = thread.messages
+			.filter(m => m.id !== messageId)
+			.map(m => m.editRefId === messageId ? { ...m, editRefId: parentId } : m)
+
+		const result = await this.updateThread(threadId, {
+			messages: updatedMessages
+		})
+
+		return !!result
+	}
 }
 
 export const threadManager = new ThreadManager()
diff --git a/src/preload/index.ts b/src/preload/index.ts
index 42c4153..23c2984 100644
--- a/src/preload/index.ts
+++ b/src/preload/index.ts
@@ -54,6 +54,10 @@ const api = {
 		ipcRenderer.invoke('save-node-positions', { threadId, positions }),
 	removeMessage: (threadId: string, messageId: string) =>
 		ipcRenderer.invoke('remove-message', { threadId, messageId }),
+	removeSingleMessage: (threadId: string, messageId: string) =>
+		ipcRenderer.invoke('remove-single-message', { threadId, messageId }),
+	updateMessage: (threadId: string, messageId: string, updates: any) =>
+		ipcRenderer.invoke('update-message', { threadId, messageId, updates }),
 	showConfirmation: (options: { title: string, message: string, detail?: string, type?: string, buttons?: string[], defaultId?: number, cancelId?: number }) =>
 		ipcRenderer.invoke('show-confirmation', options),
 	saveVideo: (sourcePath: string) => ipcRenderer.invoke('save-video', sourcePath),
diff --git a/src/renderer/src/assets/main.css b/src/renderer/src/assets/main.css
index c6d6c56..f6123f4 100644
--- a/src/renderer/src/assets/main.css
+++ b/src/renderer/src/assets/main.css
@@ -55,4 +55,11 @@
   .custom-scrollbar::-webkit-scrollbar-thumb {
     @apply bg-zinc-300/50 dark:bg-zinc-700/50 rounded-full hover:bg-zinc-400/50 dark:hover:bg-zinc-600/50 transition-colors;
   }
+
+  .custom-textarea-full {
+    @apply h-full flex flex-col;
+  }
+  .custom-textarea-full textarea {
+    @apply h-full min-h-[50vh] !resize-none;
+  }
 }
diff --git a/src/renderer/src/components/chat/ChatMessage.vue b/src/renderer/src/components/chat/ChatMessage.vue
index a9194ad..3ae7382 100644
--- a/src/renderer/src/components/chat/ChatMessage.vue
+++ b/src/renderer/src/components/chat/ChatMessage.vue
@@ -8,12 +8,14 @@
 				{{ message.role === MessageRole.User ? 'You' : 'AI Assistant' }}
 			</span>
 
-			<!-- Action Buttons (Remove/Retry) -->
-			<div v-if="!message.isPending && (!isFirst || (isLatestUser && message.role === MessageRole.User))"
+			<!-- Action Buttons (Remove/Retry/Edit) -->
+			<div v-if="!message.isPending"
 				class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity scale-75">
 				<IconButton v-if="isLatestUser && message.role === MessageRole.User" icon="IconRefresh" size="xs"
 					rounded="full" title="Retry from this message" @click="handleRetry" />
-				<IconButton v-if="!isFirst" icon="IconTrashLines" size="xs" rounded="full" title="Remove Message"
+				<IconButton v-if="message.role === MessageRole.User" icon="IconPencil" size="xs"
+					rounded="full" title="Edit Message" @click="handleStartEdit" />
+				<IconButton icon="IconTrashLines" size="xs" rounded="full" title="Remove Message"
 					@click="handleRemove" />
 			</div>
 		</div>
@@ -103,12 +105,31 @@
 				</div>
 			</Card>
 		</div>
+
+		<!-- Edit Modal -->
+		<Modal v-model="isModalOpen" title="Edit Message" size="xl" :custom-class="{ panel: '!h-[80vh] flex flex-col' }">
+			<div class="flex flex-col gap-4 h-full overflow-hidden">
+				<div class="flex-1 overflow-hidden">
+					<TextArea
+						v-model="editText"
+						placeholder="Enter your message..."
+						class="h-full font-sans text-base custom-textarea-full"
+					/>
+				</div>
+				<div class="flex justify-end gap-3 mt-2">
+					<Button variant="outline" @click="isModalOpen = false">Cancel</Button>
+					<Button variant="primary" @click="handleSaveEdit">Save Changes</Button>
+				</div>
+			</div>
+		</Modal>
 	</div>
 </template>
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import { Card, IconButton } from 'pilotui/elements'
+import { Card, IconButton, Button } from 'pilotui/elements'
+import { Modal } from 'pilotui/complex'
+import { TextArea } from 'pilotui/form'
 import { MessageRole, Message, FileType } from '@shared/types'
 import VideoResult from './VideoResult.vue'
 import TimelineResult from './TimelineResult.vue'
@@ -125,12 +146,31 @@ const emit = defineEmits(['edit', 'save-video', 'scroll-to-reference', 'remove',
 
 const videoStore = useVideoStore()
 const isTimelineExpanded = ref(false)
+const isModalOpen = ref(false)
+const editText = ref('')
+
+const handleStartEdit = () => {
+	editText.value = props.message.content
+	isModalOpen.value = true
+}
+
+const handleSaveEdit = async () => {
+	if (editText.value.trim() === props.message.content) {
+		isModalOpen.value = false
+		return
+	}
+	
+	const success = await videoStore.updateMessageContent(props.message.id, editText.value)
+	if (success) {
+		isModalOpen.value = false
+	}
+}
 
 const handleRemove = async () => {
 	const response = await (window as any).api.showConfirmation({
 		title: 'Remove Message',
 		message: 'Are you sure you want to remove this message?',
-		detail: 'This will permanently remove this message and all its generated videos. This action cannot be undone.',
+		detail: 'This will permanently remove this message and its associated generated artifacts. Subsequent messages in this thread will be preserved.',
 		type: 'warning',
 		buttons: ['Cancel', 'Remove'],
 		defaultId: 1,
@@ -138,6 +178,7 @@ const handleRemove = async () => {
 	})
 
 	if (response === 1) {
+		await videoStore.removeSingleMessage(props.message.id)
 		emit('remove', props.message.id)
 	}
 }
diff --git a/src/renderer/src/components/graph/ConversationNode.vue b/src/renderer/src/components/graph/ConversationNode.vue
index f7835bd..acc36d8 100644
--- a/src/renderer/src/components/graph/ConversationNode.vue
+++ b/src/renderer/src/components/graph/ConversationNode.vue
@@ -41,9 +41,17 @@
         <div class="flex items-center space-x-2 px-1">
           <span class="text-[9px] uppercase font-black tracking-widest text-zinc-500 dark:text-zinc-500">{{ msg.role
           }}</span>
-          <div v-if="msg.role === 'user'" @click="videoStore.retryMessage(msg.id)"
-            class="text-[9px] font-bold text-blue-500 hover:underline cursor-pointer opacity-0 group-hover:opacity-100 uppercase">
-            Retry</div>
+          <div class="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+            <div v-if="msg.role === 'user'" @click="videoStore.retryMessage(msg.id)"
+              class="text-[9px] font-bold text-blue-500 hover:underline cursor-pointer uppercase">
+              Retry</div>
+            <div v-if="msg.role === 'user' && editingMessageId !== msg.id" @click="startEditing(msg)"
+              class="text-[9px] font-bold text-zinc-400 hover:text-primary cursor-pointer uppercase">
+              Edit</div>
+            <div @click="removeMessage(msg.id)"
+              class="text-[9px] font-bold text-zinc-400 hover:text-red-500 cursor-pointer uppercase">
+              Remove</div>
+          </div>
         </div>
 
         <div
@@ -76,9 +84,11 @@
             class="text-zinc-400 italic font-medium flex items-center space-x-2">
             <span>AI is thinking...</span>
           </div>
-          <div v-else v-html="renderMarkdown(msg.content)"
-            class="prose prose-sm max-w-none prose-p:my-0 prose-ul:my-2 prose-ol:my-2 prose-li:my-0 shadow-none border-none pointer-events-auto"
-            :class="msg.role === 'user' ? 'prose-invert text-white' : 'dark:prose-invert'"></div>
+          <template v-else>
+            <div v-if="editingMessageId !== msg.id" v-html="renderMarkdown(msg.content)"
+              class="prose prose-sm max-w-none prose-p:my-0 prose-ul:my-2 prose-ol:my-2 prose-li:my-0 shadow-none border-none pointer-events-auto"
+              :class="msg.role === 'user' ? 'prose-invert text-white' : 'dark:prose-invert'"></div>
+          </template>
 
           <!-- Files -->
           <div v-if="msg.files && msg.files.filter((f: any) => f.type !== 'original').length > 0"
@@ -138,6 +148,23 @@
 
     <Handle type="source" :position="Position.Bottom"
       class="w-3 h-3 bg-blue-500 border-2 border-white dark:border-zinc-800" />
+
+    <!-- Edit Modal -->
+    <Modal v-model="isModalOpen" title="Edit Message" size="xl" :custom-class="{ panel: '!h-[80vh] flex flex-col' }">
+      <div class="flex flex-col gap-4 h-full overflow-hidden">
+        <div class="flex-1 overflow-hidden">
+          <TextArea
+            v-model="editText"
+            placeholder="Edit message..."
+            class="h-full font-sans text-base custom-textarea-full"
+          />
+        </div>
+        <div class="flex justify-end gap-3 mt-2 flex-shrink-0">
+          <Button variant="outline" @click="isModalOpen = false">Cancel</Button>
+          <Button variant="primary" @click="saveEdit">Save Changes</Button>
+        </div>
+      </div>
+    </Modal>
   </div>
 </template>
 
@@ -145,6 +172,9 @@
 import { ref } from 'vue'
 import { Handle, Position } from '@vue-flow/core'
 import { useVideoStore } from '../../stores/videoStore'
+import { Button } from 'pilotui/elements'
+import { Modal } from 'pilotui/complex'
+import { TextArea } from 'pilotui/form'
 import { renderMarkdown } from '../../utils/markdown'
 import BaseMessageInput from '../chat/BaseMessageInput.vue'
 
@@ -155,6 +185,48 @@ const showInput = ref(false)
 const copiedId = ref<string | null>(null)
 const attachedImages = ref<string[]>([])
 
+const editingMessageId = ref<string | null>(null)
+const editText = ref('')
+const isModalOpen = ref(false)
+
+const startEditing = (msg: any) => {
+  editingMessageId.value = msg.id
+  editText.value = msg.content
+  isModalOpen.value = true
+}
+
+const cancelEdit = () => {
+  editingMessageId.value = null
+  editText.value = ''
+  isModalOpen.value = false
+}
+
+const saveEdit = async () => {
+  if (!editingMessageId.value) return
+  if (editText.value.trim() === '') return
+  
+  const success = await videoStore.updateMessageContent(editingMessageId.value, editText.value)
+  if (success) {
+    cancelEdit()
+  }
+}
+
+const removeMessage = async (messageId: string) => {
+  const confirmed = await (window as any).api.showConfirmation({
+    title: 'Remove Message',
+    message: 'Are you sure you want to remove this message from the conversation?',
+    detail: 'This will delete the message and its artifacts. Subsequent messages in this node will be preserved.',
+    type: 'warning',
+    buttons: ['Cancel', 'Remove'],
+    defaultId: 1,
+    cancelId: 0
+  })
+  
+  if (confirmed === 1) {
+    await videoStore.removeSingleMessage(messageId)
+  }
+}
+
 const copyMessage = (id: string, content: string) => {
   navigator.clipboard.writeText(content).then(() => {
     copiedId.value = id
diff --git a/src/renderer/src/pages/GraphChatPage.vue b/src/renderer/src/pages/GraphChatPage.vue
index 5039152..6d9b88a 100644
--- a/src/renderer/src/pages/GraphChatPage.vue
+++ b/src/renderer/src/pages/GraphChatPage.vue
@@ -3,12 +3,12 @@
     <!-- Ambient Backgrounds -->
     <div class="absolute top-[-10%] left-[-10%] w-[60%] h-[60%] bg-primary/20 dark:bg-primary/10 rounded-full blur-[140px] pointer-events-none transition-all duration-1000 animate-pulse-soft"></div>
     <div class="absolute bottom-[-10%] right-[-10%] w-[60%] h-[60%] bg-secondary/20 dark:bg-secondary/10 rounded-full blur-[140px] pointer-events-none transition-all duration-1000 animate-pulse-soft"></div>
-    <div class="px-5 py-3 z-10 w-full flex items-center justify-between bg-zinc-50 dark:bg-zinc-950/80 backdrop-blur-md border-b border-zinc-200 dark:border-zinc-800 shadow-sm">
+    <div class="px-5 py-3 z-20 w-full flex items-center justify-between bg-zinc-50 dark:bg-zinc-950/80 backdrop-blur-md border-b border-zinc-200 dark:border-zinc-800 shadow-sm flex-shrink-0">
       <div class="flex items-center gap-4 flex-1 min-w-0">
         <button @click="router.push('/home')" class="flex items-center justify-center w-8 h-8 bg-zinc-100 dark:bg-zinc-800 rounded-full border border-zinc-200 dark:border-zinc-700 hover:bg-zinc-200 dark:hover:bg-zinc-700 transition text-zinc-600 dark:text-zinc-300 flex-shrink-0">
           <svg class="w-4 h-4 ml-[-2px]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 19l-7-7 7-7"></path></svg>
         </button>
-        <h1 class="text-xl font-bold font-heading text-zinc-900 dark:text-zinc-100 truncate tracking-tight max-w-[40%]">
+        <h1 class="text-xl font-bold font-heading text-zinc-900 dark:text-zinc-100 truncate tracking-tight min-w-[200px] max-w-[50%]">
           {{ videoStore.currentVideoName || 'Graph Task Manager' }}
         </h1>
 
diff --git a/src/renderer/src/stores/videoStore.ts b/src/renderer/src/stores/videoStore.ts
index 5093efb..d7eae7e 100644
--- a/src/renderer/src/stores/videoStore.ts
+++ b/src/renderer/src/stores/videoStore.ts
@@ -257,6 +257,33 @@ export const useVideoStore = defineStore('video', () => {
 		return success
 	}
 
+	const removeSingleMessage = async (messageId: string) => {
+		if (!currentThreadId.value || !currentThread.value) return
+		const success = await (window as any).api.removeSingleMessage(currentThreadId.value, messageId)
+		if (success && currentThread.value) {
+			const msg = currentThread.value.messages.find(m => m.id === messageId)
+			if (msg) {
+				const parentId = msg.editRefId
+				currentThread.value.messages = currentThread.value.messages
+					.filter((m) => m.id !== messageId)
+					.map(m => m.editRefId === messageId ? { ...m, editRefId: parentId } : m)
+			}
+		}
+		return success
+	}
+
+	const updateMessageContent = async (messageId: string, content: string) => {
+		if (!currentThreadId.value || !currentThread.value) return
+		const success = await (window as any).api.updateMessage(currentThreadId.value, messageId, { content })
+		if (success && currentThread.value) {
+			const index = currentThread.value.messages.findIndex(m => m.id === messageId)
+			if (index !== -1) {
+				currentThread.value.messages[index].content = content
+			}
+		}
+		return success
+	}
+
 	const retryMessage = async (messageId: string) => {
 		if (!currentThreadId.value || !currentThread.value) return
 
@@ -297,8 +324,10 @@ export const useVideoStore = defineStore('video', () => {
 		deleteThread,
 		deleteAllThreads,
 		removeMessageBranch,
+		removeSingleMessage,
 		retryMessage,
 		updateMessage,
+		updateMessageContent,
 		updateNodePositions,
 		retryPreprocessing
 	}

From 3621e1fa501eeacf1a72882dd6e9b8eaba1cf343 Mon Sep 17 00:00:00 2001
From: Navid Shad <navidshad72@gmail.com>
Date: Wed, 8 Apr 2026 00:25:05 +0300
Subject: [PATCH 2/4] fix: update modal close handlers and simplify message
 rendering logic in chat components #86ex65mr3

---
 src/renderer/src/components/chat/ChatMessage.vue       | 2 +-
 src/renderer/src/components/graph/ConversationNode.vue | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/renderer/src/components/chat/ChatMessage.vue b/src/renderer/src/components/chat/ChatMessage.vue
index 3ae7382..a2d1ce7 100644
--- a/src/renderer/src/components/chat/ChatMessage.vue
+++ b/src/renderer/src/components/chat/ChatMessage.vue
@@ -107,7 +107,7 @@
 		</div>
 
 		<!-- Edit Modal -->
-		<Modal v-model="isModalOpen" title="Edit Message" size="xl" :custom-class="{ panel: '!h-[80vh] flex flex-col' }">
+		<Modal v-model="isModalOpen" title="Edit Message" size="xl" :custom-class="{ panel: '!h-[80vh] flex flex-col' }" @close="isModalOpen = false">
 			<div class="flex flex-col gap-4 h-full overflow-hidden">
 				<div class="flex-1 overflow-hidden">
 					<TextArea
diff --git a/src/renderer/src/components/graph/ConversationNode.vue b/src/renderer/src/components/graph/ConversationNode.vue
index acc36d8..698567c 100644
--- a/src/renderer/src/components/graph/ConversationNode.vue
+++ b/src/renderer/src/components/graph/ConversationNode.vue
@@ -85,7 +85,7 @@
             <span>AI is thinking...</span>
           </div>
           <template v-else>
-            <div v-if="editingMessageId !== msg.id" v-html="renderMarkdown(msg.content)"
+            <div v-html="renderMarkdown(msg.content)"
               class="prose prose-sm max-w-none prose-p:my-0 prose-ul:my-2 prose-ol:my-2 prose-li:my-0 shadow-none border-none pointer-events-auto"
               :class="msg.role === 'user' ? 'prose-invert text-white' : 'dark:prose-invert'"></div>
           </template>
@@ -150,7 +150,7 @@
       class="w-3 h-3 bg-blue-500 border-2 border-white dark:border-zinc-800" />
 
     <!-- Edit Modal -->
-    <Modal v-model="isModalOpen" title="Edit Message" size="xl" :custom-class="{ panel: '!h-[80vh] flex flex-col' }">
+    <Modal v-model="isModalOpen" title="Edit Message" size="xl" :custom-class="{ panel: '!h-[80vh] flex flex-col' }" @close="cancelEdit">
       <div class="flex flex-col gap-4 h-full overflow-hidden">
         <div class="flex-1 overflow-hidden">
           <TextArea
@@ -160,7 +160,7 @@
           />
         </div>
         <div class="flex justify-end gap-3 mt-2 flex-shrink-0">
-          <Button variant="outline" @click="isModalOpen = false">Cancel</Button>
+          <Button variant="outline" @click="cancelEdit">Cancel</Button>
           <Button variant="primary" @click="saveEdit">Save Changes</Button>
         </div>
       </div>

From 52fa5d94f3afc5e9e8be058c8f515cb9f70d9ff4 Mon Sep 17 00:00:00 2001
From: Navid Shad <navidshad72@gmail.com>
Date: Wed, 8 Apr 2026 00:57:51 +0300
Subject: [PATCH 3/4] feat: add resizable conversation nodes with persistent
 width state #86ex65mr3

---
 src/main/threads/index.ts                     |  2 +-
 .../src/components/graph/ConversationNode.vue | 47 +++++++++++++++++--
 src/renderer/src/pages/GraphChatPage.vue      |  3 +-
 src/renderer/src/stores/videoStore.ts         | 22 +++++++++
 src/shared/types.ts                           |  2 +-
 5 files changed, 70 insertions(+), 6 deletions(-)

diff --git a/src/main/threads/index.ts b/src/main/threads/index.ts
index 1f15779..de601fa 100644
--- a/src/main/threads/index.ts
+++ b/src/main/threads/index.ts
@@ -481,7 +481,7 @@ class ThreadManager {
 		return !!result
 	}
 
-	async updateThreadNodePositions(threadId: string, positions: Record<string, { x: number; y: number }>): Promise<boolean> {
+	async updateThreadNodePositions(threadId: string, positions: Record<string, { x: number; y: number; width?: number }>): Promise<boolean> {
 		const result = await this.updateThread(threadId, {
 			nodePositions: positions
 		})
diff --git a/src/renderer/src/components/graph/ConversationNode.vue b/src/renderer/src/components/graph/ConversationNode.vue
index 698567c..5abca0a 100644
--- a/src/renderer/src/components/graph/ConversationNode.vue
+++ b/src/renderer/src/components/graph/ConversationNode.vue
@@ -1,6 +1,11 @@
 <template>
-  <div
-    class="glass-card glass-card-hover p-0 rounded-3xl min-w-[320px] max-w-[420px] overflow-hidden flex flex-col group">
+  <div class="glass-card p-0 rounded-3xl min-w-[320px] overflow-hidden flex flex-col group relative"
+    :class="[isResizing ? '' : 'glass-card-hover transition-all duration-500']"
+    :style="{ width: nodeWidth + 'px', maxWidth: '800px' }">
+    <!-- Resize Handle -->
+    <div class="absolute top-0 right-0 w-1.5 h-full cursor-ew-resize hover:bg-primary/40 transition-colors z-[60] opacity-0 group-hover:opacity-100"
+      @mousedown.stop.prevent="startResizing"></div>
+
     <Handle type="target" :position="Position.Top"
       class="w-3 h-3 bg-zinc-400 dark:bg-zinc-500 border-2 border-white dark:border-zinc-800" />
 
@@ -170,7 +175,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { Handle, Position } from '@vue-flow/core'
+import { Handle, Position, useVueFlow } from '@vue-flow/core'
 import { useVideoStore } from '../../stores/videoStore'
 import { Button } from 'pilotui/elements'
 import { Modal } from 'pilotui/complex'
@@ -179,7 +184,43 @@ import { renderMarkdown } from '../../utils/markdown'
 import BaseMessageInput from '../chat/BaseMessageInput.vue'
 
 const props = defineProps<{ data: any }>()
+const emit = defineEmits(['node-resize-stop'])
+const { viewport } = useVueFlow()
 const videoStore = useVideoStore()
+
+// Resizing logic
+const nodeWidth = ref(props.data.width || 380)
+const isResizing = ref(false)
+
+const startResizing = (e: MouseEvent) => {
+  isResizing.value = true
+  document.body.style.cursor = 'ew-resize'
+  document.body.style.userSelect = 'none'
+  const startX = e.clientX
+  const startWidth = nodeWidth.value
+
+  const onMouseMove = (moveEvent: MouseEvent) => {
+    if (!isResizing.value) return
+    const zoom = viewport.value.zoom || 1
+    const deltaX = (moveEvent.clientX - startX) / zoom
+    const newWidth = Math.min(800, Math.max(320, startWidth + deltaX))
+    nodeWidth.value = newWidth
+  }
+
+  const onMouseUp = () => {
+    if (isResizing.value) {
+      isResizing.value = false
+      document.body.style.cursor = ''
+      document.body.style.userSelect = ''
+      window.removeEventListener('mousemove', onMouseMove)
+      window.removeEventListener('mouseup', onMouseUp)
+      emit('node-resize-stop', nodeWidth.value)
+    }
+  }
+
+  window.addEventListener('mousemove', onMouseMove)
+  window.addEventListener('mouseup', onMouseUp)
+}
 const input = ref('')
 const showInput = ref(false)
 const copiedId = ref<string | null>(null)
diff --git a/src/renderer/src/pages/GraphChatPage.vue b/src/renderer/src/pages/GraphChatPage.vue
index 6d9b88a..1d5f2b2 100644
--- a/src/renderer/src/pages/GraphChatPage.vue
+++ b/src/renderer/src/pages/GraphChatPage.vue
@@ -45,7 +45,7 @@
         <Controls />
         
         <template #node-conversation="props">
-          <ConversationNode v-bind="props" />
+          <ConversationNode v-bind="props" @node-resize-stop="videoStore.updateNodeMetadata(props.id, { width: $event })" />
         </template>
         <template #node-media="props">
           <MediaNode v-bind="props" />
@@ -355,6 +355,7 @@ watch(() => videoStore.messages, (messages) => {
         data: {
           messages: strand.messageIds.map(id => messageLookup[id]),
           hasInputInitially: (childMap[lastId] || []).length === 0,
+          width: videoStore.currentThread?.nodePositions?.[strand.id]?.width || 380,
           onDelete: async () => {
              const confirmed = await (window as any).api.showConfirmation({
                title: 'Delete Node',
diff --git a/src/renderer/src/stores/videoStore.ts b/src/renderer/src/stores/videoStore.ts
index d7eae7e..4487e94 100644
--- a/src/renderer/src/stores/videoStore.ts
+++ b/src/renderer/src/stores/videoStore.ts
@@ -284,6 +284,27 @@ export const useVideoStore = defineStore('video', () => {
 		return success
 	}
 
+	const updateNodeMetadata = async (nodeId: string, metadata: { x?: number, y?: number, width?: number }) => {
+		if (!currentThreadId.value || !currentThread.value) return
+		
+		const currentPositions = currentThread.value.nodePositions || {}
+		const existing = currentPositions[nodeId] || { x: 0, y: 0 }
+		
+		const updatedPositions = {
+			...currentPositions,
+			[nodeId]: {
+				...existing,
+				...metadata
+			}
+		}
+		
+		const success = await (window as any).api.saveNodePositions(currentThreadId.value, updatedPositions)
+		if (success) {
+			currentThread.value.nodePositions = updatedPositions
+		}
+		return success
+	}
+
 	const retryMessage = async (messageId: string) => {
 		if (!currentThreadId.value || !currentThread.value) return
 
@@ -329,6 +350,7 @@ export const useVideoStore = defineStore('video', () => {
 		updateMessage,
 		updateMessageContent,
 		updateNodePositions,
+		updateNodeMetadata,
 		retryPreprocessing
 	}
 })
\ No newline at end of file
diff --git a/src/shared/types.ts b/src/shared/types.ts
index 170a4b4..25272bc 100644
--- a/src/shared/types.ts
+++ b/src/shared/types.ts
@@ -142,7 +142,7 @@ export interface Thread {
 	tempDir: string
 	messages: Message[]
 	backgroundTasks?: Record<string, BackgroundTask>
-	nodePositions?: Record<string, { x: number; y: number }>
+	nodePositions?: Record<string, { x: number; y: number; width?: number }>
 	versionCounter?: number
 	videoMetadata?: VideoMetadata
 	missing?: boolean

From 12f18a7fee03bf1533d2518cee3f5a550720c287 Mon Sep 17 00:00:00 2001
From: Navid Shad <navidshad72@gmail.com>
Date: Fri, 10 Apr 2026 14:48:05 +0300
Subject: [PATCH 4/4] refactor: improve UI layout and add confirmation dialogs
 for message retry actions #86ex65mr3

---
 .../src/components/chat/ChatMessage.vue       | 36 +++++-----
 .../src/components/graph/ConversationNode.vue | 67 +++++++++++++------
 2 files changed, 68 insertions(+), 35 deletions(-)

diff --git a/src/renderer/src/components/chat/ChatMessage.vue b/src/renderer/src/components/chat/ChatMessage.vue
index a2d1ce7..fa62b7f 100644
--- a/src/renderer/src/components/chat/ChatMessage.vue
+++ b/src/renderer/src/components/chat/ChatMessage.vue
@@ -4,7 +4,8 @@
 		<!-- Role Indicator -->
 		<div class="flex items-center space-x-2 mb-2 px-1"
 			:class="message.role === MessageRole.User ? 'flex-row-reverse space-x-reverse' : 'flex-row'">
-			<span class="text-[10px] font-bold text-zinc-400/80 dark:text-zinc-500 uppercase tracking-[0.2em] font-heading">
+			<span
+				class="text-[10px] font-bold text-zinc-400/80 dark:text-zinc-500 uppercase tracking-[0.2em] font-heading">
 				{{ message.role === MessageRole.User ? 'You' : 'AI Assistant' }}
 			</span>
 
@@ -13,8 +14,8 @@
 				class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity scale-75">
 				<IconButton v-if="isLatestUser && message.role === MessageRole.User" icon="IconRefresh" size="xs"
 					rounded="full" title="Retry from this message" @click="handleRetry" />
-				<IconButton v-if="message.role === MessageRole.User" icon="IconPencil" size="xs"
-					rounded="full" title="Edit Message" @click="handleStartEdit" />
+				<IconButton v-if="message.role === MessageRole.User" icon="IconPencil" size="xs" rounded="full"
+					title="Edit Message" @click="handleStartEdit" />
 				<IconButton icon="IconTrashLines" size="xs" rounded="full" title="Remove Message"
 					@click="handleRemove" />
 			</div>
@@ -33,15 +34,19 @@
 			]">
 				<div class="flex items-start space-x-4">
 					<div v-if="message.isPending" class="mt-1 flex-shrink-0">
-						<div class="h-4 w-4 border-2 border-primary border-t-transparent rounded-[4px] animate-spin"></div>
+						<div class="h-4 w-4 border-2 border-primary border-t-transparent rounded-[4px] animate-spin">
+						</div>
 					</div>
-						<div class="flex flex-col gap-1 w-full min-w-0">
+					<div class="flex flex-col gap-1 w-full min-w-0">
 						<div class="flex flex-col gap-0.5">
-							<div class="flex items-center gap-2 mb-1" v-if="message.isPending && videoStore.isBackgroundProcessingActive && isPipelineWaiting">
+							<div class="flex items-center gap-2 mb-1"
+								v-if="message.isPending && videoStore.isBackgroundProcessingActive && isPipelineWaiting">
 								<div class="flex flex-wrap gap-1">
-									<span v-for="task in videoStore.activeBackgroundTasks" :key="task.id" 
+									<span v-for="task in videoStore.activeBackgroundTasks" :key="task.id"
 										class="text-[9px] font-medium bg-blue-50 dark:bg-blue-500/10 text-blue-600 dark:text-blue-400 px-1.5 py-0.5 rounded flex items-center gap-1 border border-blue-200 dark:border-blue-500/20">
-										<div class="h-1.5 w-1.5 border-[1.5px] border-current border-t-transparent rounded-full animate-spin"></div>
+										<div
+											class="h-1.5 w-1.5 border-[1.5px] border-current border-t-transparent rounded-full animate-spin">
+										</div>
 										{{ task.name }}
 									</span>
 								</div>
@@ -49,7 +54,7 @@
 
 							<div class="prose prose-sm max-w-none dark:prose-invert prose-p:leading-relaxed prose-p:my-0.5 prose-pre:bg-zinc-800 prose-pre:rounded-lg prose-pre:text-zinc-100 prose-headings:font-heading"
 								v-html="renderedContent"></div>
-							
+
 							<!-- Meta/Status Row -->
 							<div v-if="!message.isPending && (message.role === MessageRole.AI || (message.role === MessageRole.User && (hasOriginalVideo || referencedVersion)))"
 								class="flex items-center justify-end gap-2 pt-0.5 opacity-60 hover:opacity-100 transition-opacity">
@@ -107,14 +112,13 @@
 		</div>
 
 		<!-- Edit Modal -->
-		<Modal v-model="isModalOpen" title="Edit Message" size="xl" :custom-class="{ panel: '!h-[80vh] flex flex-col' }" @close="isModalOpen = false">
+		<Modal v-model="isModalOpen" title="Edit Message" size="xl" :custom-class="{ panel: '!h-[80vh] flex flex-col' }"
+			@close="isModalOpen = false">
+
 			<div class="flex flex-col gap-4 h-full overflow-hidden">
 				<div class="flex-1 overflow-hidden">
-					<TextArea
-						v-model="editText"
-						placeholder="Enter your message..."
-						class="h-full font-sans text-base custom-textarea-full"
-					/>
+					<TextArea v-model="editText" placeholder="Enter your message..."
+						class="h-full font-sans text-base custom-textarea-full" />
 				</div>
 				<div class="flex justify-end gap-3 mt-2">
 					<Button variant="outline" @click="isModalOpen = false">Cancel</Button>
@@ -159,7 +163,7 @@ const handleSaveEdit = async () => {
 		isModalOpen.value = false
 		return
 	}
-	
+
 	const success = await videoStore.updateMessageContent(props.message.id, editText.value)
 	if (success) {
 		isModalOpen.value = false
diff --git a/src/renderer/src/components/graph/ConversationNode.vue b/src/renderer/src/components/graph/ConversationNode.vue
index 5abca0a..7e9f9cb 100644
--- a/src/renderer/src/components/graph/ConversationNode.vue
+++ b/src/renderer/src/components/graph/ConversationNode.vue
@@ -3,7 +3,8 @@
     :class="[isResizing ? '' : 'glass-card-hover transition-all duration-500']"
     :style="{ width: nodeWidth + 'px', maxWidth: '800px' }">
     <!-- Resize Handle -->
-    <div class="absolute top-0 right-0 w-1.5 h-full cursor-ew-resize hover:bg-primary/40 transition-colors z-[60] opacity-0 group-hover:opacity-100"
+    <div
+      class="absolute top-0 right-0 w-1.5 h-full cursor-ew-resize hover:bg-primary/40 transition-colors z-[60] opacity-0 group-hover:opacity-100"
       @mousedown.stop.prevent="startResizing"></div>
 
     <Handle type="target" :position="Position.Top"
@@ -43,13 +44,14 @@
         class="flex flex-col space-y-1 animate-in fade-in slide-in-from-bottom-2 duration-300"
         :class="msg.role === 'user' ? 'items-end' : 'items-start'">
 
-        <div class="flex items-center space-x-2 px-1">
-          <span class="text-[9px] uppercase font-black tracking-widest text-zinc-500 dark:text-zinc-500">{{ msg.role
-          }}</span>
+        <div class="flex items-center gap-2 px-1" :class="{ 'flex-row-reverse': msg.role !== 'user' }">
+
+
           <div class="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
-            <div v-if="msg.role === 'user'" @click="videoStore.retryMessage(msg.id)"
+            <div v-if="msg.role === 'user'" @click="confirmRetry(msg.id)"
               class="text-[9px] font-bold text-blue-500 hover:underline cursor-pointer uppercase">
-              Retry</div>
+              Retry
+            </div>
             <div v-if="msg.role === 'user' && editingMessageId !== msg.id" @click="startEditing(msg)"
               class="text-[9px] font-bold text-zinc-400 hover:text-primary cursor-pointer uppercase">
               Edit</div>
@@ -57,6 +59,12 @@
               class="text-[9px] font-bold text-zinc-400 hover:text-red-500 cursor-pointer uppercase">
               Remove</div>
           </div>
+
+          <div class="flex items-center">
+            <span class="text-[9px] uppercase font-black tracking-widest text-zinc-500 dark:text-zinc-500">
+              {{ msg.role }}
+            </span>
+          </div>
         </div>
 
         <div
@@ -155,20 +163,25 @@
       class="w-3 h-3 bg-blue-500 border-2 border-white dark:border-zinc-800" />
 
     <!-- Edit Modal -->
-    <Modal v-model="isModalOpen" title="Edit Message" size="xl" :custom-class="{ panel: '!h-[80vh] flex flex-col' }" @close="cancelEdit">
-      <div class="flex flex-col gap-4 h-full overflow-hidden">
-        <div class="flex-1 overflow-hidden">
-          <TextArea
-            v-model="editText"
-            placeholder="Edit message..."
-            class="h-full font-sans text-base custom-textarea-full"
-          />
+    <Modal v-model="isModalOpen" title="Edit Message" size="xl" @close="cancelEdit">
+      <!-- Suppress default trigger as we use custom triggers in parents -->
+      <template #trigger><span class="hidden"></span></template>
+
+      <template #default>
+        <div class="flex flex-col gap-4 overflow-hidden">
+          <div class="flex-1 overflow-hidden">
+            <TextArea v-model="editText" placeholder="Edit message..."
+              class="h-full font-sans text-base custom-textarea-full" />
+          </div>
         </div>
+      </template>
+
+      <template #footer>
         <div class="flex justify-end gap-3 mt-2 flex-shrink-0">
-          <Button variant="outline" @click="cancelEdit">Cancel</Button>
-          <Button variant="primary" @click="saveEdit">Save Changes</Button>
+          <Button outline @click="cancelEdit">Cancel</Button>
+          <Button color="primary" @click="saveEdit">Save Changes</Button>
         </div>
-      </div>
+      </template>
     </Modal>
   </div>
 </template>
@@ -245,13 +258,29 @@ const cancelEdit = () => {
 const saveEdit = async () => {
   if (!editingMessageId.value) return
   if (editText.value.trim() === '') return
-  
+
   const success = await videoStore.updateMessageContent(editingMessageId.value, editText.value)
   if (success) {
     cancelEdit()
   }
 }
 
+const confirmRetry = async (messageId: string) => {
+  const confirmed = await (window as any).api.showConfirmation({
+    title: 'Retry Generation',
+    message: 'Are you sure you want to retry?',
+    detail: 'All subsequent AI responses in this branch will be removed and the generation will restart from this message.',
+    type: 'question',
+    buttons: ['Cancel', 'Retry'],
+    defaultId: 1,
+    cancelId: 0
+  })
+
+  if (confirmed === 1) {
+    await videoStore.retryMessage(messageId)
+  }
+}
+
 const removeMessage = async (messageId: string) => {
   const confirmed = await (window as any).api.showConfirmation({
     title: 'Remove Message',
@@ -262,7 +291,7 @@ const removeMessage = async (messageId: string) => {
     defaultId: 1,
     cancelId: 0
   })
-  
+
   if (confirmed === 1) {
     await videoStore.removeSingleMessage(messageId)
   }