node-mac-recorder 2.4.10 → 2.4.11

package/ELECTRON-INTEGRATION.md

@@ -34,40 +34,72 @@ const selector = new ElectronWindowSelector();
 console.log(`Environment: ${selector.isElectron ? 'Electron' : 'Node.js'}`);
 ```
 
-### Pencere Seçimi (Electron Safe Mode)
+### Real-Time Window Detection (Electron Mode)
 ```javascript
 // 1. Mevcut pencere listesini al
 const windows = await selector.getAvailableWindows();
 console.log(`Found ${windows.length} windows`);
 
-// 2. Pencere seçim başlat (otomatik mode - demo amaçlı)
-const selectedWindow = await selector.selectWindow();
+// 2. Real-time mouse tracking başlat
+const nativeBinding = require('./build/Release/mac_recorder.node');
+const trackingInterval = setInterval(() => {
+    const status = nativeBinding.getWindowSelectionStatus();
+    
+    if (status && status.currentWindow) {
+        const window = status.currentWindow;
+        console.log(`Window under cursor: ${window.appName} - "${window.title}"`);
+        console.log(`Position: (${window.x}, ${window.y}) Size: ${window.width}x${window.height}`);
+        
+        if (window.screenId !== undefined) {
+            console.log(`Screen: ${window.screenId} (${window.screenWidth}x${window.screenHeight})`);
+        }
+        
+        // Electron UI'da bu window'u real-time highlight et
+        highlightWindowInElectronUI(window);
+    }
+}, 100); // 100ms polling for smooth tracking
 
-// 3. Event listener ile dinle
-selector.on('windowSelected', (windowInfo) => {
-    console.log('Selected:', windowInfo.title, windowInfo.appName);
+// 3. Pencere seçimi tamamlandığında
+function selectWindow(windowInfo) {
+    clearInterval(trackingInterval);
+    console.log('Window selected:', windowInfo);
     
-    // Electron UI'da bu window'u highlight et
-    showWindowInElectronUI(windowInfo);
-});
+    // Recording başlat
+    startRecordingWithWindow(windowInfo);
+}
 ```
 
-### Display Seçimi (Electron Safe Mode)  
+### Screen/Display Seçimi (Electron Mode)  
 ```javascript
 // 1. Mevcut display listesini al
 const displays = await selector.getAvailableDisplays();
 console.log(`Found ${displays.length} displays`);
 
-// 2. Display seçim başlat (otomatik mode - demo amaçlı)
-const selectedDisplay = await selector.selectScreen();
+// 2. Screen seçim başlat (Electron mode'da otomatik main screen)
+const nativeBinding = require('./build/Release/mac_recorder.node');
+const screenResult = nativeBinding.startScreenSelection();
 
-// 3. Event listener ile dinle
-selector.on('screenSelected', (screenInfo) => {
-    console.log('Selected Display:', screenInfo.name, screenInfo.resolution);
+if (screenResult) {
+    // Screen seçim bilgisini al
+    const selectedScreen = nativeBinding.getSelectedScreenInfo();
     
-    // Electron UI'da bu display'i highlight et
-    showDisplayInElectronUI(screenInfo);
-});
+    if (selectedScreen) {
+        console.log('Screen selected:', selectedScreen);
+        console.log(`Resolution: ${selectedScreen.width}x${selectedScreen.height}`);
+        console.log(`Position: (${selectedScreen.x}, ${selectedScreen.y})`);
+        
+        // Screen recording başlat
+        startScreenRecording(selectedScreen);
+    }
+}
+
+// 3. Manuel screen seçimi (UI ile)
+function selectScreen(screenInfo) {
+    console.log('Screen manually selected:', screenInfo);
+    
+    // Recording başlat
+    startScreenRecordingWithScreen(screenInfo);
+}
 ```
 
 ## 🎨 Electron UI Implementation Önerisi
@@ -104,12 +136,14 @@ selector.on('screenSelected', (screenInfo) => {
 </div>
 ```
 
-### 2. Renderer Process Logic
+### 2. Real-Time Window Tracking (Renderer Process)
 ```javascript
 // renderer.js
 const { ipcRenderer } = require('electron');
 
 let windowSelector = null;
+let trackingInterval = null;
+let currentHighlightedWindow = null;
 
 async function initializeWindowPicker() {
     // Main process'ten window selector'ı başlat
@@ -119,6 +153,77 @@ async function initializeWindowPicker() {
         // Mevcut windows'ları al
         const windows = await ipcRenderer.invoke('get-available-windows');
         displayWindowsInUI(windows);
+        
+        // Real-time tracking başlat
+        startRealTimeTracking();
+    }
+}
+
+function startRealTimeTracking() {
+    trackingInterval = setInterval(async () => {
+        try {
+            // Main process'ten mouse altındaki pencere bilgisini al
+            const currentWindow = await ipcRenderer.invoke('get-current-window-under-cursor');
+            
+            if (currentWindow && currentWindow.id !== currentHighlightedWindow?.id) {
+                // Yeni pencere tespit edildi
+                highlightWindowInUI(currentWindow);
+                currentHighlightedWindow = currentWindow;
+                
+                // UI'da bilgileri güncelle
+                updateCurrentWindowInfo(currentWindow);
+            } else if (!currentWindow && currentHighlightedWindow) {
+                // Mouse hiçbir pencere üstünde değil
+                clearWindowHighlight();
+                currentHighlightedWindow = null;
+                clearCurrentWindowInfo();
+            }
+        } catch (error) {
+            console.warn('Window tracking error:', error.message);
+        }
+    }, 100); // 100ms smooth tracking
+}
+
+function highlightWindowInUI(window) {
+    // Tüm window card'ları normal hale getir
+    document.querySelectorAll('.window-card').forEach(card => {
+        card.classList.remove('hover-detected');
+    });
+    
+    // Eşleşen window card'ı highlight et
+    const matchingCard = document.querySelector(`[data-window-id="${window.id}"]`);
+    if (matchingCard) {
+        matchingCard.classList.add('hover-detected');
+    }
+}
+
+function clearWindowHighlight() {
+    document.querySelectorAll('.window-card').forEach(card => {
+        card.classList.remove('hover-detected');
+    });
+}
+
+function updateCurrentWindowInfo(window) {
+    const infoDiv = document.getElementById('current-window-info');
+    if (infoDiv) {
+        infoDiv.innerHTML = `
+            <h4>Window Under Cursor</h4>
+            <p><strong>App:</strong> ${window.appName}</p>
+            <p><strong>Title:</strong> ${window.title}</p>
+            <p><strong>Size:</strong> ${window.width}×${window.height}</p>
+            <p><strong>Position:</strong> (${window.x}, ${window.y})</p>
+            ${window.screenId !== undefined ? 
+                `<p><strong>Screen:</strong> ${window.screenId} (${window.screenWidth}×${window.screenHeight})</p>` : 
+                ''}
+        `;
+        infoDiv.classList.add('visible');
+    }
+}
+
+function clearCurrentWindowInfo() {
+    const infoDiv = document.getElementById('current-window-info');
+    if (infoDiv) {
+        infoDiv.classList.remove('visible');
     }
 }
 
@@ -135,6 +240,7 @@ function displayWindowsInUI(windows) {
 function createWindowCard(window) {
     const card = document.createElement('div');
     card.className = 'window-card';
+    card.setAttribute('data-window-id', window.id);
     card.innerHTML = `
         <div class="window-thumbnail">
             <div class="window-placeholder">${window.appName?.charAt(0) || '?'}</div>
@@ -151,28 +257,50 @@ function createWindowCard(window) {
 }
 
 function selectWindow(window) {
+    // Tracking'i durdur
+    if (trackingInterval) {
+        clearInterval(trackingInterval);
+        trackingInterval = null;
+    }
+    
     // UI'da seçimi görsel olarak göster
-    document.querySelectorAll('.window-card').forEach(card => 
-        card.classList.remove('selected')
-    );
+    document.querySelectorAll('.window-card').forEach(card => {
+        card.classList.remove('selected', 'hover-detected');
+    });
     event.target.closest('.window-card').classList.add('selected');
     
     // Main process'e seçimi bildir
     ipcRenderer.invoke('window-selected', window);
 }
+
+// Cleanup function
+window.addEventListener('beforeunload', () => {
+    if (trackingInterval) {
+        clearInterval(trackingInterval);
+    }
+});
 ```
 
-### 3. Main Process Handler
+### 3. Enhanced Main Process Handler
 ```javascript
 // main.js
 const { ipcMain } = require('electron');
 const ElectronWindowSelector = require('node-mac-recorder/electron-window-selector');
 
 let windowSelector = null;
+let nativeBinding = null;
 
 ipcMain.handle('init-window-selector', async () => {
     try {
         windowSelector = new ElectronWindowSelector();
+        
+        // Native binding'i yükle (real-time tracking için)
+        try {
+            nativeBinding = require('./build/Release/mac_recorder.node');
+        } catch (error) {
+            console.warn('Native binding yüklenemedi:', error.message);
+        }
+        
         return { success: true };
     } catch (error) {
         return { success: false, error: error.message };
@@ -189,20 +317,99 @@ ipcMain.handle('get-available-displays', async () => {
     return await windowSelector.getAvailableDisplays();
 });
 
+// Real-time window tracking için yeni handler
+ipcMain.handle('get-current-window-under-cursor', async () => {
+    if (!nativeBinding) return null;
+    
+    try {
+        const status = nativeBinding.getWindowSelectionStatus();
+        return status?.currentWindow || null;
+    } catch (error) {
+        console.warn('Window status alınamadı:', error.message);
+        return null;
+    }
+});
+
 ipcMain.handle('window-selected', async (event, windowInfo) => {
     console.log('Window selected in Electron UI:', windowInfo);
+    console.log(`  - App: ${windowInfo.appName}`);
+    console.log(`  - Title: ${windowInfo.title}`);
+    console.log(`  - Size: ${windowInfo.width}×${windowInfo.height}`);
+    console.log(`  - Position: (${windowInfo.x}, ${windowInfo.y})`);
+    
+    if (windowInfo.screenId !== undefined) {
+        console.log(`  - Screen: ${windowInfo.screenId} (${windowInfo.screenWidth}×${windowInfo.screenHeight})`);
+    }
     
     // Recording başlatılabilir
     const MacRecorder = require('node-mac-recorder');
     const recorder = new MacRecorder();
     
-    // Window recording başlat
-    await recorder.startRecording('./output.mov', {
-        windowId: windowInfo.id,
-        // ... diğer options
-    });
+    try {
+        // Window recording başlat
+        await recorder.startRecording('./output.mov', {
+            windowId: windowInfo.id,
+            // Screen coordination
+            x: windowInfo.x,
+            y: windowInfo.y, 
+            width: windowInfo.width,
+            height: windowInfo.height,
+            // Diğer options
+            fps: 30,
+            audioEnabled: true
+        });
+        
+        return { 
+            success: true, 
+            message: 'Recording started successfully',
+            windowInfo: windowInfo
+        };
+    } catch (error) {
+        return { 
+            success: false, 
+            error: error.message 
+        };
+    }
+});
+
+// Screen recording handler
+ipcMain.handle('screen-selected', async (event, screenInfo) => {
+    console.log('Screen selected in Electron UI:', screenInfo);
+    
+    const MacRecorder = require('node-mac-recorder');
+    const recorder = new MacRecorder();
     
-    return { success: true };
+    try {
+        // Screen recording başlat
+        await recorder.startRecording('./screen-output.mov', {
+            // Screen mode
+            screenId: screenInfo.id,
+            x: screenInfo.x,
+            y: screenInfo.y,
+            width: screenInfo.width,
+            height: screenInfo.height,
+            fps: 30,
+            audioEnabled: true
+        });
+        
+        return { 
+            success: true, 
+            message: 'Screen recording started',
+            screenInfo: screenInfo
+        };
+    } catch (error) {
+        return { 
+            success: false, 
+            error: error.message 
+        };
+    }
+});
+
+// Recording control handlers
+ipcMain.handle('stop-recording', async () => {
+    // Aktif recorder instance'ı durdur
+    // Bu implementation'a recorder management eklenmeli
+    return { success: true, message: 'Recording stopped' };
 });
 ```
 
@@ -243,12 +450,13 @@ function showRecordingPreview(windowInfo) {
 }
 ```
 
-## 🔧 CSS Styling
+## 🎨 Enhanced CSS Styling (Real-Time Tracking)
 ```css
 .window-picker {
     padding: 20px;
     max-height: 500px;
     overflow-y: auto;
+    position: relative;
 }
 
 .window-grid {
@@ -264,6 +472,7 @@ function showRecordingPreview(windowInfo) {
     padding: 10px;
     cursor: pointer;
     transition: all 0.2s;
+    position: relative;
 }
 
 .window-card:hover {
@@ -276,6 +485,27 @@ function showRecordingPreview(windowInfo) {
     background-color: #e6f3ff;
 }
 
+/* Real-time hover detection styling */
+.window-card.hover-detected {
+    border-color: #ff6b35 !important;
+    background-color: #fff3f0 !important;
+    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
+    transform: translateY(-2px);
+}
+
+.window-card.hover-detected::before {
+    content: "🎯 CURSOR HERE";
+    position: absolute;
+    top: -10px;
+    right: 5px;
+    background: #ff6b35;
+    color: white;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 10px;
+    font-weight: bold;
+}
+
 .window-thumbnail {
     height: 80px;
     background: #f5f5f5;
@@ -312,31 +542,169 @@ function showRecordingPreview(windowInfo) {
     color: #999;
     font-size: 11px;
 }
+
+/* Real-time info panel */
+#current-window-info {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    background: rgba(0, 0, 0, 0.9);
+    color: white;
+    padding: 15px;
+    border-radius: 8px;
+    min-width: 250px;
+    opacity: 0;
+    transform: translateX(300px);
+    transition: all 0.3s ease;
+    z-index: 1000;
+    font-family: 'Monaco', monospace;
+    font-size: 12px;
+}
+
+#current-window-info.visible {
+    opacity: 1;
+    transform: translateX(0);
+}
+
+#current-window-info h4 {
+    margin: 0 0 10px 0;
+    color: #ff6b35;
+    font-size: 14px;
+}
+
+#current-window-info p {
+    margin: 4px 0;
+    line-height: 1.4;
+}
+
+#current-window-info strong {
+    color: #fff;
+}
+
+/* Animation for smooth transitions */
+.window-card {
+    will-change: transform, box-shadow, border-color;
+}
+
+@keyframes pulseHover {
+    0% { transform: scale(1) translateY(-2px); }
+    50% { transform: scale(1.02) translateY(-3px); }
+    100% { transform: scale(1) translateY(-2px); }
+}
+
+.window-card.hover-detected {
+    animation: pulseHover 2s infinite;
+}
+
+/* Status indicator */
+.tracking-status {
+    position: absolute;
+    top: 10px;
+    left: 20px;
+    background: #4CAF50;
+    color: white;
+    padding: 5px 10px;
+    border-radius: 15px;
+    font-size: 12px;
+    font-weight: bold;
+}
+
+.tracking-status::before {
+    content: "🔴 ";
+    animation: blink 1s infinite;
+}
+
+@keyframes blink {
+    0%, 50% { opacity: 1; }
+    51%, 100% { opacity: 0; }
+}
 ```
 
+## ✨ Yeni Real-Time Tracking Özellikleri
+
+### 🎯 Anlık Window Tespit
+- **100ms polling** ile smooth mouse tracking
+- Mouse hangi pencere üstüne giderse **otomatik highlight**
+- **Screen detection** - pencere hangi ekranda, otomatik tespit
+- **Koordinat bilgisi** - x, y, width, height gerçek zamanlı
+
+### 🔥 UI Features
+- `hover-detected` class ile anlık görsel feedback
+- Real-time info panel (sağ üst köşe)
+- Pulse animation effect
+- "🎯 CURSOR HERE" indicator
+
+### 🖥️ Multi-Screen Support
+- Pencere hangi screen'de otomatik tespit
+- Screen koordinatları ve boyutları dahil
+- Cross-screen window tracking
+
 ## ⚠️ Önemli Notlar
 
-1. **Native Overlays**: Electron modunda native NSWindow overlays devre dışıdır
-2. **Auto Selection**: Şu an demo amaçlı otomatik seçim yapıyor, gerçek uygulamada UI ile seçim yapılmalı
-3. **Permission Check**: `checkPermissions()` tüm modlarda çalışır
-4. **Event Handling**: Electron'da event'ler IPC ile main ve renderer process arasında taşınmalı
+### 🔧 Teknik Gereksinimler
+1. **Native Module**: Real-time tracking için native binding gerekli
+2. **macOS Permissions**: Screen Recording ve Accessibility izinleri
+3. **Electron Environment**: `ELECTRON_VERSION` env variable otomatik tespit
+4. **Performance**: 100ms polling interval (ayarlanabilir)
+
+### 🛠️ Implementation Notes
+1. **IPC Communication**: Main ↔ Renderer process real-time data exchange
+2. **Memory Management**: Interval cleanup önemli
+3. **Error Handling**: Native binding yoksa graceful fallback
+4. **UI Responsiveness**: CSS transitions ile smooth UX
+
+### 🚨 Troubleshooting
+- **Native binding yüklenemezse**: `npm run build` ile tekrar derle
+- **Permission hatası**: System Preferences → Security & Privacy
+- **Tracking çalışmıyorsa**: `ELECTRON_VERSION` environment variable kontrol et
+- **UI update yavaşsa**: Polling interval'ı artır (100ms → 200ms)
 
 ## 🚀 Sonraki Adımlar
 
-1. Thumbnail generation implementasyonu
-2. Real-time window list updates
-3. Multiple display support UI
-4. Recording progress indicator
-5. Custom recording area selection
+### Phase 1: Core Enhancement
+1. ✅ **Real-time window tracking** - TAMAMLANDI
+2. ✅ **Screen detection accuracy** - TAMAMLANDI  
+3. ✅ **Electron compatibility** - TAMAMLANDI
+4. 🔄 Thumbnail generation implementasyonu
+
+### Phase 2: Advanced Features  
+5. 📋 Window list real-time updates
+6. 🖥️ Multiple display UI enhancement
+7. 📹 Recording progress indicator
+8. ✂️ Custom recording area selection
+9. 🎨 Window preview thumbnails
+
+### Phase 3: Performance & UX
+10. ⚡ Performance optimization
+11. 🎭 Advanced animations
+12. 📱 Responsive design improvements
+13. 🔧 Settings panel
 
 ## 📞 Test Komutları
 
 ```bash
-# Electron mode test
-ELECTRON_VERSION=25.0.0 node test-electron-window-selector.js
+# Fixed overlay functionality test
+node test-overlay-fix.js
+
+# Electron mode test  
+ELECTRON_VERSION=25.0.0 node test-overlay-fix.js
+
+# Build native module
+npm run build
 
-# Node.js mode test  
+# Full integration test
 node test-electron-window-selector.js
 ```
 
-Bu implementasyon sayesinde Electron uygulamaları crash olmadan pencere seçimi yapabilir ve recording işlevlerini güvenli şekilde kullanabilir.
+## 🎉 Sonuç
+
+Bu güncellenmiş implementasyon ile:
+
+✅ **Mouse tracking** gerçek zamanlı çalışıyor
+✅ **Window detection** hassas ve hızlı
+✅ **Screen coordination** doğru hesaplanıyor  
+✅ **Electron integration** sorunsuz çalışıyor
+✅ **Multi-display support** tam uyumlu
+✅ **Real-time UI feedback** kullanıcı dostu
+
+Electron uygulamanızda artık native overlay benzeri deneyim sunabilir, kullanıcı mouse'u hareket ettirdikçe hangi pencere üstünde olduğunu görebilir ve tek tıkla recording başlatabilirsiniz!

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "node-mac-recorder",
-	"version": "2.4.10",
+	"version": "2.4.11",
 	"description": "Native macOS screen recording package for Node.js applications",
 	"main": "index.js",
 	"keywords": [

package/src/window_selector.mm

@@ -497,22 +497,56 @@ NSArray* getAllSelectableWindowsLegacy() {
     }
 }
 
-// Get window under cursor point
+// Get window under cursor point using real-time mouse position
 NSDictionary* getWindowUnderCursor(CGPoint point) {
     @autoreleasepool {
-        if (!g_allWindows) return nil;
-        
-        // Find window that contains the cursor point
-        for (NSDictionary *window in g_allWindows) {
-            int x = [[window objectForKey:@"x"] intValue];
-            int y = [[window objectForKey:@"y"] intValue];
-            int width = [[window objectForKey:@"width"] intValue];
-            int height = [[window objectForKey:@"height"] intValue];
+        // Get window ID directly under cursor using macOS API
+        CFArrayRef windowList = CGWindowListCopyWindowInfo(kCGWindowListOptionOnScreenOnly, kCGNullWindowID);
+        
+        if (windowList) {
+            NSArray *windowArray = (__bridge NSArray *)windowList;
             
-            if (point.x >= x && point.x <= x + width &&
-                point.y >= y && point.y <= y + height) {
-                return window;
+            // Find the topmost window at cursor position
+            for (NSDictionary *windowInfo in windowArray) {
+                NSDictionary *bounds = [windowInfo objectForKey:(NSString *)kCGWindowBounds];
+                NSNumber *layer = [windowInfo objectForKey:(NSString *)kCGWindowLayer];
+                NSString *owner = [windowInfo objectForKey:(NSString *)kCGWindowOwnerName];
+                NSNumber *winID = [windowInfo objectForKey:(NSString *)kCGWindowNumber];
+                
+                if (!bounds || !winID || !owner) continue;
+                if ([layer intValue] != 0) continue; // Only normal windows
+                if ([owner isEqualToString:@"WindowServer"] || [owner isEqualToString:@"Dock"]) continue;
+                
+                int x = [[bounds objectForKey:@"X"] intValue];
+                int y = [[bounds objectForKey:@"Y"] intValue];
+                int width = [[bounds objectForKey:@"Width"] intValue];
+                int height = [[bounds objectForKey:@"Height"] intValue];
+                
+                // Skip too small windows
+                if (width < 50 || height < 50) continue;
+                
+                // Check if cursor is within window bounds
+                if (point.x >= x && point.x <= x + width &&
+                    point.y >= y && point.y <= y + height) {
+                    
+                    NSString *windowName = [windowInfo objectForKey:(NSString *)kCGWindowName];
+                    
+                    // Create window info in our format
+                    NSDictionary *window = @{
+                        @"id": winID,
+                        @"title": windowName ?: @"Untitled",
+                        @"appName": owner,
+                        @"x": @(x),
+                        @"y": @(y),
+                        @"width": @(width),
+                        @"height": @(height)
+                    };
+                    
+                    CFRelease(windowList);
+                    return window;
+                }
             }
+            CFRelease(windowList);
         }
         
         return nil;
@@ -1274,26 +1308,54 @@ Napi::Value GetSelectedWindowInfo(const Napi::CallbackInfo& info) {
         NSLog(@"   📊 Details: ID=%@, Pos=(%d,%d), Size=%dx%d", 
               [g_selectedWindowInfo objectForKey:@"id"], x, y, width, height);
         
-        // Get all screens
+        // Get all screens and find which screen contains this window
         NSArray *screens = [NSScreen screens];
         NSScreen *windowScreen = nil;
         NSScreen *mainScreen = [NSScreen mainScreen];
         
+        // Calculate window center point for better screen detection
+        CGPoint windowCenter = CGPointMake(x + width/2, y + height/2);
+        
         for (NSScreen *screen in screens) {
             NSRect screenFrame = [screen frame];
             
-            // Convert window coordinates to screen-relative
-            if (x >= screenFrame.origin.x && 
-                x < screenFrame.origin.x + screenFrame.size.width &&
-                y >= screenFrame.origin.y && 
-                y < screenFrame.origin.y + screenFrame.size.height) {
+            // Check if window center is within screen bounds
+            if (windowCenter.x >= screenFrame.origin.x && 
+                windowCenter.x < screenFrame.origin.x + screenFrame.size.width &&
+                windowCenter.y >= screenFrame.origin.y && 
+                windowCenter.y < screenFrame.origin.y + screenFrame.size.height) {
                 windowScreen = screen;
+                NSLog(@"   🖥️ Window found on screen: (%.0f,%.0f) %.0fx%.0f", 
+                      screenFrame.origin.x, screenFrame.origin.y, 
+                      screenFrame.size.width, screenFrame.size.height);
                 break;
             }
         }
         
+        // If no exact match, find screen with maximum overlap
+        if (!windowScreen) {
+            CGFloat maxOverlapArea = 0;
+            NSRect windowRect = NSMakeRect(x, y, width, height);
+            
+            for (NSScreen *screen in screens) {
+                NSRect screenFrame = [screen frame];
+                NSRect intersection = NSIntersectionRect(windowRect, screenFrame);
+                CGFloat overlapArea = intersection.size.width * intersection.size.height;
+                
+                if (overlapArea > maxOverlapArea) {
+                    maxOverlapArea = overlapArea;
+                    windowScreen = screen;
+                }
+            }
+            
+            if (windowScreen) {
+                NSLog(@"   🖥️ Window assigned to screen with max overlap: %.0f pixels²", maxOverlapArea);
+            }
+        }
+        
         if (!windowScreen) {
             windowScreen = mainScreen;
+            NSLog(@"   🖥️ Window defaulted to main screen");
         }
         
         // Add screen information
@@ -1361,13 +1423,74 @@ Napi::Value GetWindowSelectionStatus(const Napi::CallbackInfo& info) {
         updateOverlay();
     }
     
+    // For Electron mode, also get real-time window under cursor
+    const char* electronVersion = getenv("ELECTRON_VERSION");
+    const char* electronRunAs = getenv("ELECTRON_RUN_AS_NODE");
+    
     Napi::Object result = Napi::Object::New(env);
     result.Set("isSelecting", Napi::Boolean::New(env, g_isWindowSelecting));
     result.Set("hasSelectedWindow", Napi::Boolean::New(env, g_selectedWindowInfo != nil));
     result.Set("windowCount", Napi::Number::New(env, g_allWindows ? [g_allWindows count] : 0));
     result.Set("hasOverlay", Napi::Boolean::New(env, g_overlayWindow != nil));
     
-    if (g_currentWindowUnderCursor) {
+    if (electronVersion || electronRunAs) {
+        // In Electron mode, get real-time window under cursor
+        @try {
+            NSPoint mouseLocation = [NSEvent mouseLocation];
+            NSScreen *mainScreen = [NSScreen mainScreen];
+            CGFloat screenHeight = [mainScreen frame].size.height;
+            CGPoint globalPoint = CGPointMake(mouseLocation.x, screenHeight - mouseLocation.y);
+            
+            NSDictionary *windowUnderCursor = getWindowUnderCursor(globalPoint);
+            
+            if (windowUnderCursor) {
+                Napi::Object currentWindow = Napi::Object::New(env);
+                currentWindow.Set("id", Napi::Number::New(env, [[windowUnderCursor objectForKey:@"id"] intValue]));
+                currentWindow.Set("title", Napi::String::New(env, [[windowUnderCursor objectForKey:@"title"] UTF8String]));
+                currentWindow.Set("appName", Napi::String::New(env, [[windowUnderCursor objectForKey:@"appName"] UTF8String]));
+                currentWindow.Set("x", Napi::Number::New(env, [[windowUnderCursor objectForKey:@"x"] intValue]));
+                currentWindow.Set("y", Napi::Number::New(env, [[windowUnderCursor objectForKey:@"y"] intValue]));
+                currentWindow.Set("width", Napi::Number::New(env, [[windowUnderCursor objectForKey:@"width"] intValue]));
+                currentWindow.Set("height", Napi::Number::New(env, [[windowUnderCursor objectForKey:@"height"] intValue]));
+                
+                // Add screen detection for Electron
+                int x = [[windowUnderCursor objectForKey:@"x"] intValue];
+                int y = [[windowUnderCursor objectForKey:@"y"] intValue];
+                int width = [[windowUnderCursor objectForKey:@"width"] intValue];
+                int height = [[windowUnderCursor objectForKey:@"height"] intValue];
+                
+                NSArray *screens = [NSScreen screens];
+                NSScreen *windowScreen = nil;
+                CGPoint windowCenter = CGPointMake(x + width/2, y + height/2);
+                
+                for (NSScreen *screen in screens) {
+                    NSRect screenFrame = [screen frame];
+                    if (windowCenter.x >= screenFrame.origin.x && 
+                        windowCenter.x < screenFrame.origin.x + screenFrame.size.width &&
+                        windowCenter.y >= screenFrame.origin.y && 
+                        windowCenter.y < screenFrame.origin.y + screenFrame.size.height) {
+                        windowScreen = screen;
+                        break;
+                    }
+                }
+                
+                if (windowScreen) {
+                    NSRect screenFrame = [windowScreen frame];
+                    currentWindow.Set("screenId", Napi::Number::New(env, [[windowScreen deviceDescription] objectForKey:@"NSScreenNumber"] ? 
+                        [[[windowScreen deviceDescription] objectForKey:@"NSScreenNumber"] intValue] : 0));
+                    currentWindow.Set("screenX", Napi::Number::New(env, (int)screenFrame.origin.x));
+                    currentWindow.Set("screenY", Napi::Number::New(env, (int)screenFrame.origin.y));
+                    currentWindow.Set("screenWidth", Napi::Number::New(env, (int)screenFrame.size.width));
+                    currentWindow.Set("screenHeight", Napi::Number::New(env, (int)screenFrame.size.height));
+                }
+                
+                result.Set("currentWindow", currentWindow);
+            }
+        } @catch (NSException *exception) {
+            // Ignore mouse tracking errors in Electron mode
+        }
+    } else if (g_currentWindowUnderCursor) {
+        // Native mode
         Napi::Object currentWindow = Napi::Object::New(env);
         currentWindow.Set("id", Napi::Number::New(env, [[g_currentWindowUnderCursor objectForKey:@"id"] intValue]));
         currentWindow.Set("title", Napi::String::New(env, [[g_currentWindowUnderCursor objectForKey:@"title"] UTF8String]));

package/test-overlay-fix.js

@@ -0,0 +1,72 @@
+#!/usr/bin/env node
+
+const ElectronWindowSelector = require('./electron-window-selector.js');
+
+console.log('🧪 Testing Fixed Overlay Functionality');
+console.log('=====================================');
+
+async function testOverlayFunctionality() {
+    const selector = new ElectronWindowSelector();
+    
+    try {
+        console.log('\n🔍 Environment Check:');
+        const status = selector.getStatus();
+        console.log(`  - Electron Mode: ${status.isElectron}`);
+        
+        console.log('\n🪟 Testing Window Detection...');
+        
+        // Test real-time window detection
+        console.log('Move your mouse over different windows...');
+        console.log('Press Ctrl+C to stop\n');
+        
+        let lastWindowId = null;
+        
+        const checkInterval = setInterval(async () => {
+            try {
+                // Simulate what Electron app would do - poll for current window
+                const windowStatus = require('./build/Release/mac_recorder.node').getWindowSelectionStatus();
+                
+                if (windowStatus && windowStatus.currentWindow) {
+                    const window = windowStatus.currentWindow;
+                    
+                    if (window.id !== lastWindowId) {
+                        lastWindowId = window.id;
+                        
+                        console.log(`🎯 Window Detected: ${window.appName} - "${window.title}"`);
+                        console.log(`   📍 Position: (${window.x}, ${window.y})`);
+                        console.log(`   📏 Size: ${window.width}x${window.height}`);
+                        
+                        if (window.screenId !== undefined) {
+                            console.log(`   🖥️ Screen: ${window.screenId} (${window.screenWidth}x${window.screenHeight})`);
+                        }
+                        console.log('');
+                    }
+                } else if (lastWindowId !== null) {
+                    lastWindowId = null;
+                    console.log('🚪 No window under cursor\n');
+                }
+            } catch (error) {
+                console.error('Error during window detection:', error.message);
+            }
+        }, 100); // Check every 100ms for smooth tracking
+        
+        // Handle Ctrl+C gracefully
+        process.on('SIGINT', () => {
+            console.log('\n\n🛑 Stopping test...');
+            clearInterval(checkInterval);
+            selector.cleanup().then(() => {
+                console.log('✅ Cleanup completed');
+                process.exit(0);
+            });
+        });
+        
+    } catch (error) {
+        console.error('❌ Test failed:', error.message);
+        process.exit(1);
+    }
+}
+
+// Set Electron environment for testing
+process.env.ELECTRON_VERSION = '25.0.0';
+
+testOverlayFunctionality();