refactor: Store pasted images in memory as base64 data URLs

- Remove save_clipboard_image and cleanup_temp_images backend commands
- Update FloatingPromptInput to store pasted images as data URLs in the prompt
- Update ImagePreview component to handle both file paths and data URLs
- Update extractImagePaths to properly handle quoted data URLs
- Update handleRemoveImage to handle data URL removal

This eliminates file system operations for pasted images and stores them directly
in the prompt as base64 data URLs (e.g., @"data:image/png;base64,...").
Images are now fully self-contained within the session without creating temp files.

src/components/ClaudeCodeSession.tsx

@@ -20,7 +20,6 @@ import { api, type Session } from "@/lib/api";
 import { cn } from "@/lib/utils";
 import { open } from "@tauri-apps/plugin-dialog";
 import { listen, type UnlistenFn } from "@tauri-apps/api/event";
-import { invoke } from "@tauri-apps/api/core";
 import { StreamMessage } from "./StreamMessage";
 import { FloatingPromptInput, type FloatingPromptInputRef } from "./FloatingPromptInput";
 import { ErrorBoundary } from "./ErrorBoundary";
@@ -828,16 +827,6 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
         api.clearCheckpointManager(effectiveSession.id).catch(err => {
           console.error("Failed to clear checkpoint manager:", err);
         });
-        
-        // Clean up temporary images
-        if (projectPath) {
-          invoke('cleanup_temp_images', {
-            projectPath,
-            sessionId: effectiveSession.id
-          }).catch((err: any) => {
-            console.error("Failed to cleanup temp images:", err);
-          });
-        }
       }
     };
   }, [effectiveSession, projectPath]);

src/components/FloatingPromptInput.tsx

@@ -19,7 +19,6 @@ import { FilePicker } from "./FilePicker";
 import { ImagePreview } from "./ImagePreview";
 import { type FileEntry } from "@/lib/api";
 import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
-import { invoke } from "@tauri-apps/api/core";
 
 interface FloatingPromptInputProps {
   /**
@@ -220,33 +219,39 @@ const FloatingPromptInputInner = (
 
   // Helper function to check if a file is an image
   const isImageFile = (path: string): boolean => {
+    // Check if it's a data URL
+    if (path.startsWith('data:image/')) {
+      return true;
+    }
+    // Otherwise check file extension
     const ext = path.split('.').pop()?.toLowerCase();
     return ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp', 'ico', 'bmp'].includes(ext || '');
   };
 
   // Extract image paths from prompt text
   const extractImagePaths = (text: string): string[] => {
-    console.log('[extractImagePaths] Input text:', text);
+    console.log('[extractImagePaths] Input text length:', text.length);
     
     // Updated regex to handle both quoted and unquoted paths
-    // Pattern 1: @"path with spaces" - quoted paths
+    // Pattern 1: @"path with spaces or data URLs" - quoted paths
     // Pattern 2: @path - unquoted paths (continues until @ or end)
     const quotedRegex = /@"([^"]+)"/g;
     const unquotedRegex = /@([^@\n\s]+)/g;
     
     const pathsSet = new Set<string>(); // Use Set to ensure uniqueness
     
-    // First, extract quoted paths
+    // First, extract quoted paths (including data URLs)
     let matches = Array.from(text.matchAll(quotedRegex));
-    console.log('[extractImagePaths] Quoted matches:', matches.map(m => m[0]));
+    console.log('[extractImagePaths] Quoted matches:', matches.length);
     
     for (const match of matches) {
       const path = match[1]; // No need to trim, quotes preserve exact path
-      console.log('[extractImagePaths] Processing quoted path:', path);
+      console.log('[extractImagePaths] Processing quoted path:', path.startsWith('data:') ? 'data URL' : path);
       
-      // Convert relative path to absolute if needed
-      const fullPath = path.startsWith('/') ? path : (projectPath ? `${projectPath}/${path}` : path);
-      console.log('[extractImagePaths] Full path:', fullPath, 'Is image:', isImageFile(fullPath));
+      // For data URLs, use as-is; for file paths, convert to absolute
+      const fullPath = path.startsWith('data:') 
+        ? path 
+        : (path.startsWith('/') ? path : (projectPath ? `${projectPath}/${path}` : path));
       
       if (isImageFile(fullPath)) {
         pathsSet.add(fullPath);
@@ -256,25 +261,27 @@ const FloatingPromptInputInner = (
     // Remove quoted mentions from text to avoid double-matching
     let textWithoutQuoted = text.replace(quotedRegex, '');
     
-    // Then extract unquoted paths
+    // Then extract unquoted paths (typically file paths)
     matches = Array.from(textWithoutQuoted.matchAll(unquotedRegex));
-    console.log('[extractImagePaths] Unquoted matches:', matches.map(m => m[0]));
+    console.log('[extractImagePaths] Unquoted matches:', matches.length);
     
     for (const match of matches) {
       const path = match[1].trim();
+      // Skip if it looks like a data URL fragment (shouldn't happen with proper quoting)
+      if (path.includes('data:')) continue;
+      
       console.log('[extractImagePaths] Processing unquoted path:', path);
       
       // Convert relative path to absolute if needed
       const fullPath = path.startsWith('/') ? path : (projectPath ? `${projectPath}/${path}` : path);
-      console.log('[extractImagePaths] Full path:', fullPath, 'Is image:', isImageFile(fullPath));
       
       if (isImageFile(fullPath)) {
         pathsSet.add(fullPath);
       }
     }
 
-    const uniquePaths = Array.from(pathsSet); // Convert Set back to Array
-    console.log('[extractImagePaths] Final extracted paths (unique):', uniquePaths);
+    const uniquePaths = Array.from(pathsSet);
+    console.log('[extractImagePaths] Final extracted paths (unique):', uniquePaths.length);
     return uniquePaths;
   };
 
@@ -479,7 +486,7 @@ const FloatingPromptInputInner = (
 
   const handlePaste = async (e: React.ClipboardEvent) => {
     const items = e.clipboardData?.items;
-    if (!items || !projectPath) return;
+    if (!items) return;
 
     for (const item of items) {
       if (item.type.startsWith('image/')) {
@@ -492,24 +499,13 @@ const FloatingPromptInputInner = (
         try {
           // Convert blob to base64
           const reader = new FileReader();
-          reader.onload = async () => {
+          reader.onload = () => {
             const base64Data = reader.result as string;
             
-            // Generate a session-specific ID for the image
-            const sessionId = `paste-${Date.now()}`;
-            
-            // Save the image via Tauri command
-            const imagePath = await invoke<string>('save_clipboard_image', {
-              projectPath,
-              sessionId,
-              imageData: base64Data,
-              mimeType: item.type
-            });
-
-            // Add the image path as a mention to the prompt
+            // Add the base64 data URL directly to the prompt
             setPrompt(currentPrompt => {
-              // Wrap path in quotes if it contains spaces
-              const mention = imagePath.includes(' ') ? `@"${imagePath}"` : `@${imagePath}`;
+              // Use the data URL directly as the image reference
+              const mention = `@"${base64Data}"`;
               const newPrompt = currentPrompt + (currentPrompt.endsWith(' ') || currentPrompt === '' ? '' : ' ') + mention + ' ';
               
               // Focus the textarea and move cursor to end
@@ -548,6 +544,17 @@ const FloatingPromptInputInner = (
   const handleRemoveImage = (index: number) => {
     // Remove the corresponding @mention from the prompt
     const imagePath = embeddedImages[index];
+    
+    // For data URLs, we need to handle them specially since they're always quoted
+    if (imagePath.startsWith('data:')) {
+      // Simply remove the exact quoted data URL
+      const quotedPath = `@"${imagePath}"`;
+      const newPrompt = prompt.replace(quotedPath, '').trim();
+      setPrompt(newPrompt);
+      return;
+    }
+    
+    // For file paths, use the original logic
     const escapedPath = imagePath.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
     const escapedRelativePath = imagePath.replace(projectPath + '/', '').replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
     

src/components/ImagePreview.tsx

@@ -56,6 +56,16 @@ export const ImagePreview: React.FC<ImagePreviewProps> = ({
     onRemove(index);
   };
 
+  // Helper to get the image source - handles both file paths and data URLs
+  const getImageSrc = (imagePath: string): string => {
+    // If it's already a data URL, return as-is
+    if (imagePath.startsWith('data:')) {
+      return imagePath;
+    }
+    // Otherwise, convert the file path
+    return convertFileSrc(imagePath);
+  };
+
   if (displayImages.length === 0) return null;
 
   return (
@@ -83,7 +93,7 @@ export const ImagePreview: React.FC<ImagePreviewProps> = ({
                   </div>
                 ) : (
                   <img
-                    src={convertFileSrc(imagePath)}
+                    src={getImageSrc(imagePath)}
                     alt={`Preview ${index + 1}`}
                     className="w-full h-full object-cover"
                     onError={() => handleImageError(index)}
@@ -131,7 +141,7 @@ export const ImagePreview: React.FC<ImagePreviewProps> = ({
           {selectedImageIndex !== null && (
             <div className="relative w-full h-full flex items-center justify-center p-4">
               <img
-                src={convertFileSrc(displayImages[selectedImageIndex])}
+                src={getImageSrc(displayImages[selectedImageIndex])}
                 alt={`Full preview ${selectedImageIndex + 1}`}
                 className="max-w-full max-h-full object-contain"
                 onError={() => handleImageError(selectedImageIndex)}
@@ -164,4 +174,4 @@ export const ImagePreview: React.FC<ImagePreviewProps> = ({
       </Dialog>
     </>
   );
-}; 
+};