feat: add IPC-based overlay mode support with context isolation

- Implement overlay mode IPC handlers in permissions.js
- Update preload script to expose overlay mode methods via contextBridge
- Refactor useOverlayMode composable to use IPC as primary method
- Fix settings store initialization in Main.vue
- Maintain backward compatibility with window.remote fallback
- Enable transparency and window opacity controls via secure IPC

Author: vijaythecoder

resources/js/composables/useOverlayMode.ts

@@ -13,6 +13,15 @@ declare global {
                 setBackgroundColor?: (color: string) => void;
             };
         };
+        macPermissions?: {
+            overlayMode: {
+                checkSupport: () => Promise<{ supported: boolean; platform?: string; reason?: string; error?: string }>;
+                setAlwaysOnTop: (flag: boolean, level?: string) => Promise<{ success: boolean; alwaysOnTop?: boolean; error?: string }>;
+                setOpacity: (opacity: number) => Promise<{ success: boolean; opacity?: number; error?: string }>;
+                getOpacity: () => Promise<{ success: boolean; opacity?: number; error?: string }>;
+                setBackgroundColor: (color: string) => Promise<{ success: boolean; color?: string; error?: string }>;
+            };
+        };
     }
 }
 
@@ -22,7 +31,21 @@ export function useOverlayMode() {
     let previousTheme: string | null = null;
 
     // Check if overlay mode is supported
-    const checkSupport = () => {
+    const checkSupport = async () => {
+        // First try IPC method
+        if (window.macPermissions?.overlayMode) {
+            try {
+                const result = await window.macPermissions.overlayMode.checkSupport();
+                if (result.supported) {
+                    isSupported.value = true;
+                    return true;
+                }
+            } catch (error) {
+                console.error('Error checking overlay mode support via IPC:', error);
+            }
+        }
+        
+        // Fallback to window.remote for backward compatibility
         try {
             if (window.remote && typeof window.remote.getCurrentWindow === 'function') {
                 const currentWindow = window.remote.getCurrentWindow();
@@ -49,46 +72,53 @@ export function useOverlayMode() {
     };
 
     // Toggle overlay mode
-    const toggleOverlayMode = () => {
+    const toggleOverlayMode = async () => {
         if (!isSupported.value) {
             return false;
         }
 
         const newState = !isOverlayMode.value;
 
         try {
-            const currentWindow = window.remote!.getCurrentWindow();
-
             if (newState) {
                 // Enable overlay mode
-                currentWindow.setAlwaysOnTop(true, 'floating');
-
-                // Set transparent background for overlay mode
-                if (typeof currentWindow.setBackgroundColor === 'function') {
-                    currentWindow.setBackgroundColor('#00000000');
-                }
-
-                // Set window opacity for overlay mode visibility
-                if (typeof currentWindow.setOpacity === 'function') {
-                    currentWindow.setOpacity(0.8); // 80% opacity for more transparency
+                if (window.macPermissions?.overlayMode) {
+                    // Use IPC methods
+                    await window.macPermissions.overlayMode.setAlwaysOnTop(true, 'floating');
+                    await window.macPermissions.overlayMode.setBackgroundColor('#00000000');
+                    await window.macPermissions.overlayMode.setOpacity(0.8);
+                } else if (window.remote) {
+                    // Fallback to window.remote
+                    const currentWindow = window.remote.getCurrentWindow();
+                    currentWindow.setAlwaysOnTop(true, 'floating');
+                    if (typeof currentWindow.setBackgroundColor === 'function') {
+                        currentWindow.setBackgroundColor('#00000000');
+                    }
+                    if (typeof currentWindow.setOpacity === 'function') {
+                        currentWindow.setOpacity(0.8);
+                    }
                 }
 
                 // Save current theme and force dark mode
                 previousTheme = localStorage.getItem('appearance');
                 updateTheme('dark');
             } else {
                 // Disable overlay mode
-                currentWindow.setAlwaysOnTop(false);
-
-                // Restore opaque background
-                if (typeof currentWindow.setBackgroundColor === 'function') {
-                    // Set opaque background to match the app
-                    currentWindow.setBackgroundColor('#f5f7fa');
-                }
-
-                // Restore full window opacity
-                if (typeof currentWindow.setOpacity === 'function') {
-                    currentWindow.setOpacity(1); // Full opacity for normal mode
+                if (window.macPermissions?.overlayMode) {
+                    // Use IPC methods
+                    await window.macPermissions.overlayMode.setAlwaysOnTop(false);
+                    await window.macPermissions.overlayMode.setBackgroundColor('#f5f7fa');
+                    await window.macPermissions.overlayMode.setOpacity(1);
+                } else if (window.remote) {
+                    // Fallback to window.remote
+                    const currentWindow = window.remote.getCurrentWindow();
+                    currentWindow.setAlwaysOnTop(false);
+                    if (typeof currentWindow.setBackgroundColor === 'function') {
+                        currentWindow.setBackgroundColor('#f5f7fa');
+                    }
+                    if (typeof currentWindow.setOpacity === 'function') {
+                        currentWindow.setOpacity(1);
+                    }
                 }
 
                 // Restore previous theme
@@ -110,7 +140,8 @@ export function useOverlayMode() {
             );
 
             return true;
-        } catch {
+        } catch (error) {
+            console.error('Error toggling overlay mode:', error);
             return false;
         }
     };
@@ -136,17 +167,21 @@ export function useOverlayMode() {
 
     // Initialize
     onMounted(() => {
-        setTimeout(() => {
-            if (checkSupport()) {
+        setTimeout(async () => {
+            if (await checkSupport()) {
                 const savedPreference = loadPreference();
                 if (savedPreference) {
-                    enableOverlayMode();
+                    await enableOverlayMode();
                 } else {
                     // Ensure normal mode has opaque background on startup
                     try {
-                        const currentWindow = window.remote!.getCurrentWindow();
-                        if (typeof currentWindow.setBackgroundColor === 'function') {
-                            currentWindow.setBackgroundColor('#f5f7fa');
+                        if (window.macPermissions?.overlayMode) {
+                            await window.macPermissions.overlayMode.setBackgroundColor('#f5f7fa');
+                        } else if (window.remote) {
+                            const currentWindow = window.remote.getCurrentWindow();
+                            if (typeof currentWindow.setBackgroundColor === 'function') {
+                                currentWindow.setBackgroundColor('#f5f7fa');
+                            }
                         }
                     } catch {}
                 }

resources/js/pages/RealtimeAgent/Main.vue

@@ -692,6 +692,7 @@ import { useVariables } from '@/composables/useVariables';
 import { audioHealthMonitor, type AudioHealthStatus } from '@/services/audioHealthCheck';
 import { router } from '@inertiajs/vue3';
 import axios from 'axios';
+import { useSettingsStore } from '@/stores/settings';
 // import type { TemplateResolution } from '@/types/variable'
 import ContextualInformation from '@/components/ContextualInformation.vue';
 
@@ -2565,6 +2566,15 @@ const handleBeforeUnload = (e: BeforeUnloadEvent) => {
 
 // Demo data for visualization
 onMounted(async () => {
+    // Initialize settings store with composable support status
+    const settingsStore = useSettingsStore();
+    
+    // Wait a bit for composables to check support
+    setTimeout(() => {
+        settingsStore.setOverlaySupported(isOverlaySupported.value);
+        settingsStore.setProtectionSupported(isProtectionSupported.value);
+    }, 200);
+    
     // Check API key status first
     try {
         const response = await axios.get('/api/openai/status');