feat: Add image upload functionality with drag & drop, clipboard paste, and file picker (#46)

- Add drag & drop support for images with visual feedback
- Implement clipboard paste for images (Ctrl+V/Cmd+V)
- Add image upload button in chat interface
- Support multiple formats: PNG, JPG, JPEG, GIF, WebP, SVG
- Max 5 images per message, 5MB per image
- Add image preview with remove functionality
- Display images in chat message bubbles

Technical implementation:
- Frontend: Add react-dropzone for drag & drop
- Frontend: Create ImageAttachment component for previews
- Backend: Add multer for file upload handling
- Backend: Create /api/projects/:projectName/upload-images endpoint
- Backend: Convert images to base64 and save to temp files
- Claude CLI: Pass image paths as arguments
- Add automatic cleanup of temporary files
- Fix JWT auth to use correct token name
- Fix UI overlap with proper padding adjustments
- Remove non-essential console.logs for production

Security:
- Validate file types and sizes
- Sanitize filenames
- User-specific temp directories
- Proper JWT authentication

Infrastructure:
- Add .tmp/ to .gitignore
- Create comprehensive CHANGELOG.md
- Update package.json with new dependencies

Co-authored-by: viper151 <simosmik@gmail.com>

server/index.js

@@ -814,6 +814,90 @@ Agent instructions:`;
   }
 });
 
+// Image upload endpoint
+app.post('/api/projects/:projectName/upload-images', authenticateToken, async (req, res) => {
+  try {
+    const multer = (await import('multer')).default;
+    const path = (await import('path')).default;
+    const fs = (await import('fs')).promises;
+    const os = (await import('os')).default;
+    
+    // Configure multer for image uploads
+    const storage = multer.diskStorage({
+      destination: async (req, file, cb) => {
+        const uploadDir = path.join(os.tmpdir(), 'claude-ui-uploads', String(req.user.id));
+        await fs.mkdir(uploadDir, { recursive: true });
+        cb(null, uploadDir);
+      },
+      filename: (req, file, cb) => {
+        const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
+        const sanitizedName = file.originalname.replace(/[^a-zA-Z0-9.-]/g, '_');
+        cb(null, uniqueSuffix + '-' + sanitizedName);
+      }
+    });
+    
+    const fileFilter = (req, file, cb) => {
+      const allowedMimes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp', 'image/svg+xml'];
+      if (allowedMimes.includes(file.mimetype)) {
+        cb(null, true);
+      } else {
+        cb(new Error('Invalid file type. Only JPEG, PNG, GIF, WebP, and SVG are allowed.'));
+      }
+    };
+    
+    const upload = multer({
+      storage,
+      fileFilter,
+      limits: {
+        fileSize: 5 * 1024 * 1024, // 5MB
+        files: 5
+      }
+    });
+    
+    // Handle multipart form data
+    upload.array('images', 5)(req, res, async (err) => {
+      if (err) {
+        return res.status(400).json({ error: err.message });
+      }
+      
+      if (!req.files || req.files.length === 0) {
+        return res.status(400).json({ error: 'No image files provided' });
+      }
+      
+      try {
+        // Process uploaded images
+        const processedImages = await Promise.all(
+          req.files.map(async (file) => {
+            // Read file and convert to base64
+            const buffer = await fs.readFile(file.path);
+            const base64 = buffer.toString('base64');
+            const mimeType = file.mimetype;
+            
+            // Clean up temp file immediately
+            await fs.unlink(file.path);
+            
+            return {
+              name: file.originalname,
+              data: `data:${mimeType};base64,${base64}`,
+              size: file.size,
+              mimeType: mimeType
+            };
+          })
+        );
+        
+        res.json({ images: processedImages });
+      } catch (error) {
+        console.error('Error processing images:', error);
+        // Clean up any remaining files
+        await Promise.all(req.files.map(f => fs.unlink(f.path).catch(() => {})));
+        res.status(500).json({ error: 'Failed to process images' });
+      }
+    });
+  } catch (error) {
+    console.error('Error in image upload endpoint:', error);
+    res.status(500).json({ error: 'Internal server error' });
+  }
+});
 
 // Serve React app for all other routes
 app.get('*', (req, res) => {