From 225c32978db86e58662114e228f26ad43ac5918a Mon Sep 17 00:00:00 2001
From: Navid Shad <navidshad72@gmail.com>
Date: Fri, 10 Apr 2026 17:42:27 +0300
Subject: [PATCH 1/7] feat: add image attachment preview functionality with
 full-screen modal in ConversationNode #86ex65mr3

---
 .../src/components/graph/ConversationNode.vue | 40 +++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/src/renderer/src/components/graph/ConversationNode.vue b/src/renderer/src/components/graph/ConversationNode.vue
index 3b3c1d7..61d08a6 100644
--- a/src/renderer/src/components/graph/ConversationNode.vue
+++ b/src/renderer/src/components/graph/ConversationNode.vue
@@ -103,6 +103,22 @@
               :class="msg.role === 'user' ? 'prose-invert text-white' : 'dark:prose-invert'"></div>
           </template>
 
+          <!-- Attached Images -->
+          <div v-if="msg.attachedImages && msg.attachedImages.length > 0" class="mt-2 mb-1 flex flex-wrap gap-1.5">
+            <div v-for="(img, idx) in msg.attachedImages" :key="idx"
+              class="relative w-10 h-10 rounded-lg overflow-hidden group/img cursor-pointer transition-all duration-300 hover:scale-[1.1] shadow-sm border border-black/5 dark:border-white/10"
+              @click="openPreview(img)">
+              <img :src="mediaUrl(img)" class="w-full h-full object-cover" />
+              <div
+                class="absolute inset-0 bg-black/20 opacity-0 group-hover/img:opacity-100 transition-opacity flex items-center justify-center">
+                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"></path>
+                </svg>
+              </div>
+            </div>
+          </div>
+
           <!-- Files -->
           <div v-if="msg.files && msg.files.filter((f: any) => f.type !== 'original').length > 0"
             class="mt-3 space-y-2">
@@ -183,6 +199,22 @@
         </div>
       </template>
     </Modal>
+
+    <!-- Full Screen Modal -->
+    <Teleport to="body">
+      <div v-if="isFullScreen"
+        class="fixed inset-0 z-[9999] bg-black/95 flex flex-col items-center justify-center p-8 backdrop-blur-2xl animate-in fade-in duration-300"
+        @click="isFullScreen = false">
+        <button @click="isFullScreen = false"
+          class="absolute top-8 right-8 p-3 bg-white/10 hover:bg-white/20 rounded-full text-white transition-all active:scale-90 z-50">
+          <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+          </svg>
+        </button>
+        <img :src="fullScreenImageUrl"
+          class="max-w-full max-h-full rounded-2xl shadow-2xl ring-1 ring-white/20 object-contain" @click.stop />
+      </div>
+    </Teleport>
   </div>
 </template>
 
@@ -250,6 +282,14 @@ const editingMessageId = ref<string | null>(null)
 const editText = ref('')
 const isModalOpen = ref(false)
 
+const isFullScreen = ref(false)
+const fullScreenImageUrl = ref('')
+
+const openPreview = (url: string) => {
+  fullScreenImageUrl.value = mediaUrl(url)
+  isFullScreen.value = true
+}
+
 const startEditing = (msg: any) => {
   editingMessageId.value = msg.id
   editText.value = msg.content

From f2c6a701ac400a39eaa88abe46cb6ad6190cec74 Mon Sep 17 00:00:00 2001
From: Navid Shad <navidshad72@gmail.com>
Date: Fri, 10 Apr 2026 17:46:34 +0300
Subject: [PATCH 2/7] refactor: update VueFlow configuration and improve code
 formatting in GraphChatPage

---
 src/renderer/src/pages/GraphChatPage.vue | 279 ++++++++++++-----------
 1 file changed, 147 insertions(+), 132 deletions(-)

diff --git a/src/renderer/src/pages/GraphChatPage.vue b/src/renderer/src/pages/GraphChatPage.vue
index d18daf2..9b50685 100644
--- a/src/renderer/src/pages/GraphChatPage.vue
+++ b/src/renderer/src/pages/GraphChatPage.vue
@@ -1,14 +1,23 @@
 <template>
   <div class="h-full w-full flex flex-col relative bg-zinc-50 dark:bg-zinc-950 overflow-hidden">
     <!-- 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-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="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-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 @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 min-w-[200px] max-w-[50%]">
+        <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>
 
@@ -16,36 +25,41 @@
         <div v-if="totalCost > 0" class="h-6 w-px bg-zinc-200 dark:bg-zinc-800 mx-1 flex-shrink-0"></div>
 
         <!-- Project Cost (Left Position) -->
-        <div v-if="totalCost > 0" class="flex items-center px-3 py-1.5 bg-zinc-100 dark:bg-zinc-900/40 rounded-xl border border-zinc-200 dark:border-zinc-800/40 transition-all hover:border-green-500/30 group flex-shrink-0">
+        <div v-if="totalCost > 0"
+          class="flex items-center px-3 py-1.5 bg-zinc-100 dark:bg-zinc-900/40 rounded-xl border border-zinc-200 dark:border-zinc-800/40 transition-all hover:border-green-500/30 group flex-shrink-0">
           <div class="flex flex-col items-start leading-none gap-0.5">
-             <span class="text-[8px] font-black uppercase tracking-widest text-zinc-500 group-hover:text-green-500 transition-colors leading-none">Project Cost</span>
-             <span class="text-xs font-mono font-bold text-zinc-900 dark:text-zinc-100 italic transition-transform group-hover:scale-105 leading-none">${{ totalCost.toFixed(4) }}</span>
+            <span
+              class="text-[8px] font-black uppercase tracking-widest text-zinc-500 group-hover:text-green-500 transition-colors leading-none">Project
+              Cost</span>
+            <span
+              class="text-xs font-mono font-bold text-zinc-900 dark:text-zinc-100 italic transition-transform group-hover:scale-105 leading-none">${{
+                totalCost.toFixed(4) }}</span>
           </div>
           <div class="ml-3 p-1 bg-green-500/10 rounded-lg group-hover:bg-green-500/20 transition-colors">
-            <svg class="w-3.5 h-3.5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+            <svg class="w-3.5 h-3.5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
+              </path>
+            </svg>
           </div>
         </div>
       </div>
 
       <!-- Right Action Area (Clear for global App icons) -->
       <div class="flex items-center justify-end min-w-[120px]">
-         <!-- Space reserved for App.vue absolute elements -->
+        <!-- Space reserved for App.vue absolute elements -->
       </div>
     </div>
-    
+
     <div class="flex-1 w-full relative">
-      <VueFlow 
-        :nodes="graphStore.nodes" 
-        :edges="graphStore.edges" 
-        class="vue-flow-custom" 
-        @pane-ready="onPaneReady"
-        @node-drag-stop="onNodeDragStop"
-      >
+      <VueFlow :nodes="graphStore.nodes" :edges="graphStore.edges" class="vue-flow-custom" @pane-ready="onPaneReady"
+        @node-drag-stop="onNodeDragStop" :min-zoom="0.01" :max-zoom="4">
         <Background pattern-color="#888" :gap="20" />
         <Controls />
-        
+
         <template #node-conversation="props">
-          <ConversationNode v-bind="props" @node-resize-stop="videoStore.updateNodeMetadata(props.id, { width: $event })" />
+          <ConversationNode v-bind="props"
+            @node-resize-stop="videoStore.updateNodeMetadata(props.id, { width: $event })" />
         </template>
         <template #node-media="props">
           <MediaNode v-bind="props" />
@@ -127,11 +141,11 @@ watch([() => videoStore.messages, () => videoStore.currentThread?.nodePositions]
 
   const newNodes: any[] = []
   const newEdges: any[] = []
-  
+
   // 1. Pre-process mapping
   const childMap: Record<string, string[]> = { 'root-media': [] }
   const messageLookup: Record<string, any> = {}
-  
+
   messages.forEach(m => {
     messageLookup[m.id] = m
     const pId = m.editRefId || 'root-media'
@@ -149,8 +163,8 @@ watch([() => videoStore.messages, () => videoStore.currentThread?.nodePositions]
   // Recursive strand building
   const buildStrands = (pId: string) => {
     const children = childMap[pId] || []
-    
-      children.forEach((cId) => {
+
+    children.forEach((cId) => {
       if (processedMessageIds.has(cId)) return
 
       const msg = messageLookup[cId]
@@ -167,24 +181,24 @@ watch([() => videoStore.messages, () => videoStore.currentThread?.nodePositions]
         // It's a text message strand
         const strand: string[] = [cId]
         processedMessageIds.add(cId)
-        
+
         let currentId = cId
         while (true) {
           const nextChildren = childMap[currentId] || []
           if (nextChildren.length !== 1) break
-          
+
           const nextId = nextChildren[0]
           const nextMsg = messageLookup[nextId]
           const nextHasRealFiles = nextMsg.files && nextMsg.files.filter((f: any) => f.type !== 'original').length > 0
           const nextIsResult = !!(nextHasRealFiles || (nextMsg.timeline && nextMsg.timeline.length > 0))
-          
+
           if (nextIsResult) break
-          
+
           strand.push(nextId)
           processedMessageIds.add(nextId)
           currentId = nextId
         }
-        
+
         strandGroups.push({ id: strand[0], messageIds: strand, parentId: pId, isResult: false })
         buildStrands(currentId)
       }
@@ -203,86 +217,86 @@ watch([() => videoStore.messages, () => videoStore.currentThread?.nodePositions]
 
   // 2. Position Nodes
   // Initialize from saved positions if available
-  const nodePositions: Record<string, {x: number, y: number}> = { 
-    'root-media': videoStore.currentThread?.nodePositions?.['root-media'] || { x: 0, y: 0 } 
+  const nodePositions: Record<string, { x: number, y: number }> = {
+    'root-media': videoStore.currentThread?.nodePositions?.['root-media'] || { x: 0, y: 0 }
   }
-  
+
   // Root Media Node (Always branching)
   const isImageThread = videoStore.currentThread?.type === 'image'
-  
+
   newNodes.push({
     id: 'root-media',
     type: isImageThread ? 'image-collection' : 'media',
     position: nodePositions['root-media'],
-    data: { 
-      filename: videoStore.currentVideoName, 
+    data: {
+      filename: videoStore.currentVideoName,
       videoPath: videoStore.currentVideoPath,
       onSubmit: async (val: string, attachedImages?: string[]) => {
-         const newMsgId = await videoStore.addMessage(val, MessageRole.User, undefined, attachedImages)
-         if (newMsgId && videoStore.currentThreadId) {
-           await videoStore.startProcessing(videoStore.currentThreadId, newMsgId)
-         }
+        const newMsgId = await videoStore.addMessage(val, MessageRole.User, undefined, attachedImages)
+        if (newMsgId && videoStore.currentThreadId) {
+          await videoStore.startProcessing(videoStore.currentThreadId, newMsgId)
+        }
       }
     }
   })
 
-    // Helper to estimate node height for layout calculations
-    const getEstimatedHeight = (s: any) => {
-      if (s.isResult) {
-         const m = messageLookup[s.id]
-         if (m?.isPending) return 200
-         return 500 // Typical result node height
-      }
-      
-      let h = 80 // Base header + padding
-      s.messageIds.forEach((mId: string) => {
-         const m = messageLookup[mId]
-         const text = m.content || ""
-         const lines = Math.max(1, Math.ceil(text.length / 45))
-         h += (lines * 24) + 60
-         if (m.files?.length) h += m.files.length * 160
-      })
-      const lastId = s.messageIds[s.messageIds.length-1]
-      const hasInput = (childMap[lastId] || []).length === 0
-      if (hasInput) h += 100
-      return h
+  // Helper to estimate node height for layout calculations
+  const getEstimatedHeight = (s: any) => {
+    if (s.isResult) {
+      const m = messageLookup[s.id]
+      if (m?.isPending) return 200
+      return 500 // Typical result node height
     }
 
-    const strandHeights: Record<string, number> = { 'root-media': isImageThread ? 300 : 350 }
-
-    // Layout strands
-    strandGroups.forEach((strand) => {
-      const parentNodeId = msgToNodeId[strand.parentId] || strand.parentId
-      const parentPos = nodePositions[parentNodeId] || { x: 0, y: 0 }
-      const parentHeight = strandHeights[parentNodeId] || 400
-      
-      // IF we have a saved position, USE IT. Otherwise calculate.
-      if (videoStore.currentThread?.nodePositions?.[strand.id]) {
-        nodePositions[strand.id] = videoStore.currentThread.nodePositions[strand.id]
+    let h = 80 // Base header + padding
+    s.messageIds.forEach((mId: string) => {
+      const m = messageLookup[mId]
+      const text = m.content || ""
+      const lines = Math.max(1, Math.ceil(text.length / 45))
+      h += (lines * 24) + 60
+      if (m.files?.length) h += m.files.length * 160
+    })
+    const lastId = s.messageIds[s.messageIds.length - 1]
+    const hasInput = (childMap[lastId] || []).length === 0
+    if (hasInput) h += 100
+    return h
+  }
+
+  const strandHeights: Record<string, number> = { 'root-media': isImageThread ? 300 : 350 }
+
+  // Layout strands
+  strandGroups.forEach((strand) => {
+    const parentNodeId = msgToNodeId[strand.parentId] || strand.parentId
+    const parentPos = nodePositions[parentNodeId] || { x: 0, y: 0 }
+    const parentHeight = strandHeights[parentNodeId] || 400
+
+    // IF we have a saved position, USE IT. Otherwise calculate.
+    if (videoStore.currentThread?.nodePositions?.[strand.id]) {
+      nodePositions[strand.id] = videoStore.currentThread.nodePositions[strand.id]
+    } else {
+      const siblings = strandGroups.filter(s => s.parentId === strand.parentId)
+      const index = siblings.indexOf(strand)
+
+      let x = parentPos.x
+      let y = parentPos.y
+
+      if (strand.parentId === 'root-media') {
+        // Media -> Horizontally offset branches
+        x = parentPos.x + H_SPACING
+        y = parentPos.y + (index * 600) // Keep horizontal branches separated vertically
       } else {
-        const siblings = strandGroups.filter(s => s.parentId === strand.parentId)
-        const index = siblings.indexOf(strand)
-
-        let x = parentPos.x
-        let y = parentPos.y
-        
-        if (strand.parentId === 'root-media') {
-           // Media -> Horizontally offset branches
-           x = parentPos.x + H_SPACING
-           y = parentPos.y + (index * 600) // Keep horizontal branches separated vertically
+        // Sequential children vertical, branches horizontal
+        if (index === 0) {
+          y = parentPos.y + parentHeight + MIN_V_GAP
         } else {
-           // Sequential children vertical, branches horizontal
-           if (index === 0) {
-             y = parentPos.y + parentHeight + MIN_V_GAP
-           } else {
-             x = parentPos.x + (H_SPACING * index)
-           }
+          x = parentPos.x + (H_SPACING * index)
         }
-        nodePositions[strand.id] = { x, y }
       }
-      
-      // Store height for children positioning
-      strandHeights[strand.id] = getEstimatedHeight(strand)
+      nodePositions[strand.id] = { x, y }
+    }
+
+    // Store height for children positioning
+    strandHeights[strand.id] = getEstimatedHeight(strand)
 
     if (strand.isResult) {
       const msg = messageLookup[strand.id]
@@ -291,23 +305,23 @@ watch([() => videoStore.messages, () => videoStore.currentThread?.nodePositions]
 
       if (msg.isPending) {
         nodeType = 'task'
-        data = { 
-          type: 'processing', 
-          status: 'running', 
-          progress: null, 
-          steps: [{name: msg.content || 'Processing...', status: 'active'}], 
+        data = {
+          type: 'processing',
+          status: 'running',
+          progress: null,
+          steps: [{ name: msg.content || 'Processing...', status: 'active' }],
           onDelete: async () => {
-             const confirmed = await (window as any).api.showConfirmation({
-               title: 'Delete Task Node',
-               message: 'Are you sure you want to delete this running task and all its branches?',
-               type: 'warning'
-             })
-             if (confirmed === 1) {
-               await videoStore.removeMessageBranch(strand.id)
-             }
+            const confirmed = await (window as any).api.showConfirmation({
+              title: 'Delete Task Node',
+              message: 'Are you sure you want to delete this running task and all its branches?',
+              type: 'warning'
+            })
+            if (confirmed === 1) {
+              await videoStore.removeMessageBranch(strand.id)
+            }
           },
           onStop: async () => {
-             await videoStore.abortProcessing(strand.id)
+            await videoStore.abortProcessing(strand.id)
           }
         }
       } else {
@@ -318,28 +332,28 @@ watch([() => videoStore.messages, () => videoStore.currentThread?.nodePositions]
         else if (type === 'summary' || type === 'cover') nodeType = 'summary'
         else nodeType = 'summary' // Default fallback
 
-        data = { 
+        data = {
           id: msg.id,
-          type, 
-          content: msg.content, 
-          files: msg.files, 
+          type,
+          content: msg.content,
+          files: msg.files,
           timeline: msg.timeline,
           version: msg.version,
           cost: msg.cost,
           onDelete: async () => {
-             const confirmed = await (window as any).api.showConfirmation({
-               title: 'Delete Node',
-               message: 'Are you sure you want to delete this result and all its branches?',
-               type: 'warning'
-             })
-             if (confirmed === 1) {
-               await videoStore.removeMessageBranch(strand.id)
-             }
+            const confirmed = await (window as any).api.showConfirmation({
+              title: 'Delete Node',
+              message: 'Are you sure you want to delete this result and all its branches?',
+              type: 'warning'
+            })
+            if (confirmed === 1) {
+              await videoStore.removeMessageBranch(strand.id)
+            }
           },
           onSubmit: async (val: string, attachedImages?: string[]) => {
             const newMsgId = await videoStore.addMessage(val, MessageRole.User, strand.id, attachedImages)
             if (newMsgId && videoStore.currentThreadId) {
-               await videoStore.startProcessing(videoStore.currentThreadId, newMsgId)
+              await videoStore.startProcessing(videoStore.currentThreadId, newMsgId)
             }
           }
         }
@@ -347,7 +361,7 @@ watch([() => videoStore.messages, () => videoStore.currentThread?.nodePositions]
       newNodes.push({ id: strand.id, type: nodeType, position: nodePositions[strand.id], data })
     } else {
       // Conversation
-      const lastId = strand.messageIds[strand.messageIds.length-1]
+      const lastId = strand.messageIds[strand.messageIds.length - 1]
       newNodes.push({
         id: strand.id,
         type: 'conversation',
@@ -357,28 +371,28 @@ watch([() => videoStore.messages, () => videoStore.currentThread?.nodePositions]
           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',
-               message: 'Are you sure you want to delete this conversation and all its branches?',
-               type: 'warning'
-             })
-             if (confirmed === 1) {
-               await videoStore.removeMessageBranch(strand.id)
-             }
+            const confirmed = await (window as any).api.showConfirmation({
+              title: 'Delete Node',
+              message: 'Are you sure you want to delete this conversation and all its branches?',
+              type: 'warning'
+            })
+            if (confirmed === 1) {
+              await videoStore.removeMessageBranch(strand.id)
+            }
           },
           onSubmit: async (val: string, attachedImages?: string[]) => {
             const newMsgId = await videoStore.addMessage(val, MessageRole.User, lastId, attachedImages)
             if (newMsgId && videoStore.currentThreadId) {
-               await videoStore.startProcessing(videoStore.currentThreadId, newMsgId)
+              await videoStore.startProcessing(videoStore.currentThreadId, newMsgId)
             }
           }
         }
       })
     }
 
-    newEdges.push({ 
-      id: `e-${parentNodeId}-${strand.id}`, 
-      source: parentNodeId, 
+    newEdges.push({
+      id: `e-${parentNodeId}-${strand.id}`,
+      source: parentNodeId,
       target: strand.id,
       animated: strand.isResult && messageLookup[strand.id].isPending
     })
@@ -390,7 +404,7 @@ watch([() => videoStore.messages, () => videoStore.currentThread?.nodePositions]
 
 onMounted(async () => {
   const videoId = route.params.id as string || 'default'
-  
+
   if (videoId !== 'default') {
     await videoStore.selectThread(videoId)
   }
@@ -401,6 +415,7 @@ onMounted(async () => {
 .vue-flow-custom {
   --vf-bg: transparent;
 }
+
 .vue-flow__node {
   border: none;
   background: transparent;

From fc181d4fba83d2a0b35bddd54f7b70a71defc26d Mon Sep 17 00:00:00 2001
From: Navid Shad <navidshad72@gmail.com>
Date: Fri, 10 Apr 2026 17:54:00 +0300
Subject: [PATCH 3/7] feat: persist node detail visibility state across graph
 sessions using store metadata

---
 src/renderer/src/components/graph/MediaNode.vue | 17 +++++++++++++++--
 .../src/components/graph/ThumbnailNode.vue      | 17 +++++++++++++++--
 src/renderer/src/components/graph/VideoNode.vue | 17 +++++++++++++++--
 src/renderer/src/pages/GraphChatPage.vue        |  8 +++++---
 4 files changed, 50 insertions(+), 9 deletions(-)

diff --git a/src/renderer/src/components/graph/MediaNode.vue b/src/renderer/src/components/graph/MediaNode.vue
index 14b6856..a6891ce 100644
--- a/src/renderer/src/components/graph/MediaNode.vue
+++ b/src/renderer/src/components/graph/MediaNode.vue
@@ -31,7 +31,7 @@
           <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"></path></svg>
         </button>
         <button 
-          @click="showDetails = !showDetails" 
+          @click="toggleDetails" 
           class="p-1.5 bg-black/50 backdrop-blur-md rounded-lg hover:bg-black/80 transition-all"
           :class="showDetails ? 'text-primary-light' : 'text-white'"
           title="Toggle Metadata"
@@ -120,11 +120,24 @@ import { useVideoStore } from '../../stores/videoStore'
 import BaseMessageInput from '../chat/BaseMessageInput.vue'
 
 const props = defineProps<{ data: any }>()
+const emit = defineEmits(['toggle-details'])
 const videoStore = useVideoStore()
 const input = ref('')
 const isFullScreen = ref(false)
 const isPlaying = ref(false)
-const showDetails = ref(false)
+const showDetails = ref(props.data.showDetails || false)
+
+watch(() => props.data.showDetails, (newVal) => {
+  if (newVal !== undefined && newVal !== showDetails.value) {
+    showDetails.value = newVal
+  }
+})
+
+const toggleDetails = () => {
+  showDetails.value = !showDetails.value
+  emit('toggle-details', showDetails.value)
+}
+
 const videoRef = ref<HTMLVideoElement | null>(null)
 const attachedImages = ref<string[]>([])
 
diff --git a/src/renderer/src/components/graph/ThumbnailNode.vue b/src/renderer/src/components/graph/ThumbnailNode.vue
index 4850085..183e887 100644
--- a/src/renderer/src/components/graph/ThumbnailNode.vue
+++ b/src/renderer/src/components/graph/ThumbnailNode.vue
@@ -9,7 +9,7 @@
         <button v-if="mediaContentUrl" @click="isFullScreen = true" class="p-1.5 bg-black/50 backdrop-blur-md rounded-lg hover:bg-black/80 text-white transition-all shadow-lg" title="Full Screen View">
           <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"></path></svg>
         </button>
-        <button @click="showDetails = !showDetails" class="p-1.5 bg-black/50 backdrop-blur-md rounded-lg hover:bg-black/80 transition-all shadow-lg" :class="{'text-blue-400': showDetails, 'text-white': !showDetails}" title="Toggle Details">
+        <button @click="toggleDetails" class="p-1.5 bg-black/50 backdrop-blur-md rounded-lg hover:bg-black/80 transition-all shadow-lg" :class="{'text-blue-400': showDetails, 'text-white': !showDetails}" title="Toggle Details">
           <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
         </button>
         <button @click="() => handleSave()" class="p-1.5 bg-black/50 backdrop-blur-md rounded-lg hover:bg-black/80 text-white transition-all shadow-lg" title="Save Image">
@@ -186,8 +186,21 @@ import { renderMarkdown } from '../../utils/markdown'
 import { useVideoStore } from '../../stores/videoStore'
 
 const props = defineProps<{ data: any }>()
+const emit = defineEmits(['toggle-details'])
 const isFullScreen = ref(false)
-const showDetails = ref(false)
+const showDetails = ref(props.data.showDetails || false)
+
+watch(() => props.data.showDetails, (newVal) => {
+  if (newVal !== undefined && newVal !== showDetails.value) {
+    showDetails.value = newVal
+  }
+})
+
+const toggleDetails = () => {
+  showDetails.value = !showDetails.value
+  emit('toggle-details', showDetails.value)
+}
+
 const input = ref('')
 const attachedImages = ref<string[]>([])
 const metadata = ref<any>(null)
diff --git a/src/renderer/src/components/graph/VideoNode.vue b/src/renderer/src/components/graph/VideoNode.vue
index a7629b6..8de5160 100644
--- a/src/renderer/src/components/graph/VideoNode.vue
+++ b/src/renderer/src/components/graph/VideoNode.vue
@@ -9,7 +9,7 @@
         <button v-if="mediaContentUrl" @click="isFullScreen = true" class="p-1.5 bg-black/50 backdrop-blur-md rounded-lg hover:bg-black/80 text-white transition-all shadow-lg" title="Full Screen View">
           <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"></path></svg>
         </button>
-        <button @click="showDetails = !showDetails" class="p-1.5 bg-black/50 backdrop-blur-md rounded-lg hover:bg-black/80 transition-all shadow-lg" :class="{'text-blue-400': showDetails, 'text-white': !showDetails}" title="Toggle Details">
+        <button @click="toggleDetails" class="p-1.5 bg-black/50 backdrop-blur-md rounded-lg hover:bg-black/80 transition-all shadow-lg" :class="{'text-blue-400': showDetails, 'text-white': !showDetails}" title="Toggle Details">
           <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
         </button>
         <button @click="handleSave" class="p-1.5 bg-black/50 backdrop-blur-md rounded-lg hover:bg-black/80 text-white transition-all shadow-lg" title="Save Video">
@@ -146,10 +146,23 @@ import { Handle, Position } from '@vue-flow/core'
 import BaseMessageInput from '../chat/BaseMessageInput.vue'
 
 const props = defineProps<{ data: any }>()
+const emit = defineEmits(['toggle-details'])
 const videoRef = ref<HTMLVideoElement | null>(null)
 const isPlaying = ref(false)
 const isFullScreen = ref(false)
-const showDetails = ref(false)
+const showDetails = ref(props.data.showDetails || false)
+
+watch(() => props.data.showDetails, (newVal) => {
+  if (newVal !== undefined && newVal !== showDetails.value) {
+    showDetails.value = newVal
+  }
+})
+
+const toggleDetails = () => {
+  showDetails.value = !showDetails.value
+  emit('toggle-details', showDetails.value)
+}
+
 const input = ref('')
 const attachedImages = ref<string[]>([])
 const metadata = ref<any>(null)
diff --git a/src/renderer/src/pages/GraphChatPage.vue b/src/renderer/src/pages/GraphChatPage.vue
index 9b50685..3fdc7e8 100644
--- a/src/renderer/src/pages/GraphChatPage.vue
+++ b/src/renderer/src/pages/GraphChatPage.vue
@@ -62,16 +62,16 @@
             @node-resize-stop="videoStore.updateNodeMetadata(props.id, { width: $event })" />
         </template>
         <template #node-media="props">
-          <MediaNode v-bind="props" />
+          <MediaNode v-bind="props" @toggle-details="videoStore.updateNodeMetadata(props.id, { showDetails: $event })" />
         </template>
         <template #node-task="props">
           <TaskProgressNode v-bind="props" />
         </template>
         <template #node-video="props">
-          <VideoNode v-bind="props" />
+          <VideoNode v-bind="props" @toggle-details="videoStore.updateNodeMetadata(props.id, { showDetails: $event })" />
         </template>
         <template #node-thumbnail="props">
-          <ThumbnailNode v-bind="props" />
+          <ThumbnailNode v-bind="props" @toggle-details="videoStore.updateNodeMetadata(props.id, { showDetails: $event })" />
         </template>
         <template #node-summary="props">
           <SummaryNode v-bind="props" />
@@ -231,6 +231,7 @@ watch([() => videoStore.messages, () => videoStore.currentThread?.nodePositions]
     data: {
       filename: videoStore.currentVideoName,
       videoPath: videoStore.currentVideoPath,
+      showDetails: videoStore.currentThread?.nodePositions?.['root-media']?.showDetails || false,
       onSubmit: async (val: string, attachedImages?: string[]) => {
         const newMsgId = await videoStore.addMessage(val, MessageRole.User, undefined, attachedImages)
         if (newMsgId && videoStore.currentThreadId) {
@@ -340,6 +341,7 @@ watch([() => videoStore.messages, () => videoStore.currentThread?.nodePositions]
           timeline: msg.timeline,
           version: msg.version,
           cost: msg.cost,
+          showDetails: videoStore.currentThread?.nodePositions?.[strand.id]?.showDetails || false,
           onDelete: async () => {
             const confirmed = await (window as any).api.showConfirmation({
               title: 'Delete Node',

From 24569eee8cb387f6748034aaaddc4573a9768a76 Mon Sep 17 00:00:00 2001
From: Navid Shad <navidshad72@gmail.com>
Date: Fri, 10 Apr 2026 18:14:26 +0300
Subject: [PATCH 4/7] feat: add floating mode switcher to toggle between pan
 and selection tools in GraphChatPage

---
 src/renderer/src/pages/GraphChatPage.vue | 57 +++++++++++++++++++-----
 1 file changed, 47 insertions(+), 10 deletions(-)

diff --git a/src/renderer/src/pages/GraphChatPage.vue b/src/renderer/src/pages/GraphChatPage.vue
index 3fdc7e8..5eb51d5 100644
--- a/src/renderer/src/pages/GraphChatPage.vue
+++ b/src/renderer/src/pages/GraphChatPage.vue
@@ -16,8 +16,9 @@
             <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 min-w-[200px] max-w-[50%]">
+          class="text-xl font-bold font-heading text-zinc-900 dark:text-zinc-100 truncate tracking-tight min-w-[200px] max-w-[40%] ml-2">
           {{ videoStore.currentVideoName || 'Graph Task Manager' }}
         </h1>
 
@@ -45,15 +46,47 @@
         </div>
       </div>
 
-      <!-- Right Action Area (Clear for global App icons) -->
-      <div class="flex items-center justify-end min-w-[120px]">
-        <!-- Space reserved for App.vue absolute elements -->
+      <!-- Right Action Area -->
+      <div class="flex items-center justify-end gap-3 min-w-[20px] mr-12">
+        <!-- Space reserved for absolute elements -->
       </div>
     </div>
-
+    
     <div class="flex-1 w-full relative">
+      <!-- Compact Floating Mode Switcher -->
+      <div class="absolute left-6 top-6 z-30 flex items-center bg-zinc-100/80 dark:bg-zinc-900/80 backdrop-blur-md rounded-xl p-1 border border-zinc-200 dark:border-zinc-800 shadow-lg">
+        <button 
+          @click="isSelectMode = false"
+          title="Pan View"
+          class="flex items-center justify-center w-9 h-9 rounded-lg transition-all duration-300"
+          :class="!isSelectMode ? 'bg-white dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 shadow-sm ring-1 ring-zinc-200 dark:ring-zinc-700' : 'text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300 hover:bg-zinc-200/50 dark:hover:bg-zinc-800/50'"
+        >
+          <svg class="w-4.5 h-4.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5"></path>
+          </svg>
+        </button>
+        <div class="w-px h-4 bg-zinc-200 dark:border-zinc-800 mx-1"></div>
+        <button 
+          @click="isSelectMode = true"
+          title="Select Tool"
+          class="flex items-center justify-center w-9 h-9 rounded-lg transition-all duration-300"
+          :class="isSelectMode ? 'bg-primary text-white shadow-md shadow-primary/20 ring-1 ring-primary/20' : 'text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300 hover:bg-zinc-200/50 dark:hover:bg-zinc-800/50'"
+        >
+          <svg class="w-4.5 h-4.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <rect x="4" y="4" width="16" height="16" rx="2" stroke-width="2.5" stroke="currentColor" fill="none" stroke-dasharray="4 2"></rect>
+            <path d="M7 7h1v1H7zM16 7h1v1h-1zM7 16h1v1H7zM16 16h1v1h-1z" fill="currentColor"></path>
+          </svg>
+        </button>
+      </div>
+
       <VueFlow :nodes="graphStore.nodes" :edges="graphStore.edges" class="vue-flow-custom" @pane-ready="onPaneReady"
-        @node-drag-stop="onNodeDragStop" :min-zoom="0.01" :max-zoom="4">
+        @node-drag-stop="onNodeDragStop" :min-zoom="0.01" :max-zoom="4"
+        :pan-on-drag="!isSelectMode" 
+        :selection-key-code="isSelectMode ? true : 'Shift'" 
+        :pan-on-scroll="true"
+        :zoom-on-scroll="true"
+        :pan-on-scroll-mode="'all'"
+        :selection-mode="'partial'">
         <Background pattern-color="#888" :gap="20" />
         <Controls />
 
@@ -111,6 +144,9 @@ import ImageCollectionNode from '../components/graph/ImageCollectionNode.vue'
 
 import { useRoute, useRouter } from 'vue-router'
 import { MessageRole } from '@shared/types'
+import { ref } from 'vue'
+
+const isSelectMode = ref(false)
 
 const graphStore = useGraphStore()
 const taskStore = useTaskStore()
@@ -128,10 +164,11 @@ const onPaneReady = () => {
 }
 
 const onNodeDragStop = (event: any) => {
-  const { node } = event
-  const newPositions = {
-    [node.id]: node.position
-  }
+  const { nodes } = event
+  const newPositions = nodes.reduce((acc: any, node: any) => {
+    acc[node.id] = node.position
+    return acc
+  }, {})
   videoStore.updateNodePositions(newPositions)
 }
 

From 276c88f5cd5d48822dbcb8e800b02ddeda1802a6 Mon Sep 17 00:00:00 2001
From: Navid Shad <navidshad72@gmail.com>
Date: Fri, 10 Apr 2026 18:19:58 +0300
Subject: [PATCH 5/7] feat: implement graph layout engine and UI components for
 thread visualization

---
 .../src/components/graph/GraphHeader.vue      |  57 +++
 .../src/components/graph/GraphToolbar.vue     |  36 ++
 .../src/composables/useGraphLayout.ts         | 281 ++++++++++++++
 src/renderer/src/pages/GraphChatPage.vue      | 355 +-----------------
 4 files changed, 388 insertions(+), 341 deletions(-)
 create mode 100644 src/renderer/src/components/graph/GraphHeader.vue
 create mode 100644 src/renderer/src/components/graph/GraphToolbar.vue
 create mode 100644 src/renderer/src/composables/useGraphLayout.ts

diff --git a/src/renderer/src/components/graph/GraphHeader.vue b/src/renderer/src/components/graph/GraphHeader.vue
new file mode 100644
index 0000000..99580c2
--- /dev/null
+++ b/src/renderer/src/components/graph/GraphHeader.vue
@@ -0,0 +1,57 @@
+<template>
+  <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="$emit('back')"
+        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 min-w-[200px] max-w-[40%] ml-2">
+        {{ title || 'Graph Task Manager' }}
+      </h1>
+
+      <!-- Vertical Separator -->
+      <div v-if="totalCost > 0" class="h-6 w-px bg-zinc-200 dark:bg-zinc-800 mx-1 flex-shrink-0"></div>
+
+      <!-- Project Cost -->
+      <div v-if="totalCost > 0"
+        class="flex items-center px-3 py-1.5 bg-zinc-100 dark:bg-zinc-900/40 rounded-xl border border-zinc-200 dark:border-zinc-800/40 transition-all hover:border-green-500/30 group flex-shrink-0">
+        <div class="flex flex-col items-start leading-none gap-0.5">
+          <span
+            class="text-[8px] font-black uppercase tracking-widest text-zinc-500 group-hover:text-green-500 transition-colors leading-none">Project
+            Cost</span>
+          <span
+            class="text-xs font-mono font-bold text-zinc-900 dark:text-zinc-100 italic transition-transform group-hover:scale-105 leading-none">${{
+              totalCost.toFixed(4) }}</span>
+        </div>
+        <div class="ml-3 p-1 bg-green-500/10 rounded-lg group-hover:bg-green-500/20 transition-colors">
+          <svg class="w-3.5 h-3.5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+              d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
+            </path>
+          </svg>
+        </div>
+      </div>
+    </div>
+
+    <!-- Right Action Area -->
+    <div class="flex items-center justify-end gap-3 min-w-[20px] mr-12">
+      <slot name="actions" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  title?: string
+  totalCost: number
+}>()
+
+defineEmits<{
+  (e: 'back'): void
+}>()
+</script>
diff --git a/src/renderer/src/components/graph/GraphToolbar.vue b/src/renderer/src/components/graph/GraphToolbar.vue
new file mode 100644
index 0000000..8fb8b1b
--- /dev/null
+++ b/src/renderer/src/components/graph/GraphToolbar.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="absolute left-6 top-6 z-30 flex items-center bg-zinc-100/80 dark:bg-zinc-900/80 backdrop-blur-md rounded-xl p-1 border border-zinc-200 dark:border-zinc-800 shadow-lg">
+    <button 
+      @click="$emit('update:modelValue', false)"
+      title="Pan View"
+      class="flex items-center justify-center w-9 h-9 rounded-lg transition-all duration-300"
+      :class="!modelValue ? 'bg-white dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 shadow-sm ring-1 ring-zinc-200 dark:ring-zinc-700' : 'text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300 hover:bg-zinc-200/50 dark:hover:bg-zinc-800/50'"
+    >
+      <svg class="w-4.5 h-4.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5"></path>
+      </svg>
+    </button>
+    <div class="w-px h-4 bg-zinc-200 dark:border-zinc-800 mx-1"></div>
+    <button 
+      @click="$emit('update:modelValue', true)"
+      title="Select Tool"
+      class="flex items-center justify-center w-9 h-9 rounded-lg transition-all duration-300"
+      :class="modelValue ? 'bg-primary text-white shadow-md shadow-primary/20 ring-1 ring-primary/20' : 'text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300 hover:bg-zinc-200/50 dark:hover:bg-zinc-800/50'"
+    >
+      <svg class="w-4.5 h-4.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <rect x="4" y="4" width="16" height="16" rx="2" stroke-width="2.5" stroke="currentColor" fill="none" stroke-dasharray="4 2"></rect>
+        <path d="M7 7h1v1H7zM16 7h1v1h-1zM7 16h1v1H7zM16 16h1v1h-1z" fill="currentColor"></path>
+      </svg>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  modelValue: boolean
+}>()
+
+defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+}>()
+</script>
diff --git a/src/renderer/src/composables/useGraphLayout.ts b/src/renderer/src/composables/useGraphLayout.ts
new file mode 100644
index 0000000..2b17819
--- /dev/null
+++ b/src/renderer/src/composables/useGraphLayout.ts
@@ -0,0 +1,281 @@
+import { watch } from 'vue'
+import { MessageRole } from '@shared/types'
+
+export function useGraphLayout(videoStore: any, graphStore: any) {
+  const syncGraph = () => {
+    if (!videoStore.currentThreadId) return
+
+    const messages = videoStore.messages
+    const newNodes: any[] = []
+    const newEdges: any[] = []
+
+    // 1. Pre-process mapping
+    const childMap: Record<string, string[]> = { 'root-media': [] }
+    const messageLookup: Record<string, any> = {}
+
+    messages.forEach(m => {
+      messageLookup[m.id] = m
+      const pId = m.editRefId || 'root-media'
+      if (!childMap[pId]) childMap[pId] = []
+      childMap[pId].push(m.id)
+    })
+
+    // Layout Constants
+    const MIN_V_GAP = 150
+    const H_SPACING = 600
+
+    const strandGroups: Array<{ id: string, messageIds: string[], parentId: string, isResult: boolean }> = []
+    const processedMessageIds = new Set<string>()
+
+    // Recursive strand building
+    const buildStrands = (pId: string) => {
+      const children = childMap[pId] || []
+
+      children.forEach((cId) => {
+        if (processedMessageIds.has(cId)) return
+
+        const msg = messageLookup[cId]
+        // A "Result" is anything with real files, or timeline. (Pending text stays in conversation)
+        const hasRealFiles = msg.files && msg.files.filter((f: any) => f.type !== 'original').length > 0
+        const isResult = !!(hasRealFiles || (msg.timeline && msg.timeline.length > 0))
+
+        if (isResult) {
+          // Results are always their own node
+          strandGroups.push({ id: cId, messageIds: [cId], parentId: pId, isResult: true })
+          processedMessageIds.add(cId)
+          buildStrands(cId)
+        } else {
+          // It's a text message strand
+          const strand: string[] = [cId]
+          processedMessageIds.add(cId)
+
+          let currentId = cId
+          while (true) {
+            const nextChildren = childMap[currentId] || []
+            if (nextChildren.length !== 1) break
+
+            const nextId = nextChildren[0]
+            const nextMsg = messageLookup[nextId]
+            const nextHasRealFiles = nextMsg.files && nextMsg.files.filter((f: any) => f.type !== 'original').length > 0
+            const nextIsResult = !!(nextHasRealFiles || (nextMsg.timeline && nextMsg.timeline.length > 0))
+
+            if (nextIsResult) break
+
+            strand.push(nextId)
+            processedMessageIds.add(nextId)
+            currentId = nextId
+          }
+
+          strandGroups.push({ id: strand[0], messageIds: strand, parentId: pId, isResult: false })
+          buildStrands(currentId)
+        }
+      })
+    }
+
+    buildStrands('root-media')
+
+    // 1.5 Create Message-to-Node mapping
+    const msgToNodeId: Record<string, string> = { 'root-media': 'root-media' }
+    strandGroups.forEach(strand => {
+      strand.messageIds.forEach(mId => {
+        msgToNodeId[mId] = strand.id
+      })
+    })
+
+    // 2. Position Nodes
+    // Initialize from saved positions if available
+    const nodePositions: Record<string, { x: number, y: number }> = {
+      'root-media': videoStore.currentThread?.nodePositions?.['root-media'] || { x: 0, y: 0 }
+    }
+
+    // Root Media Node (Always branching)
+    const isImageThread = videoStore.currentThread?.type === 'image'
+
+    newNodes.push({
+      id: 'root-media',
+      type: isImageThread ? 'image-collection' : 'media',
+      position: nodePositions['root-media'],
+      data: {
+        filename: videoStore.currentVideoName,
+        videoPath: videoStore.currentVideoPath,
+        showDetails: videoStore.currentThread?.nodePositions?.['root-media']?.showDetails || false,
+        onSubmit: async (val: string, attachedImages?: string[]) => {
+          const newMsgId = await videoStore.addMessage(val, MessageRole.User, undefined, attachedImages)
+          if (newMsgId && videoStore.currentThreadId) {
+            await videoStore.startProcessing(videoStore.currentThreadId, newMsgId)
+          }
+        }
+      }
+    })
+
+    // Helper to estimate node height for layout calculations
+    const getEstimatedHeight = (s: any) => {
+      if (s.isResult) {
+        const m = messageLookup[s.id]
+        if (m?.isPending) return 200
+        return 500 // Typical result node height
+      }
+
+      let h = 80 // Base header + padding
+      s.messageIds.forEach((mId: string) => {
+        const m = messageLookup[mId]
+        const text = m.content || ""
+        const lines = Math.max(1, Math.ceil(text.length / 45))
+        h += (lines * 24) + 60
+        if (m.files?.length) h += m.files.length * 160
+      })
+      const lastId = s.messageIds[s.messageIds.length - 1]
+      const hasInput = (childMap[lastId] || []).length === 0
+      if (hasInput) h += 100
+      return h
+    }
+
+    const strandHeights: Record<string, number> = { 'root-media': isImageThread ? 300 : 350 }
+
+    // Layout strands
+    strandGroups.forEach((strand) => {
+      const parentNodeId = msgToNodeId[strand.parentId] || strand.parentId
+      const parentPos = nodePositions[parentNodeId] || { x: 0, y: 0 }
+      const parentHeight = strandHeights[parentNodeId] || 400
+
+      // IF we have a saved position, USE IT. Otherwise calculate.
+      if (videoStore.currentThread?.nodePositions?.[strand.id]) {
+        nodePositions[strand.id] = videoStore.currentThread.nodePositions[strand.id]
+      } else {
+        const siblings = strandGroups.filter(s => s.parentId === strand.parentId)
+        const index = siblings.indexOf(strand)
+
+        let x = parentPos.x
+        let y = parentPos.y
+
+        if (strand.parentId === 'root-media') {
+          // Media -> Horizontally offset branches
+          x = parentPos.x + H_SPACING
+          y = parentPos.y + (index * 600) // Keep horizontal branches separated vertically
+        } else {
+          // Sequential children vertical, branches horizontal
+          if (index === 0) {
+            y = parentPos.y + parentHeight + MIN_V_GAP
+          } else {
+            x = parentPos.x + (H_SPACING * index)
+          }
+        }
+        nodePositions[strand.id] = { x, y }
+      }
+
+      // Store height for children positioning
+      strandHeights[strand.id] = getEstimatedHeight(strand)
+
+      if (strand.isResult) {
+        const msg = messageLookup[strand.id]
+        let nodeType = 'message'
+        let data: any = { sender: msg.role, text: msg.content }
+
+        if (msg.isPending) {
+          nodeType = 'task'
+          data = {
+            type: 'processing',
+            status: 'running',
+            progress: null,
+            steps: [{ name: msg.content || 'Processing...', status: 'active' }],
+            onDelete: async () => {
+              const confirmed = await (window as any).api.showConfirmation({
+                title: 'Delete Task Node',
+                message: 'Are you sure you want to delete this running task and all its branches?',
+                type: 'warning'
+              })
+              if (confirmed === 1) {
+                await videoStore.removeMessageBranch(strand.id)
+              }
+            },
+            onStop: async () => {
+              await videoStore.abortProcessing(strand.id)
+            }
+          }
+        } else {
+          const type = msg.resultType || ((msg.files && msg.files.length > 0) ? 'video' : 'summary')
+          // Normalize nodeType to specialized components
+          if (type === 'video') nodeType = 'video'
+          else if (type === 'thumbnail' || type === 'generate-thumbnail' || type === 'image' || type === 'result-image') nodeType = 'thumbnail'
+          else if (type === 'summary' || type === 'cover') nodeType = 'summary'
+          else nodeType = 'summary' // Default fallback
+
+          data = {
+            id: msg.id,
+            type,
+            content: msg.content,
+            files: msg.files,
+            timeline: msg.timeline,
+            version: msg.version,
+            cost: msg.cost,
+            showDetails: videoStore.currentThread?.nodePositions?.[strand.id]?.showDetails || false,
+            onDelete: async () => {
+              const confirmed = await (window as any).api.showConfirmation({
+                title: 'Delete Node',
+                message: 'Are you sure you want to delete this result and all its branches?',
+                type: 'warning'
+              })
+              if (confirmed === 1) {
+                await videoStore.removeMessageBranch(strand.id)
+              }
+            },
+            onSubmit: async (val: string, attachedImages?: string[]) => {
+              const newMsgId = await videoStore.addMessage(val, MessageRole.User, strand.id, attachedImages)
+              if (newMsgId && videoStore.currentThreadId) {
+                await videoStore.startProcessing(videoStore.currentThreadId, newMsgId)
+              }
+            }
+          }
+        }
+        newNodes.push({ id: strand.id, type: nodeType, position: nodePositions[strand.id], data })
+      } else {
+        // Conversation
+        const lastId = strand.messageIds[strand.messageIds.length - 1]
+        newNodes.push({
+          id: strand.id,
+          type: 'conversation',
+          position: nodePositions[strand.id],
+          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',
+                message: 'Are you sure you want to delete this conversation and all its branches?',
+                type: 'warning'
+              })
+              if (confirmed === 1) {
+                await videoStore.removeMessageBranch(strand.id)
+              }
+            },
+            onSubmit: async (val: string, attachedImages?: string[]) => {
+              const newMsgId = await videoStore.addMessage(val, MessageRole.User, lastId, attachedImages)
+              if (newMsgId && videoStore.currentThreadId) {
+                await videoStore.startProcessing(videoStore.currentThreadId, newMsgId)
+              }
+            }
+          }
+        })
+      }
+
+      newEdges.push({
+        id: `e-${parentNodeId}-${strand.id}`,
+        source: parentNodeId,
+        target: strand.id,
+        animated: strand.isResult && messageLookup[strand.id].isPending
+      })
+    })
+
+    graphStore.setNodes(newNodes)
+    graphStore.setEdges(newEdges)
+  }
+
+  // Setup watcher
+  watch([() => videoStore.messages, () => videoStore.currentThread?.nodePositions], syncGraph, {
+    deep: true,
+    immediate: true
+  })
+
+  return { syncGraph }
+}
diff --git a/src/renderer/src/pages/GraphChatPage.vue b/src/renderer/src/pages/GraphChatPage.vue
index 5eb51d5..dafbf7c 100644
--- a/src/renderer/src/pages/GraphChatPage.vue
+++ b/src/renderer/src/pages/GraphChatPage.vue
@@ -7,77 +7,15 @@
     <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-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 min-w-[200px] max-w-[40%] ml-2">
-          {{ videoStore.currentVideoName || 'Graph Task Manager' }}
-        </h1>
-
-        <!-- Vertical Separator -->
-        <div v-if="totalCost > 0" class="h-6 w-px bg-zinc-200 dark:bg-zinc-800 mx-1 flex-shrink-0"></div>
 
-        <!-- Project Cost (Left Position) -->
-        <div v-if="totalCost > 0"
-          class="flex items-center px-3 py-1.5 bg-zinc-100 dark:bg-zinc-900/40 rounded-xl border border-zinc-200 dark:border-zinc-800/40 transition-all hover:border-green-500/30 group flex-shrink-0">
-          <div class="flex flex-col items-start leading-none gap-0.5">
-            <span
-              class="text-[8px] font-black uppercase tracking-widest text-zinc-500 group-hover:text-green-500 transition-colors leading-none">Project
-              Cost</span>
-            <span
-              class="text-xs font-mono font-bold text-zinc-900 dark:text-zinc-100 italic transition-transform group-hover:scale-105 leading-none">${{
-                totalCost.toFixed(4) }}</span>
-          </div>
-          <div class="ml-3 p-1 bg-green-500/10 rounded-lg group-hover:bg-green-500/20 transition-colors">
-            <svg class="w-3.5 h-3.5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
-              </path>
-            </svg>
-          </div>
-        </div>
-      </div>
-
-      <!-- Right Action Area -->
-      <div class="flex items-center justify-end gap-3 min-w-[20px] mr-12">
-        <!-- Space reserved for absolute elements -->
-      </div>
-    </div>
+    <GraphHeader 
+      :title="videoStore.currentVideoName" 
+      :total-cost="totalCost"
+      @back="router.push('/home')"
+    />
     
     <div class="flex-1 w-full relative">
-      <!-- Compact Floating Mode Switcher -->
-      <div class="absolute left-6 top-6 z-30 flex items-center bg-zinc-100/80 dark:bg-zinc-900/80 backdrop-blur-md rounded-xl p-1 border border-zinc-200 dark:border-zinc-800 shadow-lg">
-        <button 
-          @click="isSelectMode = false"
-          title="Pan View"
-          class="flex items-center justify-center w-9 h-9 rounded-lg transition-all duration-300"
-          :class="!isSelectMode ? 'bg-white dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 shadow-sm ring-1 ring-zinc-200 dark:ring-zinc-700' : 'text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300 hover:bg-zinc-200/50 dark:hover:bg-zinc-800/50'"
-        >
-          <svg class="w-4.5 h-4.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5"></path>
-          </svg>
-        </button>
-        <div class="w-px h-4 bg-zinc-200 dark:border-zinc-800 mx-1"></div>
-        <button 
-          @click="isSelectMode = true"
-          title="Select Tool"
-          class="flex items-center justify-center w-9 h-9 rounded-lg transition-all duration-300"
-          :class="isSelectMode ? 'bg-primary text-white shadow-md shadow-primary/20 ring-1 ring-primary/20' : 'text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300 hover:bg-zinc-200/50 dark:hover:bg-zinc-800/50'"
-        >
-          <svg class="w-4.5 h-4.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <rect x="4" y="4" width="16" height="16" rx="2" stroke-width="2.5" stroke="currentColor" fill="none" stroke-dasharray="4 2"></rect>
-            <path d="M7 7h1v1H7zM16 7h1v1h-1zM7 16h1v1H7zM16 16h1v1h-1z" fill="currentColor"></path>
-          </svg>
-        </button>
-      </div>
+      <GraphToolbar v-model="isSelectMode" />
 
       <VueFlow :nodes="graphStore.nodes" :edges="graphStore.edges" class="vue-flow-custom" @pane-ready="onPaneReady"
         @node-drag-stop="onNodeDragStop" :min-zoom="0.01" :max-zoom="4"
@@ -121,7 +59,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, watch, computed } from 'vue'
+import { onMounted, computed, ref } from 'vue'
 import { VueFlow, useVueFlow } from '@vue-flow/core'
 import { Background } from '@vue-flow/background'
 import { Controls } from '@vue-flow/controls'
@@ -132,6 +70,7 @@ import '@vue-flow/controls/dist/style.css'
 import { useGraphStore } from '../stores/graphStore'
 import { useTaskStore } from '../stores/taskStore'
 import { useVideoStore } from '../stores/videoStore'
+import { useRoute, useRouter } from 'vue-router'
 
 import ConversationNode from '../components/graph/ConversationNode.vue'
 import MediaNode from '../components/graph/MediaNode.vue'
@@ -142,9 +81,9 @@ import SummaryNode from '../components/graph/SummaryNode.vue'
 import ChatInputNode from '../components/graph/ChatInputNode.vue'
 import ImageCollectionNode from '../components/graph/ImageCollectionNode.vue'
 
-import { useRoute, useRouter } from 'vue-router'
-import { MessageRole } from '@shared/types'
-import { ref } from 'vue'
+import { useGraphLayout } from '../composables/useGraphLayout'
+import GraphHeader from '../components/graph/GraphHeader.vue'
+import GraphToolbar from '../components/graph/GraphToolbar.vue'
 
 const isSelectMode = ref(false)
 
@@ -155,6 +94,9 @@ const { fitView } = useVueFlow()
 const route = useRoute()
 const router = useRouter()
 
+// Use modular layout logic
+useGraphLayout(videoStore, graphStore)
+
 const totalCost = computed(() => {
   return videoStore.messages.reduce((acc, msg) => acc + (msg.cost || 0), 0)
 })
@@ -172,275 +114,6 @@ const onNodeDragStop = (event: any) => {
   videoStore.updateNodePositions(newPositions)
 }
 
-// Hydrate Graph from active real messages
-watch([() => videoStore.messages, () => videoStore.currentThread?.nodePositions], ([messages]) => {
-  if (!videoStore.currentThreadId) return
-
-  const newNodes: any[] = []
-  const newEdges: any[] = []
-
-  // 1. Pre-process mapping
-  const childMap: Record<string, string[]> = { 'root-media': [] }
-  const messageLookup: Record<string, any> = {}
-
-  messages.forEach(m => {
-    messageLookup[m.id] = m
-    const pId = m.editRefId || 'root-media'
-    if (!childMap[pId]) childMap[pId] = []
-    childMap[pId].push(m.id)
-  })
-
-  // Layout Constants
-  const MIN_V_GAP = 150
-  const H_SPACING = 600
-
-  const strandGroups: Array<{ id: string, messageIds: string[], parentId: string, isResult: boolean }> = []
-  const processedMessageIds = new Set<string>()
-
-  // Recursive strand building
-  const buildStrands = (pId: string) => {
-    const children = childMap[pId] || []
-
-    children.forEach((cId) => {
-      if (processedMessageIds.has(cId)) return
-
-      const msg = messageLookup[cId]
-      // A "Result" is anything with real files, or timeline. (Pending text stays in conversation)
-      const hasRealFiles = msg.files && msg.files.filter((f: any) => f.type !== 'original').length > 0
-      const isResult = !!(hasRealFiles || (msg.timeline && msg.timeline.length > 0))
-
-      if (isResult) {
-        // Results are always their own node
-        strandGroups.push({ id: cId, messageIds: [cId], parentId: pId, isResult: true })
-        processedMessageIds.add(cId)
-        buildStrands(cId)
-      } else {
-        // It's a text message strand
-        const strand: string[] = [cId]
-        processedMessageIds.add(cId)
-
-        let currentId = cId
-        while (true) {
-          const nextChildren = childMap[currentId] || []
-          if (nextChildren.length !== 1) break
-
-          const nextId = nextChildren[0]
-          const nextMsg = messageLookup[nextId]
-          const nextHasRealFiles = nextMsg.files && nextMsg.files.filter((f: any) => f.type !== 'original').length > 0
-          const nextIsResult = !!(nextHasRealFiles || (nextMsg.timeline && nextMsg.timeline.length > 0))
-
-          if (nextIsResult) break
-
-          strand.push(nextId)
-          processedMessageIds.add(nextId)
-          currentId = nextId
-        }
-
-        strandGroups.push({ id: strand[0], messageIds: strand, parentId: pId, isResult: false })
-        buildStrands(currentId)
-      }
-    })
-  }
-
-  buildStrands('root-media')
-
-  // 1.5 Create Message-to-Node mapping
-  const msgToNodeId: Record<string, string> = { 'root-media': 'root-media' }
-  strandGroups.forEach(strand => {
-    strand.messageIds.forEach(mId => {
-      msgToNodeId[mId] = strand.id
-    })
-  })
-
-  // 2. Position Nodes
-  // Initialize from saved positions if available
-  const nodePositions: Record<string, { x: number, y: number }> = {
-    'root-media': videoStore.currentThread?.nodePositions?.['root-media'] || { x: 0, y: 0 }
-  }
-
-  // Root Media Node (Always branching)
-  const isImageThread = videoStore.currentThread?.type === 'image'
-
-  newNodes.push({
-    id: 'root-media',
-    type: isImageThread ? 'image-collection' : 'media',
-    position: nodePositions['root-media'],
-    data: {
-      filename: videoStore.currentVideoName,
-      videoPath: videoStore.currentVideoPath,
-      showDetails: videoStore.currentThread?.nodePositions?.['root-media']?.showDetails || false,
-      onSubmit: async (val: string, attachedImages?: string[]) => {
-        const newMsgId = await videoStore.addMessage(val, MessageRole.User, undefined, attachedImages)
-        if (newMsgId && videoStore.currentThreadId) {
-          await videoStore.startProcessing(videoStore.currentThreadId, newMsgId)
-        }
-      }
-    }
-  })
-
-  // Helper to estimate node height for layout calculations
-  const getEstimatedHeight = (s: any) => {
-    if (s.isResult) {
-      const m = messageLookup[s.id]
-      if (m?.isPending) return 200
-      return 500 // Typical result node height
-    }
-
-    let h = 80 // Base header + padding
-    s.messageIds.forEach((mId: string) => {
-      const m = messageLookup[mId]
-      const text = m.content || ""
-      const lines = Math.max(1, Math.ceil(text.length / 45))
-      h += (lines * 24) + 60
-      if (m.files?.length) h += m.files.length * 160
-    })
-    const lastId = s.messageIds[s.messageIds.length - 1]
-    const hasInput = (childMap[lastId] || []).length === 0
-    if (hasInput) h += 100
-    return h
-  }
-
-  const strandHeights: Record<string, number> = { 'root-media': isImageThread ? 300 : 350 }
-
-  // Layout strands
-  strandGroups.forEach((strand) => {
-    const parentNodeId = msgToNodeId[strand.parentId] || strand.parentId
-    const parentPos = nodePositions[parentNodeId] || { x: 0, y: 0 }
-    const parentHeight = strandHeights[parentNodeId] || 400
-
-    // IF we have a saved position, USE IT. Otherwise calculate.
-    if (videoStore.currentThread?.nodePositions?.[strand.id]) {
-      nodePositions[strand.id] = videoStore.currentThread.nodePositions[strand.id]
-    } else {
-      const siblings = strandGroups.filter(s => s.parentId === strand.parentId)
-      const index = siblings.indexOf(strand)
-
-      let x = parentPos.x
-      let y = parentPos.y
-
-      if (strand.parentId === 'root-media') {
-        // Media -> Horizontally offset branches
-        x = parentPos.x + H_SPACING
-        y = parentPos.y + (index * 600) // Keep horizontal branches separated vertically
-      } else {
-        // Sequential children vertical, branches horizontal
-        if (index === 0) {
-          y = parentPos.y + parentHeight + MIN_V_GAP
-        } else {
-          x = parentPos.x + (H_SPACING * index)
-        }
-      }
-      nodePositions[strand.id] = { x, y }
-    }
-
-    // Store height for children positioning
-    strandHeights[strand.id] = getEstimatedHeight(strand)
-
-    if (strand.isResult) {
-      const msg = messageLookup[strand.id]
-      let nodeType = 'message'
-      let data: any = { sender: msg.role, text: msg.content }
-
-      if (msg.isPending) {
-        nodeType = 'task'
-        data = {
-          type: 'processing',
-          status: 'running',
-          progress: null,
-          steps: [{ name: msg.content || 'Processing...', status: 'active' }],
-          onDelete: async () => {
-            const confirmed = await (window as any).api.showConfirmation({
-              title: 'Delete Task Node',
-              message: 'Are you sure you want to delete this running task and all its branches?',
-              type: 'warning'
-            })
-            if (confirmed === 1) {
-              await videoStore.removeMessageBranch(strand.id)
-            }
-          },
-          onStop: async () => {
-            await videoStore.abortProcessing(strand.id)
-          }
-        }
-      } else {
-        const type = msg.resultType || ((msg.files && msg.files.length > 0) ? 'video' : 'summary')
-        // Normalize nodeType to specialized components
-        if (type === 'video') nodeType = 'video'
-        else if (type === 'thumbnail' || type === 'generate-thumbnail' || type === 'image' || type === 'result-image') nodeType = 'thumbnail'
-        else if (type === 'summary' || type === 'cover') nodeType = 'summary'
-        else nodeType = 'summary' // Default fallback
-
-        data = {
-          id: msg.id,
-          type,
-          content: msg.content,
-          files: msg.files,
-          timeline: msg.timeline,
-          version: msg.version,
-          cost: msg.cost,
-          showDetails: videoStore.currentThread?.nodePositions?.[strand.id]?.showDetails || false,
-          onDelete: async () => {
-            const confirmed = await (window as any).api.showConfirmation({
-              title: 'Delete Node',
-              message: 'Are you sure you want to delete this result and all its branches?',
-              type: 'warning'
-            })
-            if (confirmed === 1) {
-              await videoStore.removeMessageBranch(strand.id)
-            }
-          },
-          onSubmit: async (val: string, attachedImages?: string[]) => {
-            const newMsgId = await videoStore.addMessage(val, MessageRole.User, strand.id, attachedImages)
-            if (newMsgId && videoStore.currentThreadId) {
-              await videoStore.startProcessing(videoStore.currentThreadId, newMsgId)
-            }
-          }
-        }
-      }
-      newNodes.push({ id: strand.id, type: nodeType, position: nodePositions[strand.id], data })
-    } else {
-      // Conversation
-      const lastId = strand.messageIds[strand.messageIds.length - 1]
-      newNodes.push({
-        id: strand.id,
-        type: 'conversation',
-        position: nodePositions[strand.id],
-        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',
-              message: 'Are you sure you want to delete this conversation and all its branches?',
-              type: 'warning'
-            })
-            if (confirmed === 1) {
-              await videoStore.removeMessageBranch(strand.id)
-            }
-          },
-          onSubmit: async (val: string, attachedImages?: string[]) => {
-            const newMsgId = await videoStore.addMessage(val, MessageRole.User, lastId, attachedImages)
-            if (newMsgId && videoStore.currentThreadId) {
-              await videoStore.startProcessing(videoStore.currentThreadId, newMsgId)
-            }
-          }
-        }
-      })
-    }
-
-    newEdges.push({
-      id: `e-${parentNodeId}-${strand.id}`,
-      source: parentNodeId,
-      target: strand.id,
-      animated: strand.isResult && messageLookup[strand.id].isPending
-    })
-  })
-
-  graphStore.setNodes(newNodes)
-  graphStore.setEdges(newEdges)
-}, { deep: true, immediate: true })
-
 onMounted(async () => {
   const videoId = route.params.id as string || 'default'
 

From b55957859ebdb586ff8090d61bd3097daeca5fca Mon Sep 17 00:00:00 2001
From: Navid Shad <navidshad72@gmail.com>
Date: Fri, 10 Apr 2026 19:06:31 +0300
Subject: [PATCH 6/7] feat: implement frame-based node grouping with
 interactive drag-to-create functionality

---
 .../src/components/graph/FrameNode.vue        | 185 ++++++++++++++
 .../src/components/graph/GraphToolbar.vue     |  31 ++-
 .../src/components/graph/MediaNode.vue        |   2 +-
 .../src/composables/useGraphLayout.ts         |  47 +++-
 src/renderer/src/pages/GraphChatPage.vue      | 229 +++++++++++++++++-
 src/renderer/src/stores/videoStore.ts         |  38 ++-
 src/shared/types.ts                           |  10 +-
 7 files changed, 518 insertions(+), 24 deletions(-)
 create mode 100644 src/renderer/src/components/graph/FrameNode.vue

diff --git a/src/renderer/src/components/graph/FrameNode.vue b/src/renderer/src/components/graph/FrameNode.vue
new file mode 100644
index 0000000..90acbcb
--- /dev/null
+++ b/src/renderer/src/components/graph/FrameNode.vue
@@ -0,0 +1,185 @@
+<template>
+  <div 
+    class="frame-node rounded-[2rem] border-2 border-dashed transition-all duration-300 relative group"
+    :class="[
+      selected ? 'border-primary bg-primary/5 ring-4 ring-primary/10' : 'border-zinc-300 dark:border-zinc-700 bg-zinc-400/5 dark:bg-zinc-400/5',
+      isResizing ? 'cursor-nwse-resize' : ''
+    ]"
+    :style="{ 
+      width: `${nodeWidth}px`, 
+      height: `${nodeHeight}px`,
+    }"
+  >
+    <!-- Zoom-Sensitive Title -->
+    <div 
+      class="absolute -top-10 left-0 flex items-center gap-2 px-1"
+      :style="{ 
+        transform: `scale(${1 / Math.max(0.4, viewport.zoom)})`, 
+        transformOrigin: 'bottom left' 
+      }"
+    >
+      <div 
+        v-if="isEditing" 
+        class="flex items-center bg-white dark:bg-zinc-800 rounded-lg shadow-xl ring-1 ring-black/5 dark:ring-white/10 overflow-hidden"
+      >
+        <input 
+          ref="inputRef"
+          v-model="editTitle"
+          class="bg-transparent border-none outline-none px-3 py-1 font-bold text-sm text-zinc-900 dark:text-zinc-100 min-w-[120px]"
+          @blur="saveTitle"
+          @keydown.enter="saveTitle"
+          @keydown.esc="cancelEditing"
+        />
+      </div>
+      <div 
+        v-else 
+        class="flex items-center gap-2 cursor-text group/title"
+        @dblclick="startEditing"
+      >
+        <div class="px-3 py-1 bg-zinc-100/80 dark:bg-zinc-900/80 backdrop-blur-md rounded-lg border border-zinc-200 dark:border-zinc-800 shadow-sm flex items-center gap-2 hover:border-primary/50 transition-colors">
+          <div class="w-2 h-2 rounded-full bg-primary shadow-[0_0_8px_rgba(var(--primary),0.5)]"></div>
+          <span class="text-xs font-black uppercase tracking-widest text-zinc-600 dark:text-zinc-300 whitespace-nowrap">
+            {{ data.title || 'Untitled Group' }}
+          </span>
+        </div>
+        <button 
+          class="p-1 opacity-0 group-hover/title:opacity-100 text-zinc-400 hover:text-primary transition-all duration-200"
+          @click="startEditing"
+        >
+          <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <!-- Delete Button -->
+    <button 
+      v-if="selected"
+      class="absolute top-4 right-4 p-1.5 bg-red-500/10 hover:bg-red-500 text-red-500 hover:text-white rounded-lg transition-all opacity-0 group-hover:opacity-100 z-50 pointer-events-auto"
+      @click="data.onDelete"
+      title="Delete Frame (ungroup children)"
+    >
+      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12" />
+      </svg>
+    </button>
+
+    <!-- Resize Handle -->
+    <div 
+      v-if="selected"
+      class="absolute bottom-4 right-4 w-6 h-6 flex items-center justify-center cursor-nwse-resize text-zinc-400 dark:text-zinc-600 hover:text-primary transition-colors opacity-0 group-hover:opacity-100"
+      @mousedown.stop.prevent="startResizing"
+    >
+      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7" />
+      </svg>
+    </div>
+
+    <!-- Selection Area Label -->
+    <div class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-10 select-none">
+      <span class="text-4xl font-black uppercase tracking-[1em] text-zinc-400 dark:text-zinc-600 rotate-12">Frame</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, nextTick } from 'vue'
+import { useVueFlow } from '@vue-flow/core'
+
+const props = defineProps<{
+  id: string
+  data: {
+    title: string
+    width: number
+    height: number
+    onUpdate?: (id: string, metadata: any) => void
+    onDelete?: () => void
+  }
+  selected?: boolean
+}>()
+
+const { viewport } = useVueFlow()
+
+const nodeWidth = ref(props.data.width || 400)
+const nodeHeight = ref(props.data.height || 300)
+
+const isResizing = ref(false)
+
+const startResizing = (e: MouseEvent) => {
+  isResizing.value = true
+  document.body.style.cursor = 'nwse-resize'
+  document.body.style.userSelect = 'none'
+  
+  const startX = e.clientX
+  const startY = e.clientY
+  const startWidth = nodeWidth.value
+  const startHeight = nodeHeight.value
+
+  const onMouseMove = (moveEvent: MouseEvent) => {
+    if (!isResizing.value) return
+    const zoom = viewport.value.zoom || 1
+    const deltaX = (moveEvent.clientX - startX) / zoom
+    const deltaY = (moveEvent.clientY - startY) / zoom
+    
+    nodeWidth.value = Math.max(200, startWidth + deltaX)
+    nodeHeight.value = Math.max(150, startHeight + deltaY)
+  }
+
+  const onMouseUp = () => {
+    isResizing.value = false
+    document.body.style.cursor = ''
+    document.body.style.userSelect = ''
+    window.removeEventListener('mousemove', onMouseMove)
+    window.removeEventListener('mouseup', onMouseUp)
+    
+    if (props.data.onUpdate) {
+      props.data.onUpdate(props.id, { 
+        width: nodeWidth.value, 
+        height: nodeHeight.value 
+      })
+    }
+  }
+
+  window.addEventListener('mousemove', onMouseMove)
+  window.addEventListener('mouseup', onMouseUp)
+}
+
+// Title Editing logic
+const isEditing = ref(false)
+const editTitle = ref('')
+const inputRef = ref<HTMLInputElement | null>(null)
+
+const startEditing = () => {
+  editTitle.value = props.data.title || 'Untitled Group'
+  isEditing.value = true
+  nextTick(() => {
+    inputRef.value?.focus()
+    inputRef.value?.select()
+  })
+}
+
+const saveTitle = () => {
+  if (!isEditing.value) return
+  isEditing.value = false
+  if (props.data.onUpdate) {
+    props.data.onUpdate(props.id, { title: editTitle.value })
+  }
+}
+
+const cancelEditing = () => {
+  isEditing.value = false
+}
+
+// Sync from props
+watch(() => props.data.width, (v) => { if (v) nodeWidth.value = v })
+watch(() => props.data.height, (v) => { if (v) nodeHeight.value = v })
+
+</script>
+
+<style scoped>
+.frame-node {
+  /* Ensure the node is behind others but not interactive for background clicks unless needed */
+  z-index: -1;
+}
+</style>
diff --git a/src/renderer/src/components/graph/GraphToolbar.vue b/src/renderer/src/components/graph/GraphToolbar.vue
index 8fb8b1b..7848ba7 100644
--- a/src/renderer/src/components/graph/GraphToolbar.vue
+++ b/src/renderer/src/components/graph/GraphToolbar.vue
@@ -1,36 +1,53 @@
 <template>
   <div class="absolute left-6 top-6 z-30 flex items-center bg-zinc-100/80 dark:bg-zinc-900/80 backdrop-blur-md rounded-xl p-1 border border-zinc-200 dark:border-zinc-800 shadow-lg">
     <button 
-      @click="$emit('update:modelValue', false)"
+      @click="$emit('update:modelValue', 'pan')"
       title="Pan View"
       class="flex items-center justify-center w-9 h-9 rounded-lg transition-all duration-300"
-      :class="!modelValue ? 'bg-white dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 shadow-sm ring-1 ring-zinc-200 dark:ring-zinc-700' : 'text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300 hover:bg-zinc-200/50 dark:hover:bg-zinc-800/50'"
+      :class="modelValue === 'pan' ? 'bg-white dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 shadow-sm ring-1 ring-zinc-200 dark:ring-zinc-700' : 'text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300 hover:bg-zinc-200/50 dark:hover:bg-zinc-800/50'"
     >
       <svg class="w-4.5 h-4.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5"></path>
       </svg>
     </button>
-    <div class="w-px h-4 bg-zinc-200 dark:border-zinc-800 mx-1"></div>
+    
+    <div class="w-px h-4 bg-zinc-200 dark:bg-zinc-800 mx-1"></div>
+    
     <button 
-      @click="$emit('update:modelValue', true)"
+      @click="$emit('update:modelValue', 'select')"
       title="Select Tool"
       class="flex items-center justify-center w-9 h-9 rounded-lg transition-all duration-300"
-      :class="modelValue ? 'bg-primary text-white shadow-md shadow-primary/20 ring-1 ring-primary/20' : 'text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300 hover:bg-zinc-200/50 dark:hover:bg-zinc-800/50'"
+      :class="modelValue === 'select' ? 'bg-primary text-white shadow-md shadow-primary/20 ring-1 ring-primary/20' : 'text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300 hover:bg-zinc-200/50 dark:hover:bg-zinc-800/50'"
     >
       <svg class="w-4.5 h-4.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <rect x="4" y="4" width="16" height="16" rx="2" stroke-width="2.5" stroke="currentColor" fill="none" stroke-dasharray="4 2"></rect>
         <path d="M7 7h1v1H7zM16 7h1v1h-1zM7 16h1v1H7zM16 16h1v1h-1z" fill="currentColor"></path>
       </svg>
     </button>
+
+    <div class="w-px h-4 bg-zinc-200 dark:bg-zinc-800 mx-1"></div>
+
+    <button 
+      @click="$emit('update:modelValue', 'frame')"
+      title="Group Frames"
+      class="flex items-center justify-center w-9 h-9 rounded-lg transition-all duration-300"
+      :class="modelValue === 'frame' ? 'bg-secondary text-white shadow-md shadow-secondary/20 ring-1 ring-secondary/20' : 'text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300 hover:bg-zinc-200/50 dark:hover:bg-zinc-800/50'"
+    >
+      <svg class="w-4.5 h-4.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5zM14 5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V5zM4 15a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-4zM14 15a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-4z" />
+      </svg>
+    </button>
   </div>
 </template>
 
 <script setup lang="ts">
+type ToolMode = 'pan' | 'select' | 'frame'
+
 defineProps<{
-  modelValue: boolean
+  modelValue: ToolMode
 }>()
 
 defineEmits<{
-  (e: 'update:modelValue', value: boolean): void
+  (e: 'update:modelValue', value: ToolMode): void
 }>()
 </script>
diff --git a/src/renderer/src/components/graph/MediaNode.vue b/src/renderer/src/components/graph/MediaNode.vue
index a6891ce..a86cb5b 100644
--- a/src/renderer/src/components/graph/MediaNode.vue
+++ b/src/renderer/src/components/graph/MediaNode.vue
@@ -114,7 +114,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { Handle, Position } from '@vue-flow/core'
 import { useVideoStore } from '../../stores/videoStore'
 import BaseMessageInput from '../chat/BaseMessageInput.vue'
diff --git a/src/renderer/src/composables/useGraphLayout.ts b/src/renderer/src/composables/useGraphLayout.ts
index 2b17819..69c749c 100644
--- a/src/renderer/src/composables/useGraphLayout.ts
+++ b/src/renderer/src/composables/useGraphLayout.ts
@@ -83,11 +83,44 @@ export function useGraphLayout(videoStore: any, graphStore: any) {
     })
 
     // 2. Position Nodes
+    const savedMetadata = videoStore.currentThread?.nodePositions || {}
+    
     // Initialize from saved positions if available
     const nodePositions: Record<string, { x: number, y: number }> = {
-      'root-media': videoStore.currentThread?.nodePositions?.['root-media'] || { x: 0, y: 0 }
+      'root-media': savedMetadata['root-media'] || { x: 0, y: 0 }
     }
 
+    // 2.1 Add Frame Nodes
+    const frameIds = new Set<string>()
+    Object.entries(savedMetadata).forEach(([id, meta]: [string, any]) => {
+      if (meta.isFrame) {
+        frameIds.add(id)
+        newNodes.push({
+          id,
+          type: 'frame',
+          position: { x: meta.x, y: meta.y },
+          data: {
+            title: meta.title,
+            width: meta.width || 400,
+            height: meta.height || 300,
+            onUpdate: (fid: string, updates: any) => videoStore.updateNodeMetadata(fid, updates),
+            onDelete: async () => {
+              const confirmed = await (window as any).api.showConfirmation({
+                title: 'Delete Frame',
+                message: 'Are you sure you want to delete this frame?',
+                detail: 'Children nodes will be ungrouped but NOT deleted.',
+                type: 'warning'
+              })
+              if (confirmed === 1) {
+                // We use the store method for deletion logic
+                await videoStore.deleteFrame(id)
+              }
+            }
+          }
+        })
+      }
+    })
+
     // Root Media Node (Always branching)
     const isImageThread = videoStore.currentThread?.type === 'image'
 
@@ -95,10 +128,11 @@ export function useGraphLayout(videoStore: any, graphStore: any) {
       id: 'root-media',
       type: isImageThread ? 'image-collection' : 'media',
       position: nodePositions['root-media'],
+      parentNode: frameIds.has(savedMetadata['root-media']?.parentNode) ? savedMetadata['root-media'].parentNode : undefined,
       data: {
         filename: videoStore.currentVideoName,
         videoPath: videoStore.currentVideoPath,
-        showDetails: videoStore.currentThread?.nodePositions?.['root-media']?.showDetails || false,
+        showDetails: savedMetadata['root-media']?.showDetails || false,
         onSubmit: async (val: string, attachedImages?: string[]) => {
           const newMsgId = await videoStore.addMessage(val, MessageRole.User, undefined, attachedImages)
           if (newMsgId && videoStore.currentThreadId) {
@@ -227,7 +261,13 @@ export function useGraphLayout(videoStore: any, graphStore: any) {
             }
           }
         }
-        newNodes.push({ id: strand.id, type: nodeType, position: nodePositions[strand.id], data })
+        newNodes.push({ 
+          id: strand.id, 
+          type: nodeType, 
+          position: nodePositions[strand.id], 
+          parentNode: frameIds.has(savedMetadata[strand.id]?.parentNode) ? savedMetadata[strand.id].parentNode : undefined,
+          data 
+        })
       } else {
         // Conversation
         const lastId = strand.messageIds[strand.messageIds.length - 1]
@@ -235,6 +275,7 @@ export function useGraphLayout(videoStore: any, graphStore: any) {
           id: strand.id,
           type: 'conversation',
           position: nodePositions[strand.id],
+          parentNode: frameIds.has(savedMetadata[strand.id]?.parentNode) ? savedMetadata[strand.id].parentNode : undefined,
           data: {
             messages: strand.messageIds.map(id => messageLookup[id]),
             hasInputInitially: (childMap[lastId] || []).length === 0,
diff --git a/src/renderer/src/pages/GraphChatPage.vue b/src/renderer/src/pages/GraphChatPage.vue
index dafbf7c..3b8dbbf 100644
--- a/src/renderer/src/pages/GraphChatPage.vue
+++ b/src/renderer/src/pages/GraphChatPage.vue
@@ -14,13 +14,19 @@
       @back="router.push('/home')"
     />
     
-    <div class="flex-1 w-full relative">
-      <GraphToolbar v-model="isSelectMode" />
+    <div 
+      ref="containerRef" 
+      class="flex-1 w-full relative"
+      @mousedown="onPaneMouseDown"
+      @mousemove="onPaneMouseMove"
+      @mouseup="onPaneMouseUp"
+    >
+      <GraphToolbar v-model="graphMode" />
 
       <VueFlow :nodes="graphStore.nodes" :edges="graphStore.edges" class="vue-flow-custom" @pane-ready="onPaneReady"
         @node-drag-stop="onNodeDragStop" :min-zoom="0.01" :max-zoom="4"
-        :pan-on-drag="!isSelectMode" 
-        :selection-key-code="isSelectMode ? true : 'Shift'" 
+        :pan-on-drag="graphMode === 'pan'" 
+        :selection-key-code="graphMode === 'select' ? true : null" 
         :pan-on-scroll="true"
         :zoom-on-scroll="true"
         :pan-on-scroll-mode="'all'"
@@ -53,7 +59,21 @@
         <template #node-image-collection="props">
           <ImageCollectionNode v-bind="props" />
         </template>
+        <template #node-frame="props">
+          <FrameNode v-bind="props" />
+        </template>
       </VueFlow>
+
+      <!-- Frame Creation Overlay -->
+      <div v-if="frameCreationRect" class="absolute border-2 border-dashed border-secondary bg-secondary/5 pointer-events-none z-50 rounded-xl"
+        :style="{ 
+          left: `${frameCreationRect.x}px`, 
+          top: `${frameCreationRect.y}px`, 
+          width: `${frameCreationRect.width}px`, 
+          height: `${frameCreationRect.height}px` 
+        }">
+        <div class="absolute -top-6 left-0 text-[10px] font-bold text-secondary uppercase tracking-widest bg-white/80 dark:bg-zinc-900/80 px-2 py-0.5 rounded">Creating Frame...</div>
+      </div>
     </div>
   </div>
 </template>
@@ -80,17 +100,21 @@ import ThumbnailNode from '../components/graph/ThumbnailNode.vue'
 import SummaryNode from '../components/graph/SummaryNode.vue'
 import ChatInputNode from '../components/graph/ChatInputNode.vue'
 import ImageCollectionNode from '../components/graph/ImageCollectionNode.vue'
+import FrameNode from '../components/graph/FrameNode.vue'
 
 import { useGraphLayout } from '../composables/useGraphLayout'
 import GraphHeader from '../components/graph/GraphHeader.vue'
 import GraphToolbar from '../components/graph/GraphToolbar.vue'
 
-const isSelectMode = ref(false)
+const graphMode = ref<'pan' | 'select' | 'frame'>('pan')
+const containerRef = ref<HTMLElement | null>(null)
+const frameCreationRect = ref<{ x: number, y: number, width: number, height: number } | null>(null)
+const frameCreationStart = ref<{ x: number, y: number } | null>(null)
 
 const graphStore = useGraphStore()
 const taskStore = useTaskStore()
 const videoStore = useVideoStore()
-const { fitView } = useVueFlow()
+const { fitView, project, findNode, getNodes } = useVueFlow()
 const route = useRoute()
 const router = useRouter()
 
@@ -106,14 +130,197 @@ const onPaneReady = () => {
 }
 
 const onNodeDragStop = (event: any) => {
-  const { nodes } = event
-  const newPositions = nodes.reduce((acc: any, node: any) => {
-    acc[node.id] = node.position
-    return acc
-  }, {})
+  const { nodes: draggedNodes } = event
+  const newPositions: any = {}
+
+  // Current graph state
+  const allNodes = getNodes.value
+  const frames = allNodes.filter(n => n.type === 'frame')
+
+  draggedNodes.forEach((node: any) => {
+    // 1. Detect if dropped inside a frame
+    const nodeCenter = {
+      x: node.position.x + (node.dimensions?.width || 380) / 2,
+      y: node.position.y + (node.dimensions?.height || 200) / 2
+    }
+
+    // If it's a frame, don't nest it in another frame for now
+    if (node.type === 'frame') {
+      const currentMeta = videoStore.currentThread?.nodePositions?.[node.id] || {}
+      newPositions[node.id] = { 
+        ...currentMeta,
+        ...node.position 
+      }
+      return
+    }
+
+    let parentFrameId: string | undefined = undefined
+    
+    // Check against all frames
+    for (const frame of frames) {
+      const fx = frame.position.x
+      const fy = frame.position.y
+      const fw = frame.data.width || 400
+      const fh = frame.data.height || 300
+
+      if (nodeCenter.x >= fx && nodeCenter.x <= fx + fw &&
+          nodeCenter.y >= fy && nodeCenter.y <= fy + fh) {
+        parentFrameId = frame.id
+        break
+      }
+    }
+
+    const currentMeta = videoStore.currentThread?.nodePositions?.[node.id] || {}
+    
+    if (parentFrameId) {
+      // Convert to relative coordinates
+      const frameNode = findNode(parentFrameId)
+      if (frameNode) {
+        const relativeX = node.position.x - frameNode.position.x
+        const relativeY = node.position.y - frameNode.position.y
+        newPositions[node.id] = { 
+          ...currentMeta,
+          x: relativeX, 
+          y: relativeY, 
+          parentNode: parentFrameId 
+        }
+      }
+    } else {
+      // Ensure it's absolute if not in a frame
+      newPositions[node.id] = { 
+        ...currentMeta,
+        x: node.position.x, 
+        y: node.position.y, 
+        parentNode: undefined 
+      }
+    }
+  })
+
   videoStore.updateNodePositions(newPositions)
 }
 
+const onPaneMouseDown = (event: MouseEvent) => {
+  if (graphMode.value !== 'frame' || !containerRef.value) return
+  
+  // Ensure we are clicking the background, not a node or toolbar
+  const target = event.target as HTMLElement
+  if (target.closest('.vue-flow__node') || target.closest('button')) return
+
+  const rect = containerRef.value.getBoundingClientRect()
+  const x = event.clientX - rect.left
+  const y = event.clientY - rect.top
+
+  frameCreationStart.value = { x, y }
+  frameCreationRect.value = { x, y, width: 0, height: 0 }
+}
+
+const onPaneMouseMove = (event: MouseEvent) => {
+  if (!frameCreationStart.value || graphMode.value !== 'frame' || !containerRef.value) return
+
+  const rect = containerRef.value.getBoundingClientRect()
+  const currentX = event.clientX - rect.left
+  const currentY = event.clientY - rect.top
+  
+  const startX = frameCreationStart.value.x
+  const startY = frameCreationStart.value.y
+
+  frameCreationRect.value = {
+    x: Math.min(startX, currentX),
+    y: Math.min(startY, currentY),
+    width: Math.abs(currentX - startX),
+    height: Math.abs(currentY - startY)
+  }
+}
+
+const uuid = () => Math.random().toString(36).substring(2, 9)
+
+const onPaneMouseUp = async (event: MouseEvent) => {
+  if (!frameCreationRect.value || !frameCreationStart.value || graphMode.value !== 'frame') {
+    frameCreationStart.value = null
+    frameCreationRect.value = null
+    return
+  }
+
+  const rect = frameCreationRect.value
+  
+  // Only create if it's large enough
+  if (rect.width > 20 && rect.height > 20) {
+    // Project viewport coordinates to flow coordinates
+    const flowPos = project({ x: rect.x, y: rect.y })
+    const flowDim = project({ x: rect.x + rect.width, y: rect.y + rect.height })
+    const width = flowDim.x - flowPos.x
+    const height = flowDim.y - flowPos.y
+
+    const frameId = `frame-${uuid()}`
+    
+    // 1. Create the frame node in store
+    await videoStore.updateNodeMetadata(frameId, {
+      x: flowPos.x,
+      y: flowPos.y,
+      width,
+      height,
+      title: 'New Group',
+      isFrame: true,
+      onDelete: async () => {
+        const confirmed = await (window as any).api.showConfirmation({
+          title: 'Delete Frame',
+          message: 'Are you sure you want to delete this frame?',
+          detail: 'Children nodes will be ungrouped but NOT deleted.',
+          type: 'warning'
+        })
+        if (confirmed === 1) {
+          const currentPositions = { ...(videoStore.currentThread?.nodePositions || {}) }
+          const frameNode = findNode(frameId)
+          
+          Object.entries(currentPositions).forEach(([id, meta]: [string, any]) => {
+            if (meta.parentNode === frameId) {
+              const absoluteX = (frameNode?.position.x || 0) + meta.x
+              const absoluteY = (frameNode?.position.y || 0) + meta.y
+              currentPositions[id] = { ...meta, x: absoluteX, y: absoluteY, parentNode: undefined }
+            }
+          })
+          
+          delete currentPositions[frameId]
+          await videoStore.updateNodePositions(currentPositions)
+        }
+      }
+    })
+
+    // 2. Identify nodes inside and group them
+    const allNodes = getNodes.value
+    const nodesToGroup = allNodes.filter(node => {
+      if (node.type === 'frame' || node.id === frameId) return false
+      
+      const nx = node.position.x
+      const ny = node.position.y
+      
+      return nx >= flowPos.x && nx <= flowPos.x + width &&
+             ny >= flowPos.y && ny <= flowPos.y + height
+    })
+
+    const groupUpdates: any = {}
+    nodesToGroup.forEach(node => {
+      const currentMeta = videoStore.currentThread?.nodePositions?.[node.id] || {}
+      groupUpdates[node.id] = {
+        ...currentMeta,
+        x: node.position.x - flowPos.x,
+        y: node.position.y - flowPos.y,
+        parentNode: frameId
+      }
+    })
+
+    if (Object.keys(groupUpdates).length > 0) {
+      await videoStore.updateNodePositions(groupUpdates)
+    }
+    
+    // Switch back to pan mode after creation
+    graphMode.value = 'pan'
+  }
+
+  frameCreationStart.value = null
+  frameCreationRect.value = null
+}
+
 onMounted(async () => {
   const videoId = route.params.id as string || 'default'
 
diff --git a/src/renderer/src/stores/videoStore.ts b/src/renderer/src/stores/videoStore.ts
index 8ce224c..6a90f00 100644
--- a/src/renderer/src/stores/videoStore.ts
+++ b/src/renderer/src/stores/videoStore.ts
@@ -297,7 +297,7 @@ export const useVideoStore = defineStore('video', () => {
 		return success
 	}
 
-	const updateNodeMetadata = async (nodeId: string, metadata: { x?: number, y?: number, width?: number }) => {
+	const updateNodeMetadata = async (nodeId: string, metadata: Partial<NonNullable<Thread['nodePositions']>[string]>) => {
 		if (!currentThreadId.value || !currentThread.value) return
 		
 		const currentPositions = JSON.parse(JSON.stringify(currentThread.value.nodePositions || {}))
@@ -345,6 +345,41 @@ export const useVideoStore = defineStore('video', () => {
 		await startProcessing(currentThreadId.value, message.id)
 	}
 
+	const deleteFrame = async (frameId: string) => {
+		if (!currentThreadId.value || !currentThread.value) return
+		
+		const currentPositions = JSON.parse(JSON.stringify(currentThread.value.nodePositions || {}))
+		const frameMeta = currentPositions[frameId]
+		if (!frameMeta) return
+
+		// Ungroup children
+		Object.entries(currentPositions).forEach(([id, meta]: [string, any]) => {
+			if (meta.parentNode === frameId) {
+				// We don't have absolute positions here easily without access to VueFlow, 
+				// but GraphChatPage can handle this or we can just leave them at their relative offsets (shifted).
+				// For now, let's just clear the parentNode and keep relative offsets as absolute.
+				// Improved logic: GraphChatPage handles the coords before calling this, or we just clear here.
+				meta.parentNode = undefined
+			}
+		})
+
+		delete currentPositions[frameId]
+
+		try {
+			const success = await (window as any).api.saveNodePositions(
+				String(currentThreadId.value), 
+				currentPositions
+			)
+			if (success && currentThread.value) {
+				currentThread.value.nodePositions = currentPositions
+			}
+			return success
+		} catch (error) {
+			console.error('[videoStore] Failed to delete frame:', error)
+			return false
+		}
+	}
+
 	return {
 		threads,
 		currentThreadId,
@@ -372,6 +407,7 @@ export const useVideoStore = defineStore('video', () => {
 		updateMessageContent,
 		updateNodePositions,
 		updateNodeMetadata,
+		deleteFrame,
 		retryPreprocessing
 	}
 })
\ No newline at end of file
diff --git a/src/shared/types.ts b/src/shared/types.ts
index 25272bc..ccbd03b 100644
--- a/src/shared/types.ts
+++ b/src/shared/types.ts
@@ -142,7 +142,15 @@ export interface Thread {
 	tempDir: string
 	messages: Message[]
 	backgroundTasks?: Record<string, BackgroundTask>
-	nodePositions?: Record<string, { x: number; y: number; width?: number }>
+	nodePositions?: Record<string, { 
+		x: number; 
+		y: number; 
+		width?: number; 
+		height?: number; 
+		title?: string; 
+		isFrame?: boolean; 
+		parentNode?: string 
+	}>
 	versionCounter?: number
 	videoMetadata?: VideoMetadata
 	missing?: boolean

From 18ed530a1b369e6a121a551ccd09cc8b90ac9ebc Mon Sep 17 00:00:00 2001
From: Navid Shad <navidshad72@gmail.com>
Date: Fri, 10 Apr 2026 19:19:17 +0300
Subject: [PATCH 7/7] refactor: update frame nesting logic to use absolute
 computed positions for coordinate calculations and improve deletion handling

---
 .../src/components/graph/FrameNode.vue        |  2 +-
 src/renderer/src/pages/GraphChatPage.vue      | 61 +++++++++----------
 src/renderer/src/stores/videoStore.ts         | 17 ++++--
 3 files changed, 40 insertions(+), 40 deletions(-)

diff --git a/src/renderer/src/components/graph/FrameNode.vue b/src/renderer/src/components/graph/FrameNode.vue
index 90acbcb..a1a8463 100644
--- a/src/renderer/src/components/graph/FrameNode.vue
+++ b/src/renderer/src/components/graph/FrameNode.vue
@@ -1,6 +1,6 @@
 <template>
   <div 
-    class="frame-node rounded-[2rem] border-2 border-dashed transition-all duration-300 relative group"
+    class="frame-node rounded-[2rem] border-2 border-dashed relative group"
     :class="[
       selected ? 'border-primary bg-primary/5 ring-4 ring-primary/10' : 'border-zinc-300 dark:border-zinc-700 bg-zinc-400/5 dark:bg-zinc-400/5',
       isResizing ? 'cursor-nwse-resize' : ''
diff --git a/src/renderer/src/pages/GraphChatPage.vue b/src/renderer/src/pages/GraphChatPage.vue
index 3b8dbbf..072bc2d 100644
--- a/src/renderer/src/pages/GraphChatPage.vue
+++ b/src/renderer/src/pages/GraphChatPage.vue
@@ -138,28 +138,34 @@ const onNodeDragStop = (event: any) => {
   const frames = allNodes.filter(n => n.type === 'frame')
 
   draggedNodes.forEach((node: any) => {
-    // 1. Detect if dropped inside a frame
+    // We MUST use computedPosition (absolute) for detection logic
+    const nx = node.computedPosition?.x ?? node.position.x
+    const ny = node.computedPosition?.y ?? node.position.y
+    const nw = node.dimensions?.width || 380
+    const nh = node.dimensions?.height || 200
+
     const nodeCenter = {
-      x: node.position.x + (node.dimensions?.width || 380) / 2,
-      y: node.position.y + (node.dimensions?.height || 200) / 2
+      x: nx + nw / 2,
+      y: ny + nh / 2
     }
 
-    // If it's a frame, don't nest it in another frame for now
+    // If it's a frame, only update its own absolute position
     if (node.type === 'frame') {
       const currentMeta = videoStore.currentThread?.nodePositions?.[node.id] || {}
       newPositions[node.id] = { 
         ...currentMeta,
-        ...node.position 
+        x: nx,
+        y: ny
       }
       return
     }
 
     let parentFrameId: string | undefined = undefined
     
-    // Check against all frames
+    // Check against all frames using their absolute positions
     for (const frame of frames) {
-      const fx = frame.position.x
-      const fy = frame.position.y
+      const fx = frame.computedPosition?.x ?? frame.position.x
+      const fy = frame.computedPosition?.y ?? frame.position.y
       const fw = frame.data.width || 400
       const fh = frame.data.height || 300
 
@@ -173,24 +179,25 @@ const onNodeDragStop = (event: any) => {
     const currentMeta = videoStore.currentThread?.nodePositions?.[node.id] || {}
     
     if (parentFrameId) {
-      // Convert to relative coordinates
       const frameNode = findNode(parentFrameId)
       if (frameNode) {
-        const relativeX = node.position.x - frameNode.position.x
-        const relativeY = node.position.y - frameNode.position.y
+        // Correct conversion: (Global Node) - (Global Frame) = Local Offset
+        const fx = frameNode.computedPosition?.x ?? frameNode.position.x
+        const fy = frameNode.computedPosition?.y ?? frameNode.position.y
+        
         newPositions[node.id] = { 
           ...currentMeta,
-          x: relativeX, 
-          y: relativeY, 
+          x: nx - fx, 
+          y: ny - fy, 
           parentNode: parentFrameId 
         }
       }
     } else {
-      // Ensure it's absolute if not in a frame
+      // Return to absolute world coordinates
       newPositions[node.id] = { 
         ...currentMeta,
-        x: node.position.x, 
-        y: node.position.y, 
+        x: nx, 
+        y: ny, 
         parentNode: undefined 
       }
     }
@@ -269,19 +276,7 @@ const onPaneMouseUp = async (event: MouseEvent) => {
           type: 'warning'
         })
         if (confirmed === 1) {
-          const currentPositions = { ...(videoStore.currentThread?.nodePositions || {}) }
-          const frameNode = findNode(frameId)
-          
-          Object.entries(currentPositions).forEach(([id, meta]: [string, any]) => {
-            if (meta.parentNode === frameId) {
-              const absoluteX = (frameNode?.position.x || 0) + meta.x
-              const absoluteY = (frameNode?.position.y || 0) + meta.y
-              currentPositions[id] = { ...meta, x: absoluteX, y: absoluteY, parentNode: undefined }
-            }
-          })
-          
-          delete currentPositions[frameId]
-          await videoStore.updateNodePositions(currentPositions)
+          await videoStore.deleteFrame(frameId)
         }
       }
     })
@@ -291,8 +286,8 @@ const onPaneMouseUp = async (event: MouseEvent) => {
     const nodesToGroup = allNodes.filter(node => {
       if (node.type === 'frame' || node.id === frameId) return false
       
-      const nx = node.position.x
-      const ny = node.position.y
+      const nx = node.computedPosition.x
+      const ny = node.computedPosition.y
       
       return nx >= flowPos.x && nx <= flowPos.x + width &&
              ny >= flowPos.y && ny <= flowPos.y + height
@@ -303,8 +298,8 @@ const onPaneMouseUp = async (event: MouseEvent) => {
       const currentMeta = videoStore.currentThread?.nodePositions?.[node.id] || {}
       groupUpdates[node.id] = {
         ...currentMeta,
-        x: node.position.x - flowPos.x,
-        y: node.position.y - flowPos.y,
+        x: node.computedPosition.x - flowPos.x,
+        y: node.computedPosition.y - flowPos.y,
         parentNode: frameId
       }
     })
diff --git a/src/renderer/src/stores/videoStore.ts b/src/renderer/src/stores/videoStore.ts
index 6a90f00..060272e 100644
--- a/src/renderer/src/stores/videoStore.ts
+++ b/src/renderer/src/stores/videoStore.ts
@@ -352,14 +352,19 @@ export const useVideoStore = defineStore('video', () => {
 		const frameMeta = currentPositions[frameId]
 		if (!frameMeta) return
 
-		// Ungroup children
+		// Ungroup children using database-only math for 100% reliability
 		Object.entries(currentPositions).forEach(([id, meta]: [string, any]) => {
 			if (meta.parentNode === frameId) {
-				// We don't have absolute positions here easily without access to VueFlow, 
-				// but GraphChatPage can handle this or we can just leave them at their relative offsets (shifted).
-				// For now, let's just clear the parentNode and keep relative offsets as absolute.
-				// Improved logic: GraphChatPage handles the coords before calling this, or we just clear here.
-				meta.parentNode = undefined
+				// Absolute = Frame (Absolute) + Child (Relative)
+				const absoluteX = (frameMeta.x || 0) + (meta.x || 0)
+				const absoluteY = (frameMeta.y || 0) + (meta.y || 0)
+				
+				currentPositions[id] = { 
+					...meta, 
+					x: absoluteX, 
+					y: absoluteY, 
+					parentNode: undefined 
+				}
 			}
 		})