Improve file drop behavior: separate regular vs edit mode handling

ProjectLiminality · claude · ProjectLiminality · commit dacbb7ea1ebf · 2025-12-06T13:28:22.000Z
Regular mode drops: - Files dropped on DreamNodes are now added to repo without updating dreamTalk - Treats file drops like dropping files on a folder Edit mode drops: - Only accepts valid media files (images/videos) for dreamTalk - Detects internal files (already in repo) by attempting to read them - Compares file hashes to avoid unnecessary copies - Loads data URL immediately for proper display after save 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
diff --git a/src/dreamspace/DreamspaceCanvas.tsx b/src/dreamspace/DreamspaceCanvas.tsx
@@ -1066,14 +1066,19 @@ export default function DreamspaceCanvas() {
 
   const handleDropOnNode = async (files: globalThis.File[], node: DreamNode) => {
     try {
-      
-      // Use service to add files to existing node
       const service = serviceManager.getActive();
-      await service.addFilesToNode(node.id, files);
-      
+
+      // In regular mode (not edit mode), just add files without updating dreamTalk
+      // This treats file drops like dropping files on a folder
+      if (service.addFilesToNodeWithoutDreamTalkUpdate) {
+        await service.addFilesToNodeWithoutDreamTalkUpdate(node.id, files);
+        uiService.showSuccess(`Added ${files.length} file(s) to "${node.name}"`);
+      } else {
+        // Fallback for services that don't support the new method
+        await service.addFilesToNode(node.id, files);
+      }
+
       // No need to manually refresh - event listener will handle it
-      
-      
     } catch (error) {
       console.error('Failed to add files to node:', error);
       uiService.showError(error instanceof Error ? error.message : 'Failed to add files to node');
diff --git a/src/features/edit-mode/EditModeOverlay.tsx b/src/features/edit-mode/EditModeOverlay.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import fs from 'fs';
 import { useInterBrainStore } from '../../store/interbrain-store';
 import { serviceManager } from '../../services/service-manager';
 import { UIService } from '../../services/ui-service';
@@ -59,11 +60,113 @@ export default function EditModeOverlay() {
 
       // Get the active service for persistence
       const dreamNodeService = serviceManager.getActive();
-      
+
       // 1. Handle new DreamTalk media file if provided
       if (editMode.newDreamTalkFile) {
-        console.log(`EditModeOverlay: Saving new DreamTalk media: ${editMode.newDreamTalkFile.name}`);
-        await dreamNodeService.addFilesToNode(editMode.editingNode.id, [editMode.newDreamTalkFile]);
+        const file = editMode.newDreamTalkFile;
+
+        // Try to read the file - if it fails, it's likely an internal file already in the repo
+        let fileIsReadable = false;
+        let fileHash: string | null = null;
+
+        try {
+          const buffer = await file.arrayBuffer();
+          fileIsReadable = true;
+          // Calculate hash of the dropped file
+          const hashBuffer = await crypto.subtle.digest('SHA-256', buffer);
+          fileHash = Array.from(new Uint8Array(hashBuffer))
+            .map(b => b.toString(16).padStart(2, '0'))
+            .join('');
+        } catch {
+          // File not readable - it's an internal file reference
+          fileIsReadable = false;
+        }
+
+        if (!fileIsReadable) {
+          // Internal file - just update the dreamTalk path in metadata, no file copy needed
+          console.log(`EditModeOverlay: File not readable, setting existing file as DreamTalk: ${file.name}`);
+
+          // Load the file data from disk for immediate display
+          const vaultService = serviceManager.getVaultService();
+          const targetPath = `${editMode.editingNode.repoPath}/${file.name}`;
+          let dataUrl = '';
+          let fileSize = 0;
+
+          if (vaultService) {
+            try {
+              dataUrl = await vaultService.readFileAsDataURL(targetPath);
+              const fullPath = vaultService.getFullPath(targetPath);
+              const stats = fs.statSync(fullPath);
+              fileSize = stats.size;
+            } catch (err) {
+              console.warn(`EditModeOverlay: Could not load file data for preview: ${err}`);
+            }
+          }
+
+          const updates: Partial<DreamNode> = {
+            dreamTalkMedia: [{
+              path: file.name,
+              absolutePath: targetPath,
+              type: file.type || 'application/octet-stream',
+              data: dataUrl,
+              size: fileSize
+            }]
+          };
+          await dreamNodeService.update(editMode.editingNode.id, updates);
+        } else if (fileHash) {
+          // File is readable - check if it already exists in the repo by comparing hashes
+          const vaultService = serviceManager.getVaultService();
+          if (vaultService) {
+            const targetPath = `${editMode.editingNode.repoPath}/${file.name}`;
+            const existingFileExists = await vaultService.fileExists(targetPath);
+
+            if (existingFileExists) {
+              // File exists - compare hashes using Node.js fs
+              const fullPath = vaultService.getFullPath(targetPath);
+              const existingContent = fs.readFileSync(fullPath);
+              const existingHashBuffer = await crypto.subtle.digest('SHA-256', existingContent);
+              const existingHash = Array.from(new Uint8Array(existingHashBuffer))
+                .map(b => b.toString(16).padStart(2, '0'))
+                .join('');
+
+              if (existingHash === fileHash) {
+                // Same file - just update the metadata reference, no copy needed
+                console.log(`EditModeOverlay: File already exists with same hash, updating reference: ${file.name}`);
+
+                // Load the file data from disk for immediate display
+                let dataUrl = '';
+                try {
+                  dataUrl = await vaultService.readFileAsDataURL(targetPath);
+                } catch (err) {
+                  console.warn(`EditModeOverlay: Could not load file data for preview: ${err}`);
+                }
+
+                const updates: Partial<DreamNode> = {
+                  dreamTalkMedia: [{
+                    path: file.name,
+                    absolutePath: targetPath,
+                    type: file.type || 'application/octet-stream',
+                    data: dataUrl,
+                    size: file.size
+                  }]
+                };
+                await dreamNodeService.update(editMode.editingNode.id, updates);
+              } else {
+                // Different file with same name - copy and update
+                console.log(`EditModeOverlay: File exists but different hash, replacing: ${file.name}`);
+                await dreamNodeService.addFilesToNode(editMode.editingNode.id, [file]);
+              }
+            } else {
+              // File doesn't exist - copy to repo
+              console.log(`EditModeOverlay: Saving new DreamTalk media: ${file.name}`);
+              await dreamNodeService.addFilesToNode(editMode.editingNode.id, [file]);
+            }
+          } else {
+            // No vault service - fall back to direct save
+            console.log(`EditModeOverlay: Saving new DreamTalk media (no vault service): ${file.name}`);
+            await dreamNodeService.addFilesToNode(editMode.editingNode.id, [file]);
+          }
+        }
       }
       
       // 2. Save metadata changes (let service layer handle if no changes)
diff --git a/src/features/edit-mode/EditNode3D.tsx b/src/features/edit-mode/EditNode3D.tsx
@@ -236,18 +236,39 @@ export default function EditNode3D({
     e.preventDefault();
     e.stopPropagation();
     setIsDragOver(false);
-    
+
     const files = Array.from(e.dataTransfer.files);
     const file = files[0];
-    
-    if (file && isValidMediaFile(file)) {
-      console.log(`[EditNode3D] New DreamTalk media dropped: ${file.name}`);
+
+    if (!file) {
+      return;
+    }
+
+    // Validate media file type first
+    if (!isValidMediaFile(file)) {
+      console.log(`[EditNode3D] Dropped file is not valid DreamTalk media: ${file.name} (${file.type})`);
+      return;
+    }
+
+    console.log(`[EditNode3D] New DreamTalk media dropped: ${file.name}`);
+
+    // Try to create preview URL - this works for both internal and external files
+    try {
       const previewUrl = globalThis.URL.createObjectURL(file);
       setPreviewMedia(previewUrl);
-      
-      // Store the new file in edit mode state for save processing
-      setEditModeNewDreamTalkFile(file);
+    } catch {
+      // If preview fails, try to use existing media data
+      if (editingNode) {
+        const existingMedia = editingNode.dreamTalkMedia.find(m => m.path === file.name);
+        if (existingMedia && existingMedia.data) {
+          setPreviewMedia(existingMedia.data);
+        }
+      }
     }
+
+    // Store the file reference - the save handler will detect if it's internal/external
+    // and handle hash comparison to avoid unnecessary file copies
+    setEditModeNewDreamTalkFile(file);
   };
   
   const handleFileSelect = (e: React.ChangeEvent<globalThis.HTMLInputElement>) => {
@@ -756,7 +777,8 @@ export default function EditNode3D({
 }
 
 /**
- * Validate media file types for DreamTalk (same as ProtoNode3D)
+ * Validate media file types for DreamTalk
+ * Only allows actual visual media: images and videos (NOT PDFs or text files like .md)
  */
 function isValidMediaFile(file: globalThis.File): boolean {
   const validTypes = [
@@ -765,18 +787,30 @@ function isValidMediaFile(file: globalThis.File): boolean {
     'image/jpg',
     'image/gif',
     'image/webp',
+    'image/svg+xml',
     'video/mp4',
-    'video/webm',
-    // .link files may appear as text/plain or application/octet-stream
-    'text/plain',
-    'application/octet-stream'
+    'video/webm'
   ];
 
-  // Check file extension as fallback for unreliable MIME types
+  // Check file extension for additional image/video types that might have unreliable MIME types
   const fileName = file.name.toLowerCase();
+  const validExtensions = ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.svg', '.mp4', '.webm', '.link'];
+
+  // .link files are special case (URL references)
   if (fileName.endsWith('.link')) {
     return true;
   }
 
-  return validTypes.includes(file.type);
+  // Check MIME type first
+  if (validTypes.includes(file.type)) {
+    return true;
+  }
+
+  // Fallback: check extension for files with application/octet-stream MIME type
+  // Only allow known image/video extensions
+  if (file.type === 'application/octet-stream') {
+    return validExtensions.some(ext => fileName.endsWith(ext));
+  }
+
+  return false;
 }
diff --git a/src/services/git-dreamnode-service.ts b/src/services/git-dreamnode-service.ts
@@ -1313,7 +1313,40 @@ export class GitDreamNodeService {
     
     console.log(`GitDreamNodeService: Added ${files.length} files to ${nodeId}`);
   }
-  
+
+  /**
+   * Add files to an existing DreamNode WITHOUT updating dreamTalk
+   * Used for regular mode file drops where files should just be added to the repo
+   */
+  async addFilesToNodeWithoutDreamTalkUpdate(nodeId: string, files: globalThis.File[]): Promise<void> {
+    const store = useInterBrainStore.getState();
+    const nodeData = store.realNodes.get(nodeId);
+
+    if (!nodeData) {
+      throw new Error(`DreamNode with ID ${nodeId} not found`);
+    }
+
+    const node = nodeData.node;
+    const repoPath = path.join(this.vaultPath, node.repoPath);
+
+    // Write all files to disk without updating dreamTalk
+    for (const file of files) {
+      const buffer = await file.arrayBuffer();
+      await fsPromises.writeFile(
+        path.join(repoPath, file.name),
+        globalThis.Buffer.from(buffer)
+      );
+    }
+
+    // Update last synced time (no UDD update needed since dreamTalk isn't changing)
+    store.updateRealNode(nodeId, {
+      ...nodeData,
+      lastSynced: Date.now()
+    });
+
+    console.log(`GitDreamNodeService: Added ${files.length} files to ${nodeId} (without dreamTalk update)`);
+  }
+
   private isMediaFile(file: globalThis.File): boolean {
     const validTypes = [
       'image/png',
diff --git a/src/services/mock-dreamnode-service.ts b/src/services/mock-dreamnode-service.ts
@@ -191,6 +191,28 @@ export class MockDreamNodeService {
     });
   }
 
+  /**
+   * Add files to an existing DreamNode WITHOUT updating dreamTalk
+   * Used for regular mode file drops where files should just be added to the repo
+   */
+  async addFilesToNodeWithoutDreamTalkUpdate(nodeId: string, files: globalThis.File[]): Promise<void> {
+    const node = this.nodes.get(nodeId);
+    if (!node) {
+      throw new Error(`DreamNode with ID ${nodeId} not found`);
+    }
+
+    const existingFiles = this.repositoryFiles.get(nodeId) || [];
+
+    // Add all files to repository without updating dreamTalk
+    const updatedFiles = [...existingFiles, ...files];
+    this.repositoryFiles.set(nodeId, updatedFiles);
+
+    console.log(`MockDreamNodeService: Added ${files.length} files to ${nodeId} (without dreamTalk update):`, {
+      files: files.map(f => `${f.name} (${f.type})`).join(', '),
+      totalRepoFiles: updatedFiles.length
+    });
+  }
+
   /**
    * Check if a file is a media file (image or video)
    */
diff --git a/src/services/service-manager.ts b/src/services/service-manager.ts
@@ -26,6 +26,7 @@ export interface IDreamNodeService {
   list(): Promise<DreamNode[]>;
   get(id: string): Promise<DreamNode | null>;
   addFilesToNode(nodeId: string, files: globalThis.File[]): Promise<void>;
+  addFilesToNodeWithoutDreamTalkUpdate?(nodeId: string, files: globalThis.File[]): Promise<void>;
   reset(): void;
   getStats(): {
     totalNodes: number;
