From f8caf82b7ebde157fab0801defdd877697675524 Mon Sep 17 00:00:00 2001
From: Navid Shad <navidshad72@gmail.com>
Date: Sat, 11 Apr 2026 14:02:22 +0300
Subject: [PATCH 1/5] refactor: improve node UX by adding drag handles, text
 selection, and non-draggable interaction zones

---
 .../components/graph/ImageCollectionNode.vue  | 14 +++++-----
 .../src/components/graph/SummaryNode.vue      | 10 +++----
 .../src/components/graph/ThumbnailNode.vue    | 23 ++++++++--------
 .../src/components/graph/VideoNode.vue        | 26 +++++++++----------
 4 files changed, 37 insertions(+), 36 deletions(-)

diff --git a/src/renderer/src/components/graph/ImageCollectionNode.vue b/src/renderer/src/components/graph/ImageCollectionNode.vue
index a0c14e1..4f6536e 100644
--- a/src/renderer/src/components/graph/ImageCollectionNode.vue
+++ b/src/renderer/src/components/graph/ImageCollectionNode.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="glass-card glass-card-hover p-0 rounded-3xl min-w-[300px] max-w-[340px] overflow-hidden flex flex-col group transition-all duration-300">
+  <div class="glass-card glass-card-hover p-0 rounded-3xl min-w-[300px] max-w-[340px] overflow-hidden flex flex-col group transition-all duration-300 cursor-move">
     <Handle v-if="data.hasInput !== false" type="target" :position="Position.Top" class="w-3 h-3 bg-zinc-500 border-2 border-white dark:border-zinc-800" />
     
     <!-- Gallery Section -->
-    <div class="p-4 bg-zinc-950/5 dark:bg-black/40 border-b border-black/5 dark:border-white/5">
+    <div class="p-4 bg-zinc-950/5 dark:bg-black/40 border-b border-black/5 dark:border-white/5 cursor-move">
       <div class="flex items-center justify-between mb-3">
         <div class="flex flex-col">
           <div class="text-[10px] text-zinc-500 uppercase tracking-[0.2em] font-black leading-none mb-1">Source Collection</div>
@@ -19,10 +19,10 @@
         <div 
           v-for="(img, idx) in visibleImages" 
           :key="idx"
-          class="relative aspect-square rounded-xl overflow-hidden border border-black/5 dark:border-white/10 group/img cursor-pointer"
+          class="relative aspect-square rounded-xl overflow-hidden border border-black/5 dark:border-white/10 group/img cursor-pointer nodrag"
           @click="openLightbox(idx)"
         >
-          <img :src="mediaUrl(img)" class="w-full h-full object-cover transition-transform duration-500 group-hover/img:scale-110" />
+          <img :src="mediaUrl(img)" class="w-full h-full object-cover transition-transform duration-500 group-hover/img:scale-110" draggable="false" />
           <div v-if="idx === 5 && sourceImages.length > 6" class="absolute inset-0 bg-black/60 backdrop-blur-[2px] flex items-center justify-center text-white text-xs font-bold font-mono">
             +{{ sourceImages.length - 6 }}
           </div>
@@ -31,8 +31,8 @@
     </div>
 
     <!-- Active Tasks Progress -->
-    <div v-if="activeTasks.length > 0" class="p-3 bg-white/5 border-b border-white/5 space-y-2">
-      <div v-for="task in activeTasks" :key="task.id" class="text-[10px]">
+    <div v-if="activeTasks.length > 0" class="p-3 bg-white/5 border-b border-white/5 space-y-2 nodrag cursor-text">
+      <div v-for="task in activeTasks" :key="task.id" class="text-[10px] select-text">
         <div class="flex justify-between items-center mb-1 text-zinc-400">
           <span class="truncate pr-2 font-bold uppercase tracking-tight">{{ task.status || task.name }}</span>
           <span>{{ task.progress !== undefined ? `${task.progress}%` : '' }}</span>
@@ -48,7 +48,7 @@
       v-model:attachedImages="attachedImages"
       placeholder="Start a new analysis..."
       compact
-      class="p-2 border-t border-black/5 dark:border-white/5 bg-black/[0.02] dark:bg-white/[0.02]"
+      class="p-2 border-t border-black/5 dark:border-white/5 bg-black/[0.02] dark:bg-white/[0.02] nodrag"
       @send="submit"
     />
 
diff --git a/src/renderer/src/components/graph/SummaryNode.vue b/src/renderer/src/components/graph/SummaryNode.vue
index c7bd6b1..f9e3d6b 100644
--- a/src/renderer/src/components/graph/SummaryNode.vue
+++ b/src/renderer/src/components/graph/SummaryNode.vue
@@ -1,15 +1,15 @@
 <template>
-  <div class="glass-card glass-card-hover p-0 rounded-3xl min-w-[280px] max-w-[320px] overflow-hidden flex flex-col group transition-all duration-300">
+  <div class="glass-card glass-card-hover p-0 rounded-3xl min-w-[280px] max-w-[320px] overflow-hidden flex flex-col group transition-all duration-300 cursor-move">
     <Handle type="target" :position="Position.Top" class="w-3 h-3 bg-zinc-500 border-2 border-white dark:border-zinc-800" />
     
     <!-- Header -->
-    <div class="px-4 py-3 bg-black/5 dark:bg-white/5 border-b border-black/5 dark:border-white/5 flex items-center justify-between">
+    <div class="px-4 py-3 bg-black/5 dark:bg-white/5 border-b border-black/5 dark:border-white/5 flex items-center justify-between cursor-move">
         <div class="flex items-center gap-2">
             <div class="w-2 h-2 rounded-full bg-accent animate-pulse shadow-[0_0_8px_rgba(var(--accent),0.5)]"></div>
             <span class="text-[10px] font-black uppercase tracking-widest text-zinc-500">AI Summary</span>
         </div>
         <SlimTooltip text="Delete node and branches" placement="bottom">
-          <button @click="data.onDelete" class="p-1 hover:bg-red-500/10 rounded-md text-zinc-400 hover:text-red-500 transition-colors">
+          <button @click="data.onDelete" class="p-1 hover:bg-red-500/10 rounded-md text-zinc-400 hover:text-red-500 transition-colors nodrag cursor-pointer">
             <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" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
           </button>
         </SlimTooltip>
@@ -17,7 +17,7 @@
 
     <!-- Summary Content -->
     <div 
-        class="p-5 max-h-96 overflow-y-auto custom-scrollbar prose prose-sm dark:prose-invert prose-p:my-2 prose-ul:my-2 prose-li:my-0 pb-12"
+        class="p-5 max-h-96 overflow-y-auto custom-scrollbar prose prose-sm dark:prose-invert prose-p:my-2 prose-ul:my-2 prose-li:my-0 pb-12 nodrag select-text cursor-text"
         v-html="renderMarkdown(data.content)"
     ></div>
     
@@ -26,7 +26,7 @@
       v-model:attachedImages="attachedImages"
       placeholder="Adjust or follow up..."
       compact
-      class="p-2 border-t border-black/5 dark:border-white/5 bg-black/[0.02] dark:bg-white/[0.02]"
+      class="p-2 border-t border-black/5 dark:border-white/5 bg-black/[0.02] dark:bg-white/[0.02] nodrag"
       @send="submit"
     />
 
diff --git a/src/renderer/src/components/graph/ThumbnailNode.vue b/src/renderer/src/components/graph/ThumbnailNode.vue
index 2401b30..23d5658 100644
--- a/src/renderer/src/components/graph/ThumbnailNode.vue
+++ b/src/renderer/src/components/graph/ThumbnailNode.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="glass-card glass-card-hover p-0 rounded-3xl min-w-[280px] max-w-[320px] overflow-hidden flex flex-col group transition-all duration-300">
+  <div class="glass-card glass-card-hover p-0 rounded-3xl min-w-[280px] max-w-[320px] overflow-hidden flex flex-col group transition-all duration-300 cursor-move">
     <Handle type="target" :position="Position.Top" class="w-3 h-3 bg-zinc-500 border-2 border-white dark:border-zinc-800" />
     
     <!-- Main Image Container -->
@@ -37,13 +37,14 @@
       <!-- Image Content -->
       <img 
         :src="mediaContentUrl" 
-        class="w-full h-full object-contain cursor-pointer transition-transform duration-500 hover:scale-105" 
+        class="w-full h-full object-contain cursor-move transition-transform duration-500 hover:scale-105" 
         @click="isFullScreen = true"
+        draggable="false"
       />
     </div>
 
     <!-- Node Info Tags (Unified Variation) -->
-    <div class="px-4 py-2.5 bg-zinc-50/50 dark:bg-white/[0.02] border-b border-black/5 dark:border-white/5 flex items-center gap-3">
+    <div class="px-4 py-2.5 bg-zinc-50/50 dark:bg-white/[0.02] border-b border-black/5 dark:border-white/5 flex items-center gap-3 cursor-move">
       <!-- Version -->
       <div v-if="data.version" class="text-[10px] font-bold text-primary dark:text-primary-light font-mono leading-none">
          {{ data.version }}
@@ -65,7 +66,7 @@
     </div>
 
     <!-- Reference Frames Gallery (Visible by default if present) -->
-    <div v-if="referenceFrames.length > 0" class="px-3 py-2 bg-black/10 dark:bg-black/40 border-b border-black/5 dark:border-white/5">
+    <div v-if="referenceFrames.length > 0" class="px-3 py-2 bg-black/10 dark:bg-black/40 border-b border-black/5 dark:border-white/5 nodrag">
         <div class="flex items-center justify-between mb-2">
             <span class="text-[8px] font-black uppercase tracking-widest text-zinc-500">{{ displayReferenceLabel }}</span>
             <span class="text-[8px] font-bold text-zinc-400">{{ referenceFrames.length }} detected</span>
@@ -95,12 +96,12 @@
     </div>
 
     <!-- Details Metadata Section -->
-    <div v-if="showDetails" class="px-4 py-3 bg-white/5 border-b border-white/5 space-y-4 animate-in slide-in-from-top duration-300">
+    <div v-if="showDetails" class="px-4 py-3 bg-white/5 border-b border-white/5 space-y-4 animate-in slide-in-from-top duration-300 nodrag cursor-text">
       <!-- Model Content / Explanation -->
       <div v-if="data.content" class="pb-4 border-b border-white/5">
           <div class="text-[8px] font-black uppercase tracking-widest text-primary-light mb-2">Model Feedback</div>
           <div 
-              class="prose prose-xs dark:prose-invert prose-p:my-0 prose-pre:my-2 prose-ul:my-1 text-zinc-800 dark:text-zinc-300/90 leading-relaxed font-medium"
+              class="prose prose-xs dark:prose-invert prose-p:my-0 prose-pre:my-2 prose-ul:my-1 text-zinc-800 dark:text-zinc-300/90 leading-relaxed font-medium select-text"
               v-html="renderMarkdown(data.content)"
           ></div>
       </div>
@@ -111,15 +112,15 @@
            <span class="text-[10px] text-zinc-500 font-bold uppercase tracking-widest">Loading Media Info...</span>
         </div>
         <template v-else-if="metadata">
-          <div class="flex flex-col gap-0.5">
+          <div class="flex flex-col gap-0.5 select-text">
             <span class="text-[9px] font-bold text-zinc-500 dark:text-zinc-500 uppercase tracking-widest">Resolution</span>
             <span class="text-[11px] text-zinc-700 dark:text-zinc-200 font-mono">{{ metadata?.width }}x{{ metadata?.height }}</span>
           </div>
-          <div class="flex flex-col gap-0.5">
+          <div class="flex flex-col gap-0.5 select-text">
             <span class="text-[9px] font-bold text-zinc-500 dark:text-zinc-500 uppercase tracking-widest">File Size</span>
             <span class="text-[11px] text-zinc-700 dark:text-zinc-200 font-mono">{{ formatFileSize(metadata?.size) }}</span>
           </div>
-          <div class="flex flex-col gap-0.5">
+          <div class="flex flex-col gap-0.5 select-text">
             <span class="text-[9px] font-bold text-zinc-500 dark:text-zinc-500 uppercase tracking-widest">Format</span>
             <span class="text-[11px] text-zinc-700 dark:text-zinc-200 font-mono uppercase">{{ (metadata?.format?.split(',')[0] || 'Image').replace('image2', 'PNG') }}</span>
           </div>
@@ -127,7 +128,7 @@
       </div>
 
       <!-- High-Res Upscaling Section -->
-      <div v-if="!isMetadataLoading" class="pt-4 border-t border-white/5 space-y-3">
+      <div v-if="!isMetadataLoading" class="pt-4 border-t border-white/5 space-y-3 nodrag cursor-default">
           <div class="flex items-center justify-between">
               <span class="text-[9px] font-black uppercase tracking-widest text-primary-light">High-Res Upscaling</span>
               <span class="text-[8px] font-bold text-zinc-500 italic">Nano Banana</span>
@@ -179,7 +180,7 @@
       v-model:attachedImages="attachedImages"
       placeholder="Adjust or follow up..."
       compact
-      class="p-2 border-t border-black/5 dark:border-white/5 bg-black/[0.02] dark:bg-white/[0.02]"
+      class="p-2 border-t border-black/5 dark:border-white/5 bg-black/[0.02] dark:bg-white/[0.02] nodrag"
       @send="submit"
     />
 
diff --git a/src/renderer/src/components/graph/VideoNode.vue b/src/renderer/src/components/graph/VideoNode.vue
index e238ded..6383f69 100644
--- a/src/renderer/src/components/graph/VideoNode.vue
+++ b/src/renderer/src/components/graph/VideoNode.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="glass-card glass-card-hover p-0 rounded-3xl min-w-[280px] max-w-[320px] overflow-hidden flex flex-col group transition-all duration-300">
+  <div class="glass-card glass-card-hover p-0 rounded-3xl min-w-[280px] max-w-[320px] overflow-hidden flex flex-col group transition-all duration-300 cursor-move">
     <Handle type="target" :position="Position.Top" class="w-3 h-3 bg-zinc-500 border-2 border-white dark:border-zinc-800" />
     
     <!-- Media Container with Overlays -->
@@ -29,7 +29,7 @@
       </div>
 
       <!-- Video Content -->
-      <div class="w-full h-full relative">
+      <div class="w-full h-full relative cursor-move">
         <video 
           ref="videoRef"
           :src="mediaContentUrl" 
@@ -45,7 +45,7 @@
     </div>
     
     <!-- Node Info Tags (Unified Variation) -->
-    <div class="px-4 py-2.5 bg-zinc-50/50 dark:bg-white/[0.02] border-b border-black/5 dark:border-white/5 flex items-center gap-3">
+    <div class="px-4 py-2.5 bg-zinc-50/50 dark:bg-white/[0.02] border-b border-black/5 dark:border-white/5 flex items-center gap-3 cursor-move">
       <!-- Version -->
       <div v-if="data.version" class="text-[10px] font-bold text-primary dark:text-primary-light font-mono leading-none">
          {{ data.version }}
@@ -67,34 +67,34 @@
     </div>
 
     <!-- Details Metadata Section -->
-    <div v-if="showDetails" class="px-4 py-3 bg-white/5 border-b border-white/5 space-y-4 animate-in slide-in-from-top duration-300">
+    <div v-if="showDetails" class="px-4 py-3 bg-white/5 border-b border-white/5 space-y-4 animate-in slide-in-from-top duration-300 nodrag cursor-text">
       <div v-if="metadata || isMetadataLoading" class="grid grid-cols-2 gap-3 pb-4 border-b border-white/5">
         <div v-if="isMetadataLoading" class="col-span-2 py-4 flex items-center justify-center space-x-2">
            <div class="w-3 h-3 border-2 border-primary border-t-transparent animate-spin rounded-full"></div>
            <span class="text-[10px] text-zinc-500 font-bold uppercase tracking-widest">Loading Media Info...</span>
         </div>
         <template v-else-if="metadata">
-          <div class="flex flex-col gap-0.5">
+          <div class="flex flex-col gap-0.5 select-text">
             <span class="text-[9px] font-bold text-zinc-500 dark:text-zinc-500 uppercase tracking-widest">Resolution</span>
             <span class="text-[11px] text-zinc-700 dark:text-zinc-200 font-mono">{{ metadata?.width }}x{{ metadata?.height }}</span>
           </div>
-          <div class="flex flex-col gap-0.5">
+          <div class="flex flex-col gap-0.5 select-text">
             <span class="text-[9px] font-bold text-zinc-500 dark:text-zinc-500 uppercase tracking-widest">Duration</span>
             <span class="text-[11px] text-zinc-700 dark:text-zinc-200 font-mono">{{ formatDurationSeconds(metadata?.duration) }}</span>
           </div>
-          <div class="flex flex-col gap-0.5">
+          <div class="flex flex-col gap-0.5 select-text">
             <span class="text-[9px] font-bold text-zinc-500 dark:text-zinc-500 uppercase tracking-widest">Frame Rate</span>
             <span class="text-[11px] text-zinc-700 dark:text-zinc-200 font-mono">{{ metadata?.fps }} FPS</span>
           </div>
-          <div class="flex flex-col gap-0.5">
+          <div class="flex flex-col gap-0.5 select-text">
             <span class="text-[9px] font-bold text-zinc-500 dark:text-zinc-500 uppercase tracking-widest">File Size</span>
             <span class="text-[11px] text-zinc-700 dark:text-zinc-200 font-mono">{{ formatFileSize(metadata?.size) }}</span>
           </div>
-          <div class="flex flex-col gap-0.5">
+          <div class="flex flex-col gap-0.5 select-text">
             <span class="text-[9px] font-bold text-zinc-500 dark:text-zinc-500 uppercase tracking-widest">Format</span>
             <span class="text-[11px] text-zinc-700 dark:text-zinc-200 font-mono">{{ metadata?.format?.split(',')[0] }}</span>
           </div>
-          <div v-if="metadata?.codec && metadata.codec !== 'unknown'" class="flex flex-col gap-0.5">
+          <div v-if="metadata?.codec && metadata.codec !== 'unknown'" class="flex flex-col gap-0.5 select-text">
             <span class="text-[9px] font-bold text-zinc-500 dark:text-zinc-500 uppercase tracking-widest">Codec</span>
             <span class="text-[11px] text-zinc-700 dark:text-zinc-200 font-mono capitalize">{{ metadata?.codec }}</span>
           </div>
@@ -108,9 +108,9 @@
            Timeline Segments Map
            <div class="h-px flex-1 bg-black/5 dark:bg-white/5"></div>
         </div>
-        <div class="max-h-64 overflow-y-auto custom-scrollbar space-y-2.5 pr-1">
+        <div class="max-h-64 overflow-y-auto custom-scrollbar space-y-2.5 pr-1 cursor-default">
           <div v-for="(segment, idx) in props.data.timeline" :key="idx" 
-               class="p-3 bg-black/[0.03] dark:bg-black/40 rounded-2xl border border-black/5 dark:border-white/5 hover:border-primary/30 transition-all flex flex-col gap-2 group/segment shadow-sm hover:shadow-md">
+               class="p-3 bg-black/[0.03] dark:bg-black/40 rounded-2xl border border-black/5 dark:border-white/5 hover:border-primary/30 transition-all flex flex-col gap-2 group/segment shadow-sm hover:shadow-md select-text cursor-text">
              <div class="flex justify-between items-center">
                <span class="text-[9px] font-black font-mono text-primary dark:text-blue-400 bg-primary/10 dark:bg-blue-400/10 px-1.5 py-0.5 rounded">
                  [{{ formatTime(segment.start) }} - {{ formatTime(segment.end) }}]
@@ -135,7 +135,7 @@
       v-model:attachedImages="attachedImages"
       placeholder="Adjust or follow up..."
       compact
-      class="p-2 border-t border-black/5 dark:border-white/5 bg-black/[0.02] dark:bg-white/[0.02]"
+      class="p-2 border-t border-black/5 dark:border-white/5 bg-black/[0.02] dark:bg-white/[0.02] nodrag"
       @send="submit"
     />
 

From 5ba93a1ff02555132b5227bd830ad884900c6948 Mon Sep 17 00:00:00 2001
From: Navid Shad <navidshad72@gmail.com>
Date: Sat, 11 Apr 2026 14:14:15 +0300
Subject: [PATCH 2/5] refactor: improve node interaction by adding drag handles
 and preventing drag on interactive elements

---
 .../src/components/graph/ChatInputNode.vue    |  3 ++-
 .../src/components/graph/ConversationNode.vue | 20 +++++++++----------
 .../src/components/graph/FrameNode.vue        |  2 +-
 .../src/components/graph/MediaNode.vue        | 14 ++++++-------
 .../src/components/graph/MessageNode.vue      |  6 +++---
 .../src/components/graph/TaskProgressNode.vue | 12 +++++------
 6 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/src/renderer/src/components/graph/ChatInputNode.vue b/src/renderer/src/components/graph/ChatInputNode.vue
index 55a7f5a..11dac6f 100644
--- a/src/renderer/src/components/graph/ChatInputNode.vue
+++ b/src/renderer/src/components/graph/ChatInputNode.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="glass-card glass-card-hover input-focus-ring p-3 rounded-2xl min-w-[320px]">
+  <div class="glass-card glass-card-hover input-focus-ring p-3 rounded-2xl min-w-[320px] cursor-move">
     <Handle type="target" :position="Position.Top" class="w-3 h-3 bg-zinc-300 dark:bg-zinc-600 border-2 border-white dark:border-zinc-800" />
     
     <BaseMessageInput 
@@ -7,6 +7,7 @@
       v-model:attachedImages="attachedImages"
       placeholder="Ask for summary, cover, etc..."
       compact
+      class="nodrag"
       @send="submit"
     />
   </div>
diff --git a/src/renderer/src/components/graph/ConversationNode.vue b/src/renderer/src/components/graph/ConversationNode.vue
index 5dcc651..c0ba25a 100644
--- a/src/renderer/src/components/graph/ConversationNode.vue
+++ b/src/renderer/src/components/graph/ConversationNode.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="glass-card p-0 rounded-3xl min-w-[320px] overflow-hidden flex flex-col group relative"
+  <div class="glass-card p-0 rounded-3xl min-w-[320px] overflow-hidden flex flex-col group relative cursor-move"
     :class="[isResizing ? '' : 'glass-card-hover transition-all duration-500']"
     :style="{ width: nodeWidth + 'px', maxWidth: '800px' }">
     <!-- Resize Handle -->
@@ -12,8 +12,8 @@
 
     <!-- Header with Actions -->
     <div
-      class="px-4 py-2 bg-black/5 dark:bg-white/5 border-b border-black/5 dark:border-white/5 flex items-center justify-between">
-      <div class="flex items-center space-x-2">
+      class="px-4 py-2 bg-black/5 dark:bg-white/5 border-b border-black/5 dark:border-white/5 flex items-center justify-between cursor-move">
+      <div class="flex items-center space-x-2 cursor-move">
         <div class="w-2 h-2 rounded-full bg-primary shadow-[0_0_8px_rgba(var(--primary),0.5)]"></div>
         <span
           class="text-[10px] font-black uppercase tracking-widest text-zinc-500 dark:text-zinc-400">Conversation</span>
@@ -87,16 +87,16 @@
             </div>
             <template v-else>
               <div v-html="renderMarkdown(msg.content)"
-                class="prose prose-sm max-w-none prose-p:my-0 prose-ul:my-2 prose-ol:my-2 prose-li:my-0 shadow-none border-none pointer-events-auto"
+                class="prose prose-sm max-w-none prose-p:my-0 prose-ul:my-2 prose-ol:my-2 prose-li:my-0 shadow-none border-none pointer-events-auto nodrag select-text cursor-text"
                 :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-if="msg.attachedImages && msg.attachedImages.length > 0" class="mt-2 mb-1 flex flex-wrap gap-1.5 nodrag">
               <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" />
+                <img :src="mediaUrl(img)" class="w-full h-full object-cover" draggable="false" />
                 <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">
@@ -109,13 +109,13 @@
 
             <!-- Files -->
             <div v-if="msg.files && msg.files.filter((f: any) => f.type !== 'original').length > 0"
-              class="mt-3 space-y-2">
+              class="mt-3 space-y-2 nodrag">
               <div v-for="file in msg.files.filter((f: any) => f.type !== 'original')" :key="file.url"
-                class="group/file p-2 bg-black/5 dark:bg-white/5 rounded-xl border border-black/5 dark:border-white/10 hover:border-primary/30 transition-all overflow-hidden">
+                class="group/file p-2 bg-black/5 dark:bg-white/5 rounded-xl border border-black/5 dark:border-white/10 hover:border-primary/30 transition-all overflow-hidden cursor-default">
                 <div v-if="file.url.match(/\.(jpg|jpeg|png|webp)$/i) || file.type === 'preview' || file.type === 'actual'"
                   class="mb-2 rounded-lg overflow-hidden border border-black/10 dark:border-white/10 aspect-video bg-black/20">
                   <img :src="mediaUrl(file.url)"
-                    class="w-full h-full object-cover group-hover/file:scale-110 transition-transform duration-500" />
+                    class="w-full h-full object-cover group-hover/file:scale-110 transition-transform duration-500" draggable="false" />
                 </div>
 
                 <div class="flex items-center justify-between gap-2">
@@ -186,7 +186,7 @@
     <!-- Input Section -->
     <BaseMessageInput v-if="data.hasInputInitially || showInput" v-model="input" v-model:attachedImages="attachedImages"
       :placeholder="data.hasInputInitially ? 'Ask a follow-up...' : 'Branch from here...'" compact submitIcon="IconSend"
-      class="p-2 border-t border-black/5 dark:border-white/5 bg-black/[0.02] dark:bg-white/[0.02]" @send="submit" />
+      class="p-2 border-t border-black/5 dark:border-white/5 bg-black/[0.02] dark:bg-white/[0.02] nodrag" @send="submit" />
 
     <Handle type="source" :position="Position.Bottom"
       class="w-3 h-3 bg-blue-500 border-2 border-white dark:border-zinc-800" />
diff --git a/src/renderer/src/components/graph/FrameNode.vue b/src/renderer/src/components/graph/FrameNode.vue
index fe174fd..476e6cd 100644
--- a/src/renderer/src/components/graph/FrameNode.vue
+++ b/src/renderer/src/components/graph/FrameNode.vue
@@ -3,7 +3,7 @@
     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' : ''
+      isResizing ? 'cursor-nwse-resize' : (data.isLocked ? 'cursor-default' : 'cursor-move')
     ]"
     :style="{ 
       width: `${nodeWidth}px`, 
diff --git a/src/renderer/src/components/graph/MediaNode.vue b/src/renderer/src/components/graph/MediaNode.vue
index 5c4ecc7..6fe57d4 100644
--- a/src/renderer/src/components/graph/MediaNode.vue
+++ b/src/renderer/src/components/graph/MediaNode.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="glass-card glass-card-hover p-0 rounded-3xl min-w-[280px] max-w-[320px] overflow-hidden flex flex-col group transition-all duration-300">
+  <div class="glass-card glass-card-hover p-0 rounded-3xl min-w-[280px] max-w-[320px] overflow-hidden flex flex-col group transition-all duration-300 cursor-move">
     <Handle v-if="data.hasInput !== false" type="target" :position="Position.Top" class="w-3 h-3 bg-zinc-500 border-2 border-white dark:border-zinc-800" />
     
     <!-- Video Preview Section -->
-    <div class="relative aspect-video bg-black overflow-hidden group/player">
+    <div class="relative aspect-video bg-black overflow-hidden group/player cursor-move">
       <video 
         v-if="videoUrl"
         ref="videoRef"
@@ -48,8 +48,8 @@
     </div>
 
     <!-- Metadata Details Section -->
-    <div v-if="showDetails" class="px-4 py-3 bg-white/5 border-b border-white/5 space-y-2 animate-in slide-in-from-top duration-300">
-      <div class="grid grid-cols-2 gap-3">
+    <div v-if="showDetails" class="px-4 py-3 bg-white/5 border-b border-white/5 space-y-2 animate-in slide-in-from-top duration-300 nodrag cursor-text">
+      <div class="grid grid-cols-2 gap-3 select-text">
         <div class="flex flex-col gap-0.5">
           <span class="text-[9px] font-bold text-zinc-500 dark:text-zinc-500 uppercase tracking-widest">Resolution</span>
           <span class="text-[11px] text-zinc-700 dark:text-zinc-200 font-mono">{{ metadata?.width }}x{{ metadata?.height }}</span>
@@ -78,8 +78,8 @@
     </div>
 
     <!-- Background Tasks Progress -->
-    <div v-if="activeTasks.length > 0" class="p-3 bg-white/5 border-b border-white/5 space-y-2">
-      <div v-for="task in activeTasks" :key="task.id" class="text-[10px]">
+    <div v-if="activeTasks.length > 0" class="p-3 bg-white/5 border-b border-white/5 space-y-2 nodrag cursor-text">
+      <div v-for="task in activeTasks" :key="task.id" class="text-[10px] select-text">
         <div class="flex justify-between items-center mb-1 text-zinc-400">
           <span class="truncate pr-2 font-bold uppercase tracking-tight">{{ task.status || task.name }}</span>
           <span>{{ task.progress !== undefined ? `${task.progress}%` : '' }}</span>
@@ -95,7 +95,7 @@
       v-model:attachedImages="attachedImages"
       placeholder="Start a new analysis..."
       compact
-      class="p-2 border-t border-black/5 dark:border-white/5 bg-black/[0.02] dark:bg-white/[0.02]"
+      class="p-2 border-t border-black/5 dark:border-white/5 bg-black/[0.02] dark:bg-white/[0.02] nodrag"
       @send="submit"
     />
 
diff --git a/src/renderer/src/components/graph/MessageNode.vue b/src/renderer/src/components/graph/MessageNode.vue
index 8438fbe..9292373 100644
--- a/src/renderer/src/components/graph/MessageNode.vue
+++ b/src/renderer/src/components/graph/MessageNode.vue
@@ -1,6 +1,6 @@
 <template>
   <div 
-    class="glass-card glass-card-hover p-4 rounded-2xl min-w-[200px] max-w-[300px]"
+    class="glass-card glass-card-hover p-4 rounded-2xl min-w-[200px] max-w-[300px] cursor-move"
     :class="[
       data.sender === 'user' 
         ? 'bg-primary/10 border-primary/20 text-primary-dark shadow-sm shadow-primary/5' 
@@ -14,12 +14,12 @@
       <button 
         v-if="data.sender === 'user'"
         @click.stop="videoStore.retryMessage(id)"
-        class="bg-blue-100 dark:bg-zinc-700/50 hover:bg-blue-200 dark:hover:bg-zinc-600 rounded px-1.5 py-0.5 text-[9px] uppercase font-bold transition-colors cursor-pointer pointer-events-auto"
+        class="bg-blue-100 dark:bg-zinc-700/50 hover:bg-blue-200 dark:hover:bg-zinc-600 rounded px-1.5 py-0.5 text-[9px] uppercase font-bold transition-colors cursor-pointer pointer-events-auto nodrag"
       >
         Retry
       </button>
     </div>
-    <div class="text-sm whitespace-pre-wrap leading-snug">{{ data.text }}</div>
+    <div class="text-sm whitespace-pre-wrap leading-snug nodrag select-text cursor-text">{{ data.text }}</div>
     
     <Handle type="source" :position="Position.Bottom" class="w-3 h-3 bg-blue-500 border-2 border-white dark:border-zinc-800" />
   </div>
diff --git a/src/renderer/src/components/graph/TaskProgressNode.vue b/src/renderer/src/components/graph/TaskProgressNode.vue
index e881b7f..4a2fc40 100644
--- a/src/renderer/src/components/graph/TaskProgressNode.vue
+++ b/src/renderer/src/components/graph/TaskProgressNode.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="glass-card glass-card-hover p-4 rounded-2xl min-w-[250px]">
+  <div class="glass-card glass-card-hover p-4 rounded-2xl min-w-[250px] cursor-move">
     <Handle type="target" :position="Position.Top" class="w-3 h-3 bg-zinc-300 dark:bg-zinc-600 border-2 border-white dark:border-zinc-800" />
     
-    <div class="flex items-center justify-between mb-3">
-      <div class="flex items-center space-x-2">
+    <div class="flex items-center justify-between mb-3 cursor-move">
+      <div class="flex items-center space-x-2 cursor-move">
         <div v-if="data.status === 'running'" class="w-4 h-4 rounded-full border-2 border-orange-500 border-t-transparent animate-spin"></div>
         <div v-else-if="data.status === 'completed'" class="text-green-500">✓</div>
         <div v-else-if="data.status === 'failed'" class="text-red-500">✗</div>
@@ -17,7 +17,7 @@
         <SlimTooltip v-if="data.onStop && data.status === 'running'" :text="isConfirmingStop ? 'Click again to confirm' : 'Stop process'" placement="top">
           <button 
             @click="handleStop" 
-            class="flex items-center space-x-1.5 px-2 py-1 rounded-lg transition-all border group/stop"
+            class="flex items-center space-x-1.5 px-2 py-1 rounded-lg transition-all border group/stop nodrag"
             :class="isConfirmingStop ? 'bg-orange-500/20 text-orange-500 border-orange-500' : 'bg-red-500/10 hover:bg-red-500/20 text-red-500 border-red-500/20 hover:border-red-500/40'"
           >
             <div class="w-2 h-2 rounded-sm" :class="isConfirmingStop ? 'bg-orange-500 animate-pulse' : 'bg-red-500'"></div>
@@ -28,7 +28,7 @@
         </SlimTooltip>
 
         <SlimTooltip v-if="data.onDelete" text="Delete task node" placement="top">
-          <button @click="data.onDelete" class="p-1 hover:bg-red-500/10 rounded-md text-zinc-400 hover:text-red-500 transition-colors">
+          <button @click="data.onDelete" class="p-1 hover:bg-red-500/10 rounded-md text-zinc-400 hover:text-red-500 transition-colors nodrag">
             <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" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
           </button>
         </SlimTooltip>
@@ -36,7 +36,7 @@
     </div>
 
     <!-- Progress Steps -->
-    <div class="space-y-2">
+    <div class="space-y-2 nodrag cursor-text">
       <div v-for="(step, index) in data.steps" :key="index" class="flex items-center space-x-2 text-xs">
         <div 
           class="w-2 h-2 rounded-full"

From 794ac1335fd973340189292546368e6e5dfb5ace Mon Sep 17 00:00:00 2001
From: Navid Shad <navidshad72@gmail.com>
Date: Sat, 11 Apr 2026 15:15:59 +0300
Subject: [PATCH 3/5] feat: implement space-to-pan navigation mode with
 improved graph interaction handling

---
 .../src/components/graph/ChatInputNode.vue    |  2 +-
 .../src/components/graph/ConversationNode.vue |  2 +-
 .../src/components/graph/GraphToolbar.vue     | 13 ++-
 .../src/components/graph/SummaryNode.vue      |  2 +-
 .../src/components/graph/ThumbnailNode.vue    |  2 +-
 .../src/components/graph/VideoNode.vue        |  2 +-
 src/renderer/src/pages/GraphChatPage.vue      | 93 ++++++++++++++++++-
 7 files changed, 103 insertions(+), 13 deletions(-)

diff --git a/src/renderer/src/components/graph/ChatInputNode.vue b/src/renderer/src/components/graph/ChatInputNode.vue
index 11dac6f..85ea963 100644
--- a/src/renderer/src/components/graph/ChatInputNode.vue
+++ b/src/renderer/src/components/graph/ChatInputNode.vue
@@ -7,7 +7,7 @@
       v-model:attachedImages="attachedImages"
       placeholder="Ask for summary, cover, etc..."
       compact
-      class="nodrag"
+      class="nodrag interactive-in-pan"
       @send="submit"
     />
   </div>
diff --git a/src/renderer/src/components/graph/ConversationNode.vue b/src/renderer/src/components/graph/ConversationNode.vue
index c0ba25a..60cce1a 100644
--- a/src/renderer/src/components/graph/ConversationNode.vue
+++ b/src/renderer/src/components/graph/ConversationNode.vue
@@ -186,7 +186,7 @@
     <!-- Input Section -->
     <BaseMessageInput v-if="data.hasInputInitially || showInput" v-model="input" v-model:attachedImages="attachedImages"
       :placeholder="data.hasInputInitially ? 'Ask a follow-up...' : 'Branch from here...'" compact submitIcon="IconSend"
-      class="p-2 border-t border-black/5 dark:border-white/5 bg-black/[0.02] dark:bg-white/[0.02] nodrag" @send="submit" />
+      class="p-2 border-t border-black/5 dark:border-white/5 bg-black/[0.02] dark:bg-white/[0.02] nodrag interactive-in-pan" @send="submit" />
 
     <Handle type="source" :position="Position.Bottom"
       class="w-3 h-3 bg-blue-500 border-2 border-white dark:border-zinc-800" />
diff --git a/src/renderer/src/components/graph/GraphToolbar.vue b/src/renderer/src/components/graph/GraphToolbar.vue
index e21071e..14bfaad 100644
--- a/src/renderer/src/components/graph/GraphToolbar.vue
+++ b/src/renderer/src/components/graph/GraphToolbar.vue
@@ -6,8 +6,12 @@
         class="flex items-center justify-center w-9 h-9 rounded-lg transition-all duration-300"
         :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 class="w-4.5 h-4.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+          <path d="M7 13v-8a1 1 0 0 1 2 0v8" />
+          <path d="M11 11v-4a1 1 0 0 1 2 0v4" />
+          <path d="M15 11v-2a1 1 0 0 1 2 0v6" />
+          <path d="M5 15v-2a1 1 0 0 1 2 0v7" />
+          <path d="M19 13v4a4 4 0 0 1-4 4h-6a5 5 0 0 1-5-5v-1" />
         </svg>
       </button>
     </SlimTooltip>
@@ -20,9 +24,8 @@
         class="flex items-center justify-center w-9 h-9 rounded-lg transition-all duration-300"
         :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 class="w-4.5 h-4.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5"></path>
         </svg>
       </button>
     </SlimTooltip>
diff --git a/src/renderer/src/components/graph/SummaryNode.vue b/src/renderer/src/components/graph/SummaryNode.vue
index f9e3d6b..c71ab5f 100644
--- a/src/renderer/src/components/graph/SummaryNode.vue
+++ b/src/renderer/src/components/graph/SummaryNode.vue
@@ -26,7 +26,7 @@
       v-model:attachedImages="attachedImages"
       placeholder="Adjust or follow up..."
       compact
-      class="p-2 border-t border-black/5 dark:border-white/5 bg-black/[0.02] dark:bg-white/[0.02] nodrag"
+      class="p-2 border-t border-black/5 dark:border-white/5 bg-black/[0.02] dark:bg-white/[0.02] nodrag interactive-in-pan"
       @send="submit"
     />
 
diff --git a/src/renderer/src/components/graph/ThumbnailNode.vue b/src/renderer/src/components/graph/ThumbnailNode.vue
index 23d5658..583a18c 100644
--- a/src/renderer/src/components/graph/ThumbnailNode.vue
+++ b/src/renderer/src/components/graph/ThumbnailNode.vue
@@ -180,7 +180,7 @@
       v-model:attachedImages="attachedImages"
       placeholder="Adjust or follow up..."
       compact
-      class="p-2 border-t border-black/5 dark:border-white/5 bg-black/[0.02] dark:bg-white/[0.02] nodrag"
+      class="p-2 border-t border-black/5 dark:border-white/5 bg-black/[0.02] dark:bg-white/[0.02] nodrag interactive-in-pan"
       @send="submit"
     />
 
diff --git a/src/renderer/src/components/graph/VideoNode.vue b/src/renderer/src/components/graph/VideoNode.vue
index 6383f69..ac703ca 100644
--- a/src/renderer/src/components/graph/VideoNode.vue
+++ b/src/renderer/src/components/graph/VideoNode.vue
@@ -135,7 +135,7 @@
       v-model:attachedImages="attachedImages"
       placeholder="Adjust or follow up..."
       compact
-      class="p-2 border-t border-black/5 dark:border-white/5 bg-black/[0.02] dark:bg-white/[0.02] nodrag"
+      class="p-2 border-t border-black/5 dark:border-white/5 bg-black/[0.02] dark:bg-white/[0.02] nodrag interactive-in-pan"
       @send="submit"
     />
 
diff --git a/src/renderer/src/pages/GraphChatPage.vue b/src/renderer/src/pages/GraphChatPage.vue
index 072bc2d..0ce48b9 100644
--- a/src/renderer/src/pages/GraphChatPage.vue
+++ b/src/renderer/src/pages/GraphChatPage.vue
@@ -23,9 +23,12 @@
     >
       <GraphToolbar v-model="graphMode" />
 
-      <VueFlow :nodes="graphStore.nodes" :edges="graphStore.edges" class="vue-flow-custom" @pane-ready="onPaneReady"
+      <VueFlow :nodes="graphStore.nodes" :edges="graphStore.edges" 
+        :class="['vue-flow-custom', { 'pan-mode': graphMode === 'pan' }]" 
+        @pane-ready="onPaneReady"
         @node-drag-stop="onNodeDragStop" :min-zoom="0.01" :max-zoom="4"
         :pan-on-drag="graphMode === 'pan'" 
+        :nodes-draggable="graphMode !== 'pan'"
         :selection-key-code="graphMode === 'select' ? true : null" 
         :pan-on-scroll="true"
         :zoom-on-scroll="true"
@@ -79,7 +82,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, computed, ref } from 'vue'
+import { onMounted, onUnmounted, computed, ref } from 'vue'
 import { VueFlow, useVueFlow } from '@vue-flow/core'
 import { Background } from '@vue-flow/background'
 import { Controls } from '@vue-flow/controls'
@@ -106,7 +109,8 @@ import { useGraphLayout } from '../composables/useGraphLayout'
 import GraphHeader from '../components/graph/GraphHeader.vue'
 import GraphToolbar from '../components/graph/GraphToolbar.vue'
 
-const graphMode = ref<'pan' | 'select' | 'frame'>('pan')
+const graphMode = ref<'pan' | 'select' | 'frame'>('select')
+const isTemporaryPan = ref(false)
 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)
@@ -316,12 +320,46 @@ const onPaneMouseUp = async (event: MouseEvent) => {
   frameCreationRect.value = null
 }
 
+const handleKeyDown = (e: KeyboardEvent) => {
+  if (e.code === 'Space' && !isTemporaryPan.value) {
+    const activeElement = document.activeElement
+    const isInput = activeElement && (
+      activeElement.tagName === 'INPUT' || 
+      activeElement.tagName === 'TEXTAREA' || 
+      (activeElement as HTMLElement).isContentEditable
+    )
+    
+    if (!isInput) {
+      e.preventDefault()
+      if (graphMode.value !== 'pan') {
+        graphMode.value = 'pan'
+        isTemporaryPan.value = true
+      }
+    }
+  }
+}
+
+const handleKeyUp = (e: KeyboardEvent) => {
+  if (e.code === 'Space' && isTemporaryPan.value) {
+    graphMode.value = 'select'
+    isTemporaryPan.value = false
+  }
+}
+
 onMounted(async () => {
   const videoId = route.params.id as string || 'default'
 
   if (videoId !== 'default') {
     await videoStore.selectThread(videoId)
   }
+
+  window.addEventListener('keydown', handleKeyDown)
+  window.addEventListener('keyup', handleKeyUp)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeyDown)
+  window.removeEventListener('keyup', handleKeyUp)
 })
 </script>
 
@@ -336,4 +374,53 @@ onMounted(async () => {
   padding: 0;
   border-radius: 0;
 }
+
+/* Ensure normal cursor in selection mode */
+.vue-flow-custom:not(.pan-mode) .vue-flow__pane {
+  cursor: default !important;
+}
+
+.vue-flow-custom:not(.pan-mode) .cursor-move {
+  cursor: default !important;
+}
+
+/* Pan Mode Interactions - Simplified for maximum navigation reliability */
+.pan-mode.vue-flow-custom {
+  cursor: grab !important;
+  user-select: none !important;
+}
+
+.pan-mode.vue-flow-custom .vue-flow__pane {
+  cursor: grab !important;
+}
+
+.pan-mode.vue-flow-custom .vue-flow__pane.dragging {
+  cursor: grabbing !important;
+}
+
+/* Force grab cursor on EVERYTHING in pan mode */
+.pan-mode.vue-flow-custom * {
+  cursor: inherit !important;
+}
+
+/* Exception: allow text cursor ONLY when typing in a focused input */
+.pan-mode.vue-flow-custom input:focus,
+.pan-mode.vue-flow-custom textarea:focus {
+  cursor: text !important;
+  user-select: auto !important;
+}
+
+/* Disable interaction on graph elements to allow perfect click-through panning */
+.pan-mode.vue-flow-custom .vue-flow__node,
+.pan-mode.vue-flow-custom .vue-flow__edge,
+.pan-mode.vue-flow-custom .vue-flow__handle,
+.pan-mode.vue-flow-custom .vue-flow__edge-path {
+  pointer-events: none !important;
+}
+
+/* Re-enable interaction specifically for chat inputs */
+.pan-mode.vue-flow-custom .interactive-in-pan {
+  pointer-events: auto !important;
+  user-select: auto !important;
+}
 </style>

From bddb7db7080eab288f0b5c2a05472db8ab269fff Mon Sep 17 00:00:00 2001
From: Navid Shad <navidshad72@gmail.com>
Date: Sat, 11 Apr 2026 15:20:31 +0300
Subject: [PATCH 4/5] refactor: simplify cursor styling in GraphChatPage by
 removing redundant move cursor override

---
 src/renderer/src/pages/GraphChatPage.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/renderer/src/pages/GraphChatPage.vue b/src/renderer/src/pages/GraphChatPage.vue
index 0ce48b9..088aaf1 100644
--- a/src/renderer/src/pages/GraphChatPage.vue
+++ b/src/renderer/src/pages/GraphChatPage.vue
@@ -375,15 +375,11 @@ onUnmounted(() => {
   border-radius: 0;
 }
 
-/* Ensure normal cursor in selection mode */
+/* Ensure normal pane cursor in selection mode */
 .vue-flow-custom:not(.pan-mode) .vue-flow__pane {
   cursor: default !important;
 }
 
-.vue-flow-custom:not(.pan-mode) .cursor-move {
-  cursor: default !important;
-}
-
 /* Pan Mode Interactions - Simplified for maximum navigation reliability */
 .pan-mode.vue-flow-custom {
   cursor: grab !important;

From 6408a55a3db7c15c9cf6e2c22d3d772b5abdd798 Mon Sep 17 00:00:00 2001
From: Navid Shad <navidshad72@gmail.com>
Date: Sat, 11 Apr 2026 17:31:44 +0300
Subject: [PATCH 5/5] feat: replace inline SVG icons with Iconify tabler
 components in GraphToolbar

---
 package-lock.json                             | 36 ++++++++++++++-
 package.json                                  |  2 +
 .../src/components/graph/GraphToolbar.vue     | 44 +++++++------------
 tailwind.config.js                            |  6 ++-
 yarn.lock                                     | 19 ++++++++
 5 files changed, 75 insertions(+), 32 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 73aeedf..d5a30bb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,11 @@
 {
-  "name": "vgtu-video-summarization",
+  "name": "frameflow",
   "version": "1.1.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "vgtu-video-summarization",
+      "name": "frameflow",
       "version": "1.1.7",
       "hasInstallScript": true,
       "license": "MIT",
@@ -31,6 +31,8 @@
       "devDependencies": {
         "@electron-toolkit/preload": "^3.0.0",
         "@electron-toolkit/utils": "^3.0.0",
+        "@iconify-json/tabler": "^1.2.33",
+        "@iconify/tailwind": "^1.2.0",
         "@types/markdown-it": "^14.1.2",
         "@types/node": "^25.2.3",
         "@types/uuid": "^10.0.0",
@@ -651,6 +653,36 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/@iconify-json/tabler": {
+      "version": "1.2.33",
+      "resolved": "https://registry.npmjs.org/@iconify-json/tabler/-/tabler-1.2.33.tgz",
+      "integrity": "sha512-q9nUQfE/cjIrGh5bAKHTphitAZpT0kX9SxDgZo3Sx8ofeDTsaHVdRwrn+CfKiJ5vQ1b1btqVwizXzIgz9KEPjA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
+    "node_modules/@iconify/tailwind": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@iconify/tailwind/-/tailwind-1.2.0.tgz",
+      "integrity": "sha512-KgpIHWOTcRYw1XcoUqyNSrmYyfLLqZYu3AmP8zdfLk0F5TqRO8YerhlvlQmGfn7rJXgPeZN569xPAJnJ53zZxA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/cyberalien"
+      }
+    },
+    "node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
diff --git a/package.json b/package.json
index 2c42ecd..3a6a868 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,8 @@
   "devDependencies": {
     "@electron-toolkit/preload": "^3.0.0",
     "@electron-toolkit/utils": "^3.0.0",
+    "@iconify-json/tabler": "^1.2.33",
+    "@iconify/tailwind": "^1.2.0",
     "@types/markdown-it": "^14.1.2",
     "@types/node": "^25.2.3",
     "@types/uuid": "^10.0.0",
diff --git a/src/renderer/src/components/graph/GraphToolbar.vue b/src/renderer/src/components/graph/GraphToolbar.vue
index 14bfaad..22fae52 100644
--- a/src/renderer/src/components/graph/GraphToolbar.vue
+++ b/src/renderer/src/components/graph/GraphToolbar.vue
@@ -1,52 +1,38 @@
 <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">
-    <SlimTooltip text="Pan View" placement="bottom">
-      <button 
-        @click="$emit('update:modelValue', 'pan')"
+  <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">
+    <SlimTooltip text="Pan Tool" placement="bottom">
+      <button @click="$emit('update:modelValue', 'pan')"
         class="flex items-center justify-center w-9 h-9 rounded-lg transition-all duration-300"
-        :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" stroke-width="2.5">
-          <path d="M7 13v-8a1 1 0 0 1 2 0v8" />
-          <path d="M11 11v-4a1 1 0 0 1 2 0v4" />
-          <path d="M15 11v-2a1 1 0 0 1 2 0v6" />
-          <path d="M5 15v-2a1 1 0 0 1 2 0v7" />
-          <path d="M19 13v4a4 4 0 0 1-4 4h-6a5 5 0 0 1-5-5v-1" />
-        </svg>
+        :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'">
+        <Icon name="iconify tabler--hand-stop" class="w-5 h-5" />
       </button>
     </SlimTooltip>
-    
+
     <div class="w-px h-4 bg-zinc-200 dark:bg-zinc-800 mx-1"></div>
-    
+
     <SlimTooltip text="Select Tool" placement="bottom">
-      <button 
-        @click="$emit('update:modelValue', 'select')"
+      <button @click="$emit('update:modelValue', 'select')"
         class="flex items-center justify-center w-9 h-9 rounded-lg transition-all duration-300"
-        :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" stroke-width="2.5">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5"></path>
-        </svg>
+        :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'">
+        <Icon name="iconify tabler--pointer" class="w-5 h-5" />
       </button>
     </SlimTooltip>
 
     <div class="w-px h-4 bg-zinc-200 dark:bg-zinc-800 mx-1"></div>
 
     <SlimTooltip text="Group Frames" placement="bottom">
-      <button 
-        @click="$emit('update:modelValue', 'frame')"
+      <button @click="$emit('update:modelValue', 'frame')"
         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>
+        :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'">
+        <Icon name="iconify tabler--layout-grid" class="w-5 h-5" />
       </button>
     </SlimTooltip>
   </div>
 </template>
 
 <script setup lang="ts">
+import { Icon, IconButton } from 'pilotui/elements'
 import SlimTooltip from '../SlimTooltip.vue'
 type ToolMode = 'pan' | 'select' | 'frame'
 
diff --git a/tailwind.config.js b/tailwind.config.js
index cf793a8..62b1d0f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,3 +1,6 @@
+import { addIconSelectors } from '@iconify/tailwind'
+import typography from '@tailwindcss/typography'
+
 /** @type {import('tailwindcss').Config} */
 export default {
   content: [
@@ -55,6 +58,7 @@ export default {
   },
   darkMode: 'class',
   plugins: [
-    require('@tailwindcss/typography'),
+    typography,
+    addIconSelectors(['tabler']),
   ],
 }
diff --git a/yarn.lock b/yarn.lock
index 9fc48c9..b56fed0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -381,6 +381,25 @@
   dependencies:
     "@tanstack/vue-virtual" "^3.0.0-beta.60"
 
+"@iconify-json/tabler@^1.2.33":
+  version "1.2.33"
+  resolved "https://registry.npmjs.org/@iconify-json/tabler/-/tabler-1.2.33.tgz"
+  integrity sha512-q9nUQfE/cjIrGh5bAKHTphitAZpT0kX9SxDgZo3Sx8ofeDTsaHVdRwrn+CfKiJ5vQ1b1btqVwizXzIgz9KEPjA==
+  dependencies:
+    "@iconify/types" "*"
+
+"@iconify/tailwind@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/@iconify/tailwind/-/tailwind-1.2.0.tgz"
+  integrity sha512-KgpIHWOTcRYw1XcoUqyNSrmYyfLLqZYu3AmP8zdfLk0F5TqRO8YerhlvlQmGfn7rJXgPeZN569xPAJnJ53zZxA==
+  dependencies:
+    "@iconify/types" "^2.0.0"
+
+"@iconify/types@*", "@iconify/types@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz"
+  integrity sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==
+
 "@isaacs/cliui@^8.0.2":
   version "8.0.2"
   resolved "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz"