diff --git a/src/main/index.ts b/src/main/index.ts
index 6cbda25..5c573bd 100644
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -371,6 +371,10 @@ app.whenReady().then(() => {
 		return await threadManager.updateThreadNodePositions(threadId, positions)
 	})
 
+	ipcMain.handle('toggle-reference-frame', async (_event, { threadId, filePath }) => {
+		return await threadManager.toggleThreadReferenceFrame(threadId, filePath)
+	})
+
 	ipcMain.handle('show-confirmation', async (_event, { title, message, detail, type = 'question', buttons = ['Cancel', 'Yes'], defaultId = 1, cancelId = 0 }) => {
 		const focusedWindow = BrowserWindow.getFocusedWindow()
 		if (!focusedWindow) return cancelId
diff --git a/src/main/threads/index.ts b/src/main/threads/index.ts
index de601fa..9c8fcd3 100644
--- a/src/main/threads/index.ts
+++ b/src/main/threads/index.ts
@@ -653,6 +653,30 @@ class ThreadManager {
 
 		return !!result
 	}
+
+	async toggleThreadReferenceFrame(threadId: string, filePath: string): Promise<boolean> {
+		const thread = this.getThread(threadId)
+		if (!thread) return false
+
+		const currentRefs = thread.preprocessing?.['reference-frames'] || []
+		const index = currentRefs.indexOf(filePath)
+		
+		let newRefs: string[]
+		if (index === -1) {
+			newRefs = [...currentRefs, filePath]
+		} else {
+			newRefs = currentRefs.filter(r => r !== filePath)
+		}
+
+		const result = await this.updateThread(threadId, {
+			preprocessing: {
+				...(thread.preprocessing || {}),
+				'reference-frames': newRefs
+			}
+		})
+
+		return !!result
+	}
 }
 
 export const threadManager = new ThreadManager()
diff --git a/src/preload/index.ts b/src/preload/index.ts
index 23c2984..ba8ba01 100644
--- a/src/preload/index.ts
+++ b/src/preload/index.ts
@@ -58,6 +58,8 @@ const api = {
 		ipcRenderer.invoke('remove-single-message', { threadId, messageId }),
 	updateMessage: (threadId: string, messageId: string, updates: any) =>
 		ipcRenderer.invoke('update-message', { threadId, messageId, updates }),
+	toggleReferenceFrame: (threadId: string, filePath: string) =>
+		ipcRenderer.invoke('toggle-reference-frame', { threadId, filePath }),
 	showConfirmation: (options: { title: string, message: string, detail?: string, type?: string, buttons?: string[], defaultId?: number, cancelId?: number }) =>
 		ipcRenderer.invoke('show-confirmation', options),
 	saveVideo: (sourcePath: string) => ipcRenderer.invoke('save-video', sourcePath),
diff --git a/src/renderer/src/components/SlimTooltip.vue b/src/renderer/src/components/SlimTooltip.vue
new file mode 100644
index 0000000..d2768fe
--- /dev/null
+++ b/src/renderer/src/components/SlimTooltip.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="relative group/slim-tooltip inline-flex items-center justify-center">
+    <!-- Trigger -->
+    <slot />
+    
+    <!-- Tooltip Content -->
+    <div 
+      class="absolute invisible group-hover/slim-tooltip:visible opacity-0 group-hover/slim-tooltip:opacity-100 transition-all duration-200 z-[100] pointer-events-none"
+      :class="[
+        positionClasses,
+        'px-2 py-1 rounded bg-zinc-900/90 backdrop-blur-md border border-white/10 text-white text-[9px] font-black uppercase tracking-[0.05em] whitespace-nowrap shadow-2xl flex items-center gap-1.5'
+      ]"
+    >
+      {{ text }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{
+  text: string
+  placement?: 'left' | 'right' | 'top' | 'bottom'
+}>(), {
+  placement: 'left'
+})
+
+const positionClasses = computed(() => {
+  switch (props.placement) {
+    case 'top':
+      return 'bottom-full mb-2 left-1/2 -translate-x-1/2 scale-90 group-hover/slim-tooltip:scale-100'
+    case 'bottom':
+      return 'top-full mt-2 left-1/2 -translate-x-1/2 scale-90 group-hover/slim-tooltip:scale-100'
+    case 'right':
+      return 'left-full ml-2 top-1/2 -translate-y-1/2 scale-90 group-hover/slim-tooltip:scale-100'
+    case 'left':
+    default:
+      return 'right-full mr-2 top-1/2 -translate-y-1/2 scale-90 group-hover/slim-tooltip:scale-100'
+  }
+})
+</script>
+
+<style scoped>
+/* Scoped styles removed as they were interfering with pointer events */
+</style>
diff --git a/src/renderer/src/components/chat/BaseMessageInput.vue b/src/renderer/src/components/chat/BaseMessageInput.vue
index 3cc9e6e..604f261 100644
--- a/src/renderer/src/components/chat/BaseMessageInput.vue
+++ b/src/renderer/src/components/chat/BaseMessageInput.vue
@@ -6,15 +6,16 @@
         class="relative rounded-xl overflow-hidden group shadow-sm border border-zinc-200 dark:border-zinc-800 transition-all hover:scale-105"
         :class="compact ? 'w-10 h-10' : 'w-16 h-16'">
         <img :src="normalizeUrl(img)" class="w-full h-full object-cover" />
-        <button 
-          @click.stop="removeAttachment(idx)"
-          class="absolute top-1 right-1 p-1 bg-black/60 text-white rounded-full opacity-0 group-hover:opacity-100 transition-all hover:bg-red-500 hover:scale-110 z-10 shadow-lg"
-          title="Remove attachment"
-        >
-          <svg xmlns="http://www.w3.org/2000/svg" class="w-2.5 h-2.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M18 6 6 18"/><path d="m6 6 12 12"/>
-          </svg>
-        </button>
+        <SlimTooltip text="Remove attachment" placement="top">
+          <button 
+            @click.stop="removeAttachment(idx)"
+            class="absolute top-1 right-1 p-1 bg-black/60 text-white rounded-full opacity-0 group-hover:opacity-100 transition-all hover:bg-red-500 hover:scale-110 z-10 shadow-lg"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" class="w-2.5 h-2.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M18 6 6 18"/><path d="m6 6 12 12"/>
+            </svg>
+          </button>
+        </SlimTooltip>
       </div>
     </div>
 
@@ -25,8 +26,10 @@
         : 'space-x-4 p-1.5 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white/50 dark:bg-zinc-950/20 backdrop-blur-xl shadow-lg focus-within:ring-2 focus-within:ring-primary/20'
     ]">
       <!-- Attachment Toggle -->
-      <IconButton @click="showAttachmentModal = true" icon="IconPlus" :size="compact ? 'sm' : 'md'" rounded="full"
-        variant="ghost" class="mb-0.5 text-zinc-400 hover:text-primary transition-all active:scale-95" />
+      <SlimTooltip text="Add Attachments" :placement="compact ? 'top' : 'bottom'">
+        <IconButton @click="showAttachmentModal = true" icon="IconPlus" :size="compact ? 'sm' : 'md'" rounded="full"
+          variant="ghost" class="mb-0.5 text-zinc-400 hover:text-primary transition-all active:scale-95" />
+      </SlimTooltip>
 
       <div class="flex-1 min-w-0">
         <textarea v-model="internalText" ref="textareaRef" :placeholder="placeholder" :rows="1"
@@ -35,8 +38,10 @@
           @keydown.enter="handleEnter"></textarea>
       </div>
 
-      <IconButton @click="handleSend" :icon="submitIcon" color="primary" :size="compact ? 'xs' : 'sm'" rounded="lg"
-        :disabled="!internalText.trim() && attachedImages.length === 0" />
+      <SlimTooltip :text="submitIcon === 'IconSend' ? 'Send Message (Enter)' : 'Execute Task'" :placement="compact ? 'top' : 'bottom'">
+        <IconButton @click="handleSend" :icon="submitIcon" color="primary" :size="compact ? 'xs' : 'sm'" rounded="lg"
+          :disabled="!internalText.trim() && attachedImages.length === 0" />
+      </SlimTooltip>
     </div>
 
     <AttachmentModal v-model="showAttachmentModal" @select="handleImagesSelected" />
@@ -46,6 +51,7 @@
 <script setup lang="ts">
 import { ref, watch, onMounted } from 'vue'
 import { IconButton } from 'pilotui/elements'
+import SlimTooltip from '../SlimTooltip.vue'
 import AttachmentModal from './AttachmentModal.vue'
 
 const props = withDefaults(defineProps<{
diff --git a/src/renderer/src/components/graph/ConversationNode.vue b/src/renderer/src/components/graph/ConversationNode.vue
index 61d08a6..5dcc651 100644
--- a/src/renderer/src/components/graph/ConversationNode.vue
+++ b/src/renderer/src/components/graph/ConversationNode.vue
@@ -19,22 +19,26 @@
           class="text-[10px] font-black uppercase tracking-widest text-zinc-500 dark:text-zinc-400">Conversation</span>
       </div>
       <div class="flex items-center space-x-1">
-        <button v-if="!showInput && !data.hasInputInitially" @click="showInput = true"
-          class="p-1 hover:bg-blue-500/10 rounded-md text-zinc-400 hover:text-blue-500 transition-colors"
-          title="Branch from this node">
-          <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="M12 4v16m8-8H4"></path>
-          </svg>
-        </button>
-        <button @click="data.onDelete"
-          class="p-1 hover:bg-red-500/10 rounded-md text-zinc-400 hover:text-red-500 transition-colors"
-          title="Delete node and branches">
-          <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 v-if="!showInput && !data.hasInputInitially" text="Branch from this node" placement="bottom">
+          <button @click="showInput = true"
+            class="p-1 hover:bg-blue-500/10 rounded-md text-zinc-400 hover:text-blue-500 transition-colors"
+          >
+            <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="M12 4v16m8-8H4"></path>
+            </svg>
+          </button>
+        </SlimTooltip>
+        <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"
+          >
+            <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>
       </div>
     </div>
 
@@ -67,104 +71,113 @@
           </div>
         </div>
 
-        <div
-          class="px-4 py-2.5 rounded-[1.25rem] text-sm leading-relaxed max-w-[90%] break-words relative overflow-hidden transition-all duration-300 group/msg"
-          :class="[
-            msg.role === 'user'
-              ? 'bg-gradient-to-br from-primary to-primary-dark text-white rounded-tr-none shadow-lg shadow-primary/20 font-medium'
-              : 'bg-white/60 dark:bg-zinc-800/60 text-zinc-900 dark:text-zinc-100 rounded-tl-none border border-black/5 dark:border-white/5 backdrop-blur-sm',
-            msg.isPending ? 'ring-2 ring-primary/20 bg-primary/5 dark:bg-primary/10 transition-all duration-1000 animate-pulse' : ''
-          ]">
-
-          <button v-if="msg.content && !msg.isPending" @click="copyMessage(msg.id, msg.content)"
-            class="absolute top-1 right-1 p-1.5 rounded-lg opacity-0 group-hover/msg:opacity-100 transition-all duration-200 z-10"
+        <div class="flex items-start gap-0.5 w-full group/msg" :class="msg.role === 'user' ? 'flex-row-reverse' : 'flex-row'">
+          <div
+            class="px-4 py-2.5 rounded-[1.25rem] text-sm leading-relaxed max-w-[85%] break-words relative transition-all duration-300"
             :class="[
               msg.role === 'user'
-                ? 'hover:bg-white/10 text-white/70 hover:text-white'
-                : 'hover:bg-black/5 dark:hover:bg-white/5 text-zinc-400 dark:text-zinc-500 hover:text-zinc-600 dark:hover:text-zinc-300'
-            ]" title="Copy message">
-            <svg v-if="copiedId !== msg.id" 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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z">
-              </path>
-            </svg>
-            <svg v-else class="w-3.5 h-3.5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
-            </svg>
-          </button>
+                ? 'bg-gradient-to-br from-primary to-primary-dark text-white rounded-tr-none shadow-lg shadow-primary/20 font-medium'
+                : 'bg-white/60 dark:bg-zinc-800/60 text-zinc-900 dark:text-zinc-100 rounded-tl-none border border-black/5 dark:border-white/5 backdrop-blur-sm',
+              msg.isPending ? 'ring-2 ring-primary/20 bg-primary/5 dark:bg-primary/10 transition-all duration-1000 animate-pulse' : ''
+            ]">
+
+            <div v-if="msg.isPending && !msg.content"
+              class="text-zinc-400 italic font-medium flex items-center space-x-2">
+              <span>AI is thinking...</span>
+            </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="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>
 
-          <div v-if="msg.isPending && !msg.content"
-            class="text-zinc-400 italic font-medium flex items-center space-x-2">
-            <span>AI is thinking...</span>
-          </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="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>
+            <!-- Files -->
+            <div v-if="msg.files && msg.files.filter((f: any) => f.type !== 'original').length > 0"
+              class="mt-3 space-y-2">
+              <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">
+                <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" />
+                </div>
+
+                <div class="flex items-center justify-between gap-2">
+                  <div class="flex flex-col min-w-0">
+                    <span class="text-[8px] font-black uppercase tracking-widest text-primary/70">{{ file.type }}</span>
+                    <span class="text-[9px] truncate text-zinc-500 font-mono">{{ file.url.split('/').pop() }}</span>
+                  </div>
+                    <SlimTooltip text="Save" placement="top">
+                      <button @click.stop="handleSave(file.url)"
+                        class="p-1 px-1.5 bg-primary/10 hover:bg-primary/20 text-primary rounded-md transition-colors flex-shrink-0"
+                      >
+                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path d="M8 17H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v3m-1 7l-4 4-4-4m4 4V10"
+                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                        </svg>
+                      </button>
+                    </SlimTooltip>
+                </div>
               </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">
-            <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">
-              <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" />
+            <div v-if="msg.isPending" class="mt-3 pt-2 border-t border-blue-500/10 flex items-center justify-between">
+              <div class="flex items-center space-x-2 text-[10px] font-bold text-blue-500 uppercase tracking-tighter">
+                <div class="w-2 h-2 bg-blue-500 rounded-full animate-ping"></div>
+                <span>Active Task</span>
               </div>
 
-              <div class="flex items-center justify-between gap-2">
-                <div class="flex flex-col min-w-0">
-                  <span class="text-[8px] font-black uppercase tracking-widest text-primary/70">{{ file.type }}</span>
-                  <span class="text-[9px] truncate text-zinc-500 font-mono">{{ file.url.split('/').pop() }}</span>
-                </div>
-                <button @click.stop="handleSave(file.url)"
-                  class="p-1 px-1.5 bg-primary/10 hover:bg-primary/20 text-primary rounded-md transition-colors flex-shrink-0"
-                  title="Save">
-                  <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path d="M8 17H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v3m-1 7l-4 4-4-4m4 4V10"
-                      stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-                  </svg>
+              <SlimTooltip v-if="msg.isPending" text="Stop process" placement="left">
+                <button @click="videoStore.abortProcessing(msg.id)"
+                  class="flex items-center space-x-1.5 px-2 py-1 bg-red-500/10 hover:bg-red-500/20 text-red-500 rounded-lg transition-all border border-red-500/20 hover:border-red-500/40 ml-4"
+                >
+                  <div class="w-1.5 h-1.5 bg-red-500 rounded-sm"></div>
+                  <span class="text-[9px] font-bold tracking-wider uppercase leading-none">Stop</span>
                 </button>
+              </SlimTooltip>
+
+              <div class="flex space-x-1 grayscale opacity-50 ml-auto">
+                <div class="w-1 h-1 bg-blue-500 rounded-full animate-bounce [animation-delay:0s]"></div>
+                <div class="w-1 h-1 bg-blue-500 rounded-full animate-bounce [animation-delay:0.2s]"></div>
+                <div class="w-1 h-1 bg-blue-500 rounded-full animate-bounce [animation-delay:0.4s]"></div>
               </div>
             </div>
           </div>
 
-          <div v-if="msg.isPending" class="mt-3 pt-2 border-t border-blue-500/10 flex items-center justify-between">
-            <div class="flex items-center space-x-2 text-[10px] font-bold text-blue-500 uppercase tracking-tighter">
-              <div class="w-2 h-2 bg-blue-500 rounded-full animate-ping"></div>
-              <span>Active Task</span>
-            </div>
-
-            <button v-if="msg.isPending" @click="videoStore.abortProcessing(msg.id)"
-              class="flex items-center space-x-1.5 px-2 py-1 bg-red-500/10 hover:bg-red-500/20 text-red-500 rounded-lg transition-all border border-red-500/20 hover:border-red-500/40 ml-4"
-              title="Stop process">
-              <div class="w-1.5 h-1.5 bg-red-500 rounded-sm"></div>
-              <span class="text-[9px] font-bold tracking-wider uppercase leading-none">Stop</span>
-            </button>
-
-            <div class="flex space-x-1 grayscale opacity-50 ml-auto">
-              <div class="w-1 h-1 bg-blue-500 rounded-full animate-bounce [animation-delay:0s]"></div>
-              <div class="w-1 h-1 bg-blue-500 rounded-full animate-bounce [animation-delay:0.2s]"></div>
-              <div class="w-1 h-1 bg-blue-500 rounded-full animate-bounce [animation-delay:0.4s]"></div>
-            </div>
+          <!-- Outside Copy Action -->
+          <div v-if="msg.content && !msg.isPending"
+            class="mt-[5px] opacity-0 group-hover/msg:opacity-100 transition-all duration-200 flex-shrink-0"
+            :class="{ 'opacity-100': copiedId === msg.id }">
+            <SlimTooltip :text="copiedId === msg.id ? 'Copied!' : 'Copy message'" placement="top">
+              <button @click="copyMessage(msg.id, msg.content)"
+                class="p-1.5 rounded-lg transition-colors hover:bg-black/5 dark:hover:bg-white/10 text-zinc-400 dark:text-zinc-500 hover:text-zinc-600 dark:hover:text-zinc-300"
+              >
+                <svg v-if="copiedId !== msg.id" 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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z">
+                  </path>
+                </svg>
+                <svg v-else class="w-3.5 h-3.5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
+                </svg>
+              </button>
+            </SlimTooltip>
           </div>
         </div>
       </div>
@@ -223,6 +236,7 @@ import { ref, watch } from 'vue'
 import { Handle, Position, useVueFlow } from '@vue-flow/core'
 import { useVideoStore } from '../../stores/videoStore'
 import { Button } from 'pilotui/elements'
+import SlimTooltip from '../SlimTooltip.vue'
 import { Modal } from 'pilotui/complex'
 import { TextArea } from 'pilotui/form'
 import { renderMarkdown } from '../../utils/markdown'
diff --git a/src/renderer/src/components/graph/FrameNode.vue b/src/renderer/src/components/graph/FrameNode.vue
index a1a8463..fe174fd 100644
--- a/src/renderer/src/components/graph/FrameNode.vue
+++ b/src/renderer/src/components/graph/FrameNode.vue
@@ -53,21 +53,43 @@
       </div>
     </div>
 
-    <!-- Delete Button -->
-    <button 
+    <!-- Actions Container -->
+    <div 
       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)"
+      class="absolute top-4 right-4 flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-all z-50 pointer-events-auto"
     >
-      <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>
+      <!-- Lock Button -->
+      <SlimTooltip :text="data.isLocked ? 'Unlock Frame' : 'Lock Frame (prevents move/resize)'" placement="left">
+        <button 
+          class="p-1.5 backdrop-blur-md rounded-lg transition-all"
+          :class="data.isLocked ? 'bg-primary text-white shadow-lg' : 'bg-zinc-200/50 dark:bg-zinc-800/50 text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100 hover:bg-zinc-300/50 dark:hover:bg-zinc-700/50'"
+          @click.stop="toggleLock"
+        >
+          <svg v-if="data.isLocked" 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="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+          </svg>
+          <svg v-else 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="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z" />
+          </svg>
+        </button>
+      </SlimTooltip>
+
+      <!-- Delete Button (only if not locked) -->
+      <SlimTooltip v-if="!data.isLocked" text="Delete Frame (ungroup children)" placement="left">
+        <button 
+          class="p-1.5 bg-red-500/10 hover:bg-red-500 text-red-500 hover:text-white rounded-lg transition-all"
+          @click.stop="data.onDelete"
+        >
+          <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>
+      </SlimTooltip>
+    </div>
 
     <!-- Resize Handle -->
     <div 
-      v-if="selected"
+      v-if="selected && !data.isLocked"
       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"
     >
@@ -86,6 +108,7 @@
 <script setup lang="ts">
 import { ref, watch, nextTick } from 'vue'
 import { useVueFlow } from '@vue-flow/core'
+import SlimTooltip from '../SlimTooltip.vue'
 
 const props = defineProps<{
   id: string
@@ -93,6 +116,7 @@ const props = defineProps<{
     title: string
     width: number
     height: number
+    isLocked?: boolean
     onUpdate?: (id: string, metadata: any) => void
     onDelete?: () => void
   }
@@ -105,8 +129,14 @@ const nodeWidth = ref(props.data.width || 400)
 const nodeHeight = ref(props.data.height || 300)
 
 const isResizing = ref(false)
+const toggleLock = () => {
+  if (props.data.onUpdate) {
+    props.data.onUpdate(props.id, { isLocked: !props.data.isLocked })
+  }
+}
 
 const startResizing = (e: MouseEvent) => {
+  if (props.data.isLocked) return
   isResizing.value = true
   document.body.style.cursor = 'nwse-resize'
   document.body.style.userSelect = 'none'
diff --git a/src/renderer/src/components/graph/GraphHeader.vue b/src/renderer/src/components/graph/GraphHeader.vue
index 99580c2..db682cc 100644
--- a/src/renderer/src/components/graph/GraphHeader.vue
+++ b/src/renderer/src/components/graph/GraphHeader.vue
@@ -2,12 +2,14 @@
   <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>
+      <SlimTooltip text="Back to Home" placement="bottom">
+        <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>
+      </SlimTooltip>
 
       <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">
@@ -46,6 +48,7 @@
 </template>
 
 <script setup lang="ts">
+import SlimTooltip from '../SlimTooltip.vue'
 defineProps<{
   title?: string
   totalCost: number
diff --git a/src/renderer/src/components/graph/GraphToolbar.vue b/src/renderer/src/components/graph/GraphToolbar.vue
index 7848ba7..e21071e 100644
--- a/src/renderer/src/components/graph/GraphToolbar.vue
+++ b/src/renderer/src/components/graph/GraphToolbar.vue
@@ -1,46 +1,50 @@
 <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', 'pan')"
-      title="Pan View"
-      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>
-    </button>
+    <SlimTooltip text="Pan View" 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">
+          <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>
+    </SlimTooltip>
     
     <div class="w-px h-4 bg-zinc-200 dark:bg-zinc-800 mx-1"></div>
     
-    <button 
-      @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 === '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>
+    <SlimTooltip text="Select Tool" placement="bottom">
+      <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">
+          <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>
+    </SlimTooltip>
 
     <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>
+    <SlimTooltip text="Group Frames" placement="bottom">
+      <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>
+      </button>
+    </SlimTooltip>
   </div>
 </template>
 
 <script setup lang="ts">
+import SlimTooltip from '../SlimTooltip.vue'
 type ToolMode = 'pan' | 'select' | 'frame'
 
 defineProps<{
diff --git a/src/renderer/src/components/graph/ImageCollectionNode.vue b/src/renderer/src/components/graph/ImageCollectionNode.vue
index 6129708..a0c14e1 100644
--- a/src/renderer/src/components/graph/ImageCollectionNode.vue
+++ b/src/renderer/src/components/graph/ImageCollectionNode.vue
@@ -55,20 +55,26 @@
     <!-- Lightbox Modal -->
     <Teleport to="body">
       <div v-if="lightboxIdx !== null" class="fixed inset-0 z-[9999] bg-black/95 flex flex-col items-center justify-center p-8 backdrop-blur-3xl animate-in fade-in duration-300">
-        <button @click="lightboxIdx = null" 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>
+        <SlimTooltip text="Close Lightbox" placement="bottom">
+          <button @click="lightboxIdx = null" 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>
+        </SlimTooltip>
         
         <img :src="mediaUrl(sourceImages[lightboxIdx])" class="max-w-full max-h-[80vh] rounded-2xl shadow-2xl ring-1 ring-white/20 object-contain" />
         
         <div class="mt-8 flex items-center gap-6">
-          <button @click="prevImg" class="p-4 bg-white/5 hover:bg-white/10 rounded-2xl text-white transition-all active:scale-95 disabled:opacity-20" :disabled="lightboxIdx === 0">
-            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
-          </button>
+          <SlimTooltip text="Previous Image" placement="top">
+            <button @click="prevImg" class="p-4 bg-white/5 hover:bg-white/10 rounded-2xl text-white transition-all active:scale-95 disabled:opacity-20" :disabled="lightboxIdx === 0">
+              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
+            </button>
+          </SlimTooltip>
           <div class="text-zinc-400 font-mono text-sm tracking-widest">{{ lightboxIdx + 1 }} / {{ sourceImages.length }}</div>
-          <button @click="nextImg" class="p-4 bg-white/5 hover:bg-white/10 rounded-2xl text-white transition-all active:scale-95 disabled:opacity-20" :disabled="lightboxIdx === sourceImages.length - 1">
-            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
-          </button>
+          <SlimTooltip text="Next Image" placement="top">
+            <button @click="nextImg" class="p-4 bg-white/5 hover:bg-white/10 rounded-2xl text-white transition-all active:scale-95 disabled:opacity-20" :disabled="lightboxIdx === sourceImages.length - 1">
+              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
+            </button>
+          </SlimTooltip>
         </div>
       </div>
     </Teleport>
@@ -80,6 +86,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { Handle, Position } from '@vue-flow/core'
+import SlimTooltip from '../SlimTooltip.vue'
 import { useVideoStore } from '../../stores/videoStore'
 import BaseMessageInput from '../chat/BaseMessageInput.vue'
 
diff --git a/src/renderer/src/components/graph/MediaNode.vue b/src/renderer/src/components/graph/MediaNode.vue
index a86cb5b..5c4ecc7 100644
--- a/src/renderer/src/components/graph/MediaNode.vue
+++ b/src/renderer/src/components/graph/MediaNode.vue
@@ -22,22 +22,23 @@
       
       <!-- Full Screen Toggle Overlay -->
       <div class="absolute top-2 right-2 flex flex-col gap-2 opacity-0 group-hover/player:opacity-100 transition-opacity z-20">
-        <button 
-          v-if="videoUrl"
-          @click="isFullScreen = true" 
-          class="p-1.5 bg-black/50 backdrop-blur-md rounded-lg hover:bg-black/80"
-          title="Full Screen"
-        >
-          <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="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"
-        >
-          <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>
+        <SlimTooltip v-if="videoUrl" key="full-screen" text="Full Screen" placement="left">
+          <button 
+            @click="isFullScreen = true" 
+            class="p-1.5 bg-black/50 backdrop-blur-md rounded-lg hover:bg-black/80"
+          >
+            <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>
+        </SlimTooltip>
+        <SlimTooltip key="metadata" text="Toggle Metadata" placement="left">
+          <button 
+            @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'"
+          >
+            <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>
+        </SlimTooltip>
       </div>
 
       <div class="absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black/80 to-transparent">
@@ -116,6 +117,7 @@
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
 import { Handle, Position } from '@vue-flow/core'
+import SlimTooltip from '../SlimTooltip.vue'
 import { useVideoStore } from '../../stores/videoStore'
 import BaseMessageInput from '../chat/BaseMessageInput.vue'
 
diff --git a/src/renderer/src/components/graph/SummaryNode.vue b/src/renderer/src/components/graph/SummaryNode.vue
index 61fcbec..c7bd6b1 100644
--- a/src/renderer/src/components/graph/SummaryNode.vue
+++ b/src/renderer/src/components/graph/SummaryNode.vue
@@ -8,9 +8,11 @@
             <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>
-        <button @click="data.onDelete" class="p-1 hover:bg-red-500/10 rounded-md text-zinc-400 hover:text-red-500 transition-colors">
-          <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 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">
+            <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>
     </div>
 
     <!-- Summary Content -->
@@ -35,6 +37,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { Handle, Position } from '@vue-flow/core'
+import SlimTooltip from '../SlimTooltip.vue'
 import { renderMarkdown } from '../../utils/markdown'
 import BaseMessageInput from '../chat/BaseMessageInput.vue'
 
diff --git a/src/renderer/src/components/graph/TaskProgressNode.vue b/src/renderer/src/components/graph/TaskProgressNode.vue
index b3c7bd4..e881b7f 100644
--- a/src/renderer/src/components/graph/TaskProgressNode.vue
+++ b/src/renderer/src/components/graph/TaskProgressNode.vue
@@ -14,20 +14,24 @@
         </div>
       </div>
       <div class="flex items-center space-x-2">
-        <button v-if="data.onStop && data.status === 'running'" 
-          @click="handleStop" 
-          class="flex items-center space-x-1.5 px-2 py-1 rounded-lg transition-all border group/stop"
-          :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'"
-          :title="isConfirmingStop ? 'Click again to confirm' : 'Stop process'">
-          <div class="w-2 h-2 rounded-sm" :class="isConfirmingStop ? 'bg-orange-500 animate-pulse' : 'bg-red-500'"></div>
-          <span class="text-[10px] font-bold tracking-wider uppercase leading-none">
-            {{ isConfirmingStop ? 'Confirm?' : 'Stop' }}
-          </span>
-        </button>
+        <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="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>
+            <span class="text-[10px] font-bold tracking-wider uppercase leading-none">
+              {{ isConfirmingStop ? 'Confirm?' : 'Stop' }}
+            </span>
+          </button>
+        </SlimTooltip>
 
-        <button v-if="data.onDelete" @click="data.onDelete" class="p-1 hover:bg-red-500/10 rounded-md text-zinc-400 hover:text-red-500 transition-colors" title="Delete task node">
-          <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 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">
+            <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>
       </div>
     </div>
 
@@ -62,6 +66,7 @@
 <script setup lang="ts">
 import { ref, onBeforeUnmount } from 'vue'
 import { Handle, Position } from '@vue-flow/core'
+import SlimTooltip from '../SlimTooltip.vue'
 
 const props = defineProps<{ data: any }>()
 
diff --git a/src/renderer/src/components/graph/ThumbnailNode.vue b/src/renderer/src/components/graph/ThumbnailNode.vue
index 183e887..2401b30 100644
--- a/src/renderer/src/components/graph/ThumbnailNode.vue
+++ b/src/renderer/src/components/graph/ThumbnailNode.vue
@@ -6,34 +6,32 @@
     <div class="relative aspect-video bg-black overflow-hidden group/player">
       <!-- Controls Overlay (Hover) -->
       <div class="absolute top-2 right-2 flex flex-col gap-2 z-20 opacity-0 group-hover/player:opacity-100 transition-opacity">
-        <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="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">
-          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M8 17H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v3m-1 7l-4 4-4-4m4 4V10" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
-        </button>
-        <button @click="data.onDelete" class="p-1.5 bg-black/50 backdrop-blur-md rounded-lg hover:bg-red-500/80 text-white transition-all shadow-lg" title="Delete node and branches">
-          <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="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>
-      </div>
-
-      <!-- Text Overlay (Bottom Left) -->
-      <div class="absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black/80 to-transparent z-10">
-        <div class="flex items-center gap-2 mb-0.5">
-           <div class="text-xs font-bold text-white truncate max-w-[180px] italic">AI Result: {{ versionedTitle }}</div>
-           <div v-if="data.version" class="px-1 py-0 rounded bg-primary/30 border border-primary/50 text-[7px] font-black text-white uppercase leading-none mt-[-2px]">
-             V{{ data.version }}
-           </div>
-        </div>
-        <div class="flex items-center gap-2">
-           <div class="text-[9px] font-black uppercase tracking-widest text-primary-light">Result: {{ displayType }}</div>
-           <div class="px-1 py-0 rounded text-[7px] font-black uppercase leading-none border bg-accent/20 border-accent/40 text-accent-light">
-             {{ activeFileType }}
-           </div>
-        </div>
+        <SlimTooltip v-if="mediaContentUrl" key="full-screen" text="Full Screen View" placement="left">
+          <button @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">
+            <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>
+        </SlimTooltip>
+        <SlimTooltip key="details" text="Toggle Details" placement="left">
+          <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}">
+            <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>
+        </SlimTooltip>
+        <SlimTooltip key="save" text="Save Image" placement="left">
+          <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">
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M8 17H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v3m-1 7l-4 4-4-4m4 4V10" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+          </button>
+        </SlimTooltip>
+        <SlimTooltip key="attachment" :text="isAvailableForAttachment ? 'Remove from attachments' : 'Add to available attachments'" placement="left">
+          <button @click="toggleAttachment" class="p-1.5 bg-black/50 backdrop-blur-md rounded-lg hover:bg-black/80 transition-all shadow-lg" :class="{'text-primary-light': isAvailableForAttachment, 'text-white': !isAvailableForAttachment}">
+            <svg v-if="isAvailableForAttachment" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 8h.01" /><path d="M11.5 21h-5.5a3 3 0 0 1 -3 -3v-12a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v5" /><path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l3 3" /><path d="M14 14l1 -1c.928 -.893 2.072 -.893 3 0l0 0" /><path d="M15 19l2 2l4 -4" /></svg>
+            <svg v-else xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 8h.01" /><path d="M12.5 21h-6.5a3 3 0 0 1 -3 -3v-12a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v6.5" /><path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l3 3" /><path d="M14 14l1 -1c.67 -.644 1.45 -.824 2.182 -.54" /><path d="M16 19h6" /><path d="M19 16v6" /></svg>
+          </button>
+        </SlimTooltip>
+        <SlimTooltip key="delete" text="Delete node and branches" placement="left">
+          <button @click="data.onDelete" class="p-1.5 bg-black/50 backdrop-blur-md rounded-lg hover:bg-red-500/80 text-white transition-all shadow-lg">
+            <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="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>
       </div>
 
       <!-- Image Content -->
@@ -44,6 +42,28 @@
       />
     </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">
+      <!-- Version -->
+      <div v-if="data.version" class="text-[10px] font-bold text-primary dark:text-primary-light font-mono leading-none">
+         {{ data.version }}
+      </div>
+
+      <div v-if="data.version" class="w-px h-3 bg-black/10 dark:bg-white/10"></div>
+
+      <!-- Media Type -->
+      <div class="text-[9px] font-black uppercase tracking-[0.15em] text-zinc-500 dark:text-zinc-400 leading-none">
+        {{ displayType }}
+      </div>
+      
+      <div class="w-px h-3 bg-black/10 dark:bg-white/10"></div>
+
+      <!-- Preview Type -->
+      <div class="text-[9px] font-black uppercase tracking-widest text-accent dark:text-accent-light leading-none">
+        {{ activeFileType }}
+      </div>
+    </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 class="flex items-center justify-between mb-2">
@@ -181,6 +201,7 @@
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
 import { Handle, Position } from '@vue-flow/core'
+import SlimTooltip from '../SlimTooltip.vue'
 import BaseMessageInput from '../chat/BaseMessageInput.vue'
 import { renderMarkdown } from '../../utils/markdown'
 import { useVideoStore } from '../../stores/videoStore'
@@ -263,6 +284,19 @@ const isAtLeast4K = computed(() => {
   return (metadata.value?.width || 0) >= 3800
 })
 
+const isAvailableForAttachment = computed(() => {
+  const path = actualFile.value?.url
+  if (!path) return false
+  const currentRefs = videoStore.currentThread?.preprocessing?.['reference-frames'] || []
+  return currentRefs.includes(path) || currentRefs.includes(path.replace('media://', ''))
+})
+
+const toggleAttachment = async () => {
+  const path = actualFile.value?.url
+  if (!path) return
+  await videoStore.toggleReferenceFrame(path.replace('media://', ''))
+}
+
 const fetchMetadata = async () => {
   if (!mediaContentUrl.value || metadata.value || isMetadataLoading.value) return
   isMetadataLoading.value = true
diff --git a/src/renderer/src/components/graph/VideoNode.vue b/src/renderer/src/components/graph/VideoNode.vue
index 8de5160..e238ded 100644
--- a/src/renderer/src/components/graph/VideoNode.vue
+++ b/src/renderer/src/components/graph/VideoNode.vue
@@ -6,34 +6,26 @@
     <div class="relative aspect-video bg-black overflow-hidden group/player">
       <!-- Controls Overlay (Hover) -->
       <div class="absolute top-2 right-2 flex flex-col gap-2 z-20 opacity-0 group-hover/player:opacity-100 transition-opacity">
-        <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="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">
-          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M8 17H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v3m-1 7l-4 4-4-4m4 4V10" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
-        </button>
-        <button @click="data.onDelete" class="p-1.5 bg-black/50 backdrop-blur-md rounded-lg hover:bg-red-500/80 text-white transition-all shadow-lg" title="Delete node and branches">
-          <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="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>
-      </div>
-
-      <!-- Text Overlay (Bottom Left) -->
-      <div class="absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black/80 to-transparent z-10">
-        <div class="flex items-center gap-2 mb-0.5">
-           <div class="text-xs font-bold text-white truncate max-w-[180px] italic">AI Result: Synthesized Clip</div>
-           <div v-if="data.version" class="px-1 py-0 rounded bg-primary/30 border border-primary/50 text-[7px] font-black text-white uppercase leading-none mt-[-2px]">
-             V{{ data.version }}
-           </div>
-        </div>
-        <div class="flex items-center gap-2">
-           <div class="text-[9px] font-black uppercase tracking-widest text-accent-light">Result: Video</div>
-           <div class="px-1 py-0 rounded text-[7px] font-black uppercase leading-none border bg-accent/20 border-accent/40 text-accent-light">
-             Actual
-           </div>
-        </div>
+        <SlimTooltip v-if="mediaContentUrl" key="full-screen" text="Full Screen View" placement="left">
+          <button @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">
+            <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>
+        </SlimTooltip>
+        <SlimTooltip key="details" text="Toggle Details" placement="left">
+          <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}">
+            <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>
+        </SlimTooltip>
+        <SlimTooltip key="save" text="Save Video" placement="left">
+          <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">
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M8 17H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v3m-1 7l-4 4-4-4m4 4V10" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+          </button>
+        </SlimTooltip>
+        <SlimTooltip key="delete" text="Delete node and branches" placement="left">
+          <button @click="data.onDelete" class="p-1.5 bg-black/50 backdrop-blur-md rounded-lg hover:bg-red-500/80 text-white transition-all shadow-lg">
+            <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="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>
       </div>
 
       <!-- Video Content -->
@@ -51,6 +43,28 @@
         </div>
       </div>
     </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">
+      <!-- Version -->
+      <div v-if="data.version" class="text-[10px] font-bold text-primary dark:text-primary-light font-mono leading-none">
+         {{ data.version }}
+      </div>
+
+      <div v-if="data.version" class="w-px h-3 bg-black/10 dark:bg-white/10"></div>
+
+      <!-- Media Type -->
+      <div class="text-[9px] font-black uppercase tracking-[0.15em] text-zinc-500 dark:text-zinc-400 leading-none">
+        {{ displayType }}
+      </div>
+      
+      <div class="w-px h-3 bg-black/10 dark:bg-white/10"></div>
+
+      <!-- Preview Type -->
+      <div class="text-[9px] font-black uppercase tracking-widest text-accent dark:text-accent-light leading-none">
+        {{ activeFileType }}
+      </div>
+    </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">
@@ -141,8 +155,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue'
+import { ref, computed, watch, onMounted } from 'vue'
 import { Handle, Position } from '@vue-flow/core'
+import SlimTooltip from '../SlimTooltip.vue'
 import BaseMessageInput from '../chat/BaseMessageInput.vue'
 
 const props = defineProps<{ data: any }>()
@@ -179,6 +194,19 @@ const mediaContentUrl = computed(() => {
   return mediaUrl(file.url)
 })
 
+const activeFileType = computed(() => {
+    const file = props.data.files?.find((f: any) => f.type === 'actual' || f.type === 'preview')
+    if (file?.type === 'actual') return 'Actual'
+    if (file?.type === 'preview') return 'Preview'
+    return 'Result'
+})
+
+const displayType = computed(() => {
+    const type = props.data.type || 'video'
+    if (type === 'video' || type === 'result-video') return 'Video'
+    return 'Clip'
+})
+
 const togglePlay = () => {
   if (!videoRef.value) return
   if (videoRef.value.paused) {
diff --git a/src/renderer/src/composables/useGraphLayout.ts b/src/renderer/src/composables/useGraphLayout.ts
index 69c749c..ac6c99b 100644
--- a/src/renderer/src/composables/useGraphLayout.ts
+++ b/src/renderer/src/composables/useGraphLayout.ts
@@ -95,14 +95,18 @@ export function useGraphLayout(videoStore: any, graphStore: any) {
     Object.entries(savedMetadata).forEach(([id, meta]: [string, any]) => {
       if (meta.isFrame) {
         frameIds.add(id)
+        const isLocked = !!meta.isLocked
         newNodes.push({
           id,
           type: 'frame',
           position: { x: meta.x, y: meta.y },
+          draggable: !isLocked,
+          selectable: true,
           data: {
             title: meta.title,
             width: meta.width || 400,
             height: meta.height || 300,
+            isLocked,
             onUpdate: (fid: string, updates: any) => videoStore.updateNodeMetadata(fid, updates),
             onDelete: async () => {
               const confirmed = await (window as any).api.showConfirmation({
diff --git a/src/renderer/src/stores/videoStore.ts b/src/renderer/src/stores/videoStore.ts
index 060272e..21dcfb2 100644
--- a/src/renderer/src/stores/videoStore.ts
+++ b/src/renderer/src/stores/videoStore.ts
@@ -385,6 +385,12 @@ export const useVideoStore = defineStore('video', () => {
 		}
 	}
 
+	const toggleReferenceFrame = async (filePath: string) => {
+		if (!currentThreadId.value) return false
+		const success = await (window as any).api.toggleReferenceFrame(currentThreadId.value, filePath)
+		return success
+	}
+
 	return {
 		threads,
 		currentThreadId,
@@ -413,6 +419,7 @@ export const useVideoStore = defineStore('video', () => {
 		updateNodePositions,
 		updateNodeMetadata,
 		deleteFrame,
-		retryPreprocessing
+		retryPreprocessing,
+		toggleReferenceFrame
 	}
 })
\ No newline at end of file