diff --git a/.gitignore b/.gitignore
index cc07774..77fa718 100644
--- a/.gitignore
+++ b/.gitignore
@@ -24,3 +24,6 @@ yarn-error.log
 /.zed
 /dist
 .DS_Store
+
+# NativePHP local development
+nativephp-electron/
diff --git a/NATIVEPHP_EXTENSIBILITY_PROPOSAL.md b/NATIVEPHP_EXTENSIBILITY_PROPOSAL.md
new file mode 100644
index 0000000..9b0b4a1
--- /dev/null
+++ b/NATIVEPHP_EXTENSIBILITY_PROPOSAL.md
@@ -0,0 +1,281 @@
+# NativePHP Extensibility System Proposal
+
+## Executive Summary
+
+This proposal introduces a plugin/extension system for NativePHP that allows developers to extend Electron functionality without modifying vendor files. This solves a critical pain point where developers currently must fork NativePHP or lose customizations on updates.
+
+## Problem Statement
+
+Currently, developers who need to extend NativePHP's Electron functionality must:
+- ❌ Modify vendor files (lost on composer update)
+- ❌ Fork the entire package (maintenance burden)
+- ❌ Use hacky workarounds
+- ❌ Give up on advanced Electron features
+
+**Real examples from the community:**
+- "How do I add custom IPC handlers?"
+- "I need to initialize electron-audio-loopback before app ready"
+- "How can I add a system tray without forking?"
+- "I want to register a custom protocol handler"
+
+## Proposed Solution
+
+### Extension File Structure
+
+Developers create extension files in their project (not vendor):
+
+```javascript
+// resources/js/nativephp-extension.js
+export default {
+    // Hook into Electron lifecycle
+    beforeReady: (app) => {
+        // Initialize things before app is ready
+        // e.g., protocol registration, early IPC handlers
+    },
+    
+    afterReady: (app, mainWindow) => {
+        // Setup after app is ready
+        // e.g., tray icons, global shortcuts, window customization
+    },
+    
+    beforeQuit: () => {
+        // Cleanup before app quits
+    },
+    
+    // Custom IPC handlers
+    ipcHandlers: {
+        'my-app:custom-action': async (event, ...args) => {
+            // Handle custom IPC calls from renderer
+            return { success: true, data: 'result' };
+        }
+    },
+    
+    // Custom API endpoints
+    apiRoutes: (router) => {
+        router.post('/api/my-app/custom-endpoint', (req, res) => {
+            // Handle HTTP requests from Laravel
+            res.json({ status: 'ok' });
+        });
+    },
+    
+    // Extend preload script
+    preload: {
+        exposeAPIs: {
+            myApp: {
+                doSomething: () => ipcRenderer.invoke('my-app:custom-action'),
+                getSomething: () => ipcRenderer.invoke('my-app:get-data')
+            }
+        }
+    }
+};
+```
+
+### Implementation in NativePHP Core
+
+Only ~100 lines of changes needed across 4 files:
+
+#### 1. New Extension Loader (50 lines)
+```typescript
+// electron-plugin/src/extensions/loader.ts
+export async function loadUserExtensions() {
+    const extensions = [];
+    
+    // Load single extension file
+    const singleExtPath = path.join(process.cwd(), 'resources/js/nativephp-extension.js');
+    if (fs.existsSync(singleExtPath)) {
+        extensions.push(require(singleExtPath).default);
+    }
+    
+    // Load from extensions directory
+    const extensionsDir = path.join(process.cwd(), 'resources/js/nativephp-extensions');
+    if (fs.existsSync(extensionsDir)) {
+        // Load all .js files as extensions
+    }
+    
+    return extensions;
+}
+```
+
+#### 2. Hook into Main Process (15 lines added)
+```typescript
+// electron-plugin/src/index.ts
+const extensions = await loadUserExtensions();
+
+// Before app ready
+for (const ext of extensions) {
+    if (ext.beforeReady) await ext.beforeReady(app);
+}
+
+// After app ready
+app.whenReady().then(() => {
+    for (const ext of extensions) {
+        if (ext.afterReady) await ext.afterReady(app, mainWindow);
+        
+        // Register IPC handlers
+        if (ext.ipcHandlers) {
+            Object.entries(ext.ipcHandlers).forEach(([channel, handler]) => {
+                ipcMain.handle(channel, handler);
+            });
+        }
+    }
+});
+```
+
+#### 3. API Routes (10 lines added)
+```typescript
+// electron-plugin/src/server/index.ts
+const extensions = await loadUserExtensions();
+for (const ext of extensions) {
+    if (ext.apiRoutes) {
+        const router = Router();
+        ext.apiRoutes(router);
+        app.use(router);
+    }
+}
+```
+
+#### 4. Preload Extensions (20 lines added)
+```typescript
+// electron-plugin/src/preload/index.mts
+const preloadPath = path.join(__dirname, '../../../resources/js/nativephp-preload.js');
+if (fs.existsSync(preloadPath)) {
+    const userPreload = require(preloadPath);
+    if (userPreload.exposeAPIs) {
+        Object.entries(userPreload.exposeAPIs).forEach(([name, api]) => {
+            contextBridge.exposeInMainWorld(name, api);
+        });
+    }
+}
+```
+
+## Real-World Examples
+
+### Example 1: Audio Capture Extension
+```javascript
+import { initMain as initAudioLoopback } from "electron-audio-loopback";
+
+export default {
+    beforeReady: (app) => {
+        initAudioLoopback(); // Initialize before app ready
+    },
+    
+    ipcHandlers: {
+        'audio:enable-loopback': async () => {
+            // Implementation
+            return { enabled: true };
+        }
+    },
+    
+    apiRoutes: (router) => {
+        router.post('/api/audio/enable', (req, res) => {
+            // Enable system audio capture
+            res.json({ status: 'enabled' });
+        });
+    }
+};
+```
+
+### Example 2: System Tray Extension
+```javascript
+import { Tray, Menu } from 'electron';
+
+let tray = null;
+
+export default {
+    afterReady: (app, mainWindow) => {
+        tray = new Tray('/path/to/icon.png');
+        tray.setToolTip('My App');
+        
+        const menu = Menu.buildFromTemplate([
+            { label: 'Show', click: () => mainWindow.show() },
+            { label: 'Quit', click: () => app.quit() }
+        ]);
+        
+        tray.setContextMenu(menu);
+    }
+};
+```
+
+### Example 3: Global Shortcuts
+```javascript
+import { globalShortcut } from 'electron';
+
+export default {
+    afterReady: (app, mainWindow) => {
+        globalShortcut.register('CommandOrControl+Shift+Y', () => {
+            mainWindow.webContents.send('shortcut:triggered');
+        });
+    },
+    
+    beforeQuit: () => {
+        globalShortcut.unregisterAll();
+    }
+};
+```
+
+## Benefits
+
+### For Developers
+- ✅ **No vendor modifications** - Extensions live in your codebase
+- ✅ **Survives updates** - Composer update won't break customizations
+- ✅ **Full Electron access** - Use any Electron API
+- ✅ **Shareable** - Package and share extensions
+
+### For NativePHP
+- ✅ **Reduces fork pressure** - Fewer reasons to fork
+- ✅ **Enables ecosystem** - Community can build extensions
+- ✅ **Keeps core lean** - Features as extensions, not core
+- ✅ **Innovation platform** - Developers can experiment
+
+## Security Considerations
+
+- Extensions run in main process (full access like app code)
+- No additional security risks (developers already have full access)
+- Optional: Add permission system in future versions
+
+## Backwards Compatibility
+
+- ✅ Fully backwards compatible
+- ✅ No breaking changes
+- ✅ Extensions are opt-in
+- ✅ Existing apps work unchanged
+
+## Implementation Plan
+
+1. **Week 1**: Core implementation
+   - Extension loader
+   - Lifecycle hooks
+   - IPC handler registration
+
+2. **Week 2**: API integration
+   - API route registration
+   - Preload extensions
+   - Error handling
+
+3. **Week 3**: Documentation
+   - Extension guide
+   - API reference
+   - Example extensions
+
+4. **Week 4**: Community
+   - Example repository
+   - Video tutorials
+   - Community feedback
+
+## Future Enhancements
+
+- Extension dependencies management
+- Extension marketplace/registry
+- GUI for managing extensions
+- Hot-reload during development
+- TypeScript definitions
+
+## Summary
+
+This minimal change (~100 lines) would:
+- Solve a major developer pain point
+- Enable unlimited extensibility
+- Build a thriving ecosystem
+- Position NativePHP as the most flexible Electron framework
+
+The implementation is simple, backwards compatible, and opens up endless possibilities for the community.
\ No newline at end of file
diff --git a/NATIVEPHP_EXTENSION_IMPLEMENTATION.md b/NATIVEPHP_EXTENSION_IMPLEMENTATION.md
new file mode 100644
index 0000000..7f58801
--- /dev/null
+++ b/NATIVEPHP_EXTENSION_IMPLEMENTATION.md
@@ -0,0 +1,392 @@
+# NativePHP Extension System Implementation
+
+## Overview
+
+This document comprehensively covers the implementation of the NativePHP extensibility system for the Clueless project. We've created a system that allows extending NativePHP Electron functionality without modifying vendor files, ensuring customizations survive composer updates.
+
+## Problem Statement
+
+### Initial Issues
+1. **Vendor File Modifications**: Audio loopback and media permissions required modifying NativePHP vendor files
+2. **Lost on Updates**: All customizations were lost when running `composer update`
+
+### Solution Approach
+1. Downgrade Laravel to 12.20.0 to fix mb_split error
+2. Implement extension system to avoid vendor modifications
+3. Create local development setup for NativePHP-Electron package
+
+## Implementation Details
+
+### 1. Laravel Version Lock
+
+**File**: `composer.json`
+```json
+"laravel/framework": "12.20.0",  // Changed from "^12.0"
+```
+
+### 2. NativePHP-Electron Local Development Setup
+
+**Location**: `/Users/vijaytupakula/Development/Bootstrapguru/clueless/nativephp-electron/`
+
+**Symlink Setup**:
+```bash
+vendor/nativephp/electron -> nativephp-electron/
+```
+
+**composer.json Configuration**:
+```json
+"repositories": [
+    {
+        "type": "path",
+        "url": "nativephp-electron",
+        "options": {
+            "symlink": true
+        }
+    }
+],
+"require": {
+    "nativephp/electron": "dev-main"  // Changed from "^1.1"
+}
+```
+
+### 3. Extension System Architecture
+
+#### Extension Interface Definition
+
+**File**: `nativephp-electron/resources/js/electron-plugin/src/extensions/loader.ts`
+
+```typescript
+export interface Extension {
+    beforeReady?: (app: Electron.App) => void | Promise<void>;
+    afterReady?: (app: Electron.App, mainWindow?: Electron.BrowserWindow) => void | Promise<void>;
+    beforeQuit?: () => void | Promise<void>;
+    ipcHandlers?: Record<string, (event: Electron.IpcMainInvokeEvent, ...args: any[]) => any>;
+    apiRoutes?: (router: any) => void;
+    preload?: {
+        exposeAPIs?: Record<string, any>;
+    };
+}
+```
+
+**Key Change**: Added `preload` property to support window API definitions in the same extension file.
+
+#### Extension Loader Modifications
+
+**File**: `nativephp-electron/resources/js/electron-plugin/src/extensions/loader.ts`
+
+**Critical Fix**: Changed from `process.cwd()` to `getAppPath()`:
+```typescript
+import { getAppPath } from "../server/php.js";
+
+export async function loadUserExtensions(): Promise<Extension[]> {
+    const extensions: Extension[] = [];
+    
+    try {
+        // Get the Laravel app path
+        const appPath = getAppPath();
+        console.log('[NativePHP] Loading extensions from app path:', appPath);
+        
+        // Check for single extension file
+        const singleExtPath = path.join(appPath, 'resources/js/nativephp-extension.js');
+        // ... rest of implementation
+    }
+}
+```
+
+This fix ensures extensions load from the Laravel project directory, not the package working directory.
+
+#### Main Process Integration
+
+**File**: `nativephp-electron/resources/js/electron-plugin/src/index.ts`
+
+Added extension loading and hook calls:
+```typescript
+// Load user extensions
+this.extensions = await loadUserExtensions();
+
+// Call beforeReady hooks
+for (const ext of this.extensions) {
+  if (ext.beforeReady) {
+    try {
+      await ext.beforeReady(app);
+      console.log('extension beforeready - vijay');
+    } catch (error) {
+      console.error('[NativePHP] Extension beforeReady error:', error);
+    }
+  }
+}
+```
+
+IPC handler registration:
+```typescript
+// Register IPC handlers from extensions
+for (const ext of this.extensions) {
+  if (ext.ipcHandlers) {
+    Object.entries(ext.ipcHandlers).forEach(([channel, handler]) => {
+      ipcMain.handle(channel, handler);
+      console.log(`[NativePHP] Registered IPC handler: ${channel}`);
+    });
+  }
+}
+```
+
+#### Preload Script Modifications
+
+**File**: `nativephp-electron/resources/js/electron-plugin/src/preload/index.mts`
+
+Simplified to only load from single extension file:
+```typescript
+async function loadUserPreloadExtensions() {
+    try {
+        const appPath = getAppPath();
+        console.log('[NativePHP Preload] Loading extension from app path:', appPath);
+        
+        // Load single extension file
+        const extensionPath = path.join(appPath, 'resources/js/nativephp-extension.js');
+        if (fs.existsSync(extensionPath)) {
+            const ext = require(extensionPath);
+            if (ext.default && ext.default.preload && ext.default.preload.exposeAPIs) {
+                Object.entries(ext.default.preload.exposeAPIs).forEach(([name, api]) => {
+                    window[name] = api;
+                    console.log(`[NativePHP] Exposed preload API: ${name}`);
+                });
+            }
+        }
+    } catch (error) {
+        console.error('[NativePHP] Error loading preload extension:', error);
+    }
+}
+```
+
+### 4. Unified Extension File
+
+**File**: `/Users/vijaytupakula/Development/Bootstrapguru/clueless/resources/js/nativephp-extension.js`
+
+Complete extension structure with all components in one file:
+
+```javascript
+import { systemPreferences } from 'electron';
+
+// Dynamic import for electron-audio-loopback (may not be installed)
+let initAudioLoopback = null;
+
+export default {
+  // Hook into Electron lifecycle - called before app is ready
+  beforeReady: async (app) => {
+    console.log('[Extension Test] beforeReady hook called');
+    
+    // Try to load and initialize electron-audio-loopback
+    try {
+      const audioLoopbackModule = await import('electron-audio-loopback');
+      initAudioLoopback = audioLoopbackModule.initMain;
+      
+      if (initAudioLoopback) {
+        initAudioLoopback();
+        console.log('[Extension Test] electron-audio-loopback initialized successfully');
+      }
+    } catch (error) {
+      console.log('[Extension Test] electron-audio-loopback not available:', error.message);
+    }
+  },
+  
+  // IPC handlers for main process
+  ipcHandlers: {
+    'test:ping': async (event, ...args) => { /* ... */ },
+    'test:echo': async (event, message) => { /* ... */ },
+    'test:get-info': async (event) => { /* ... */ },
+    // Audio loopback handlers commented out - handled by electron-audio-loopback package
+  },
+  
+  // API routes accessible from Laravel
+  apiRoutes: (router) => {
+    // Media access endpoints
+    router.get('/api/system/media-access-status/:mediaType', (req, res) => {
+      const { mediaType } = req.params;
+      if (process.platform === 'darwin') {
+        const status = systemPreferences.getMediaAccessStatus(mediaType);
+        res.json({ status });
+      } else {
+        res.json({ status: 'granted' });
+      }
+    });
+    
+    router.post('/api/system/ask-for-media-access', async (req, res) => {
+      const { mediaType } = req.body;
+      if (process.platform === 'darwin') {
+        try {
+          const granted = await systemPreferences.askForMediaAccess(mediaType);
+          res.json({ granted });
+        } catch (e) {
+          res.status(400).json({ error: e.message });
+        }
+      } else {
+        res.json({ granted: true });
+      }
+    });
+  },
+  
+  // Preload script extensions - APIs to expose to the renderer
+  preload: {
+    exposeAPIs: {
+      audioLoopback: {
+        enableLoopback: function(deviceId) {
+          const { ipcRenderer } = require('electron');
+          return ipcRenderer.invoke('enable-loopback-audio', deviceId);
+        },
+        disableLoopback: function() {
+          const { ipcRenderer } = require('electron');
+          return ipcRenderer.invoke('disable-loopback-audio');
+        }
+      },
+      extensionTest: {
+        ping: function() {
+          const { ipcRenderer } = require('electron');
+          return ipcRenderer.invoke('test:ping', 'from-extension-preload');
+        }
+      }
+    }
+  }
+};
+```
+
+### 5. Original Vendor Modifications Backup
+
+**Location**: `/Users/vijaytupakula/Development/Bootstrapguru/clueless/clueless-vendor-backup-20250722-145731/`
+
+Contains original vendor file modifications:
+- `entitlements.mac.plist` - macOS microphone permission
+- `system.ts` - Media access API endpoints (now in extension)
+- `index.ts` - Audio loopback initialization (now in extension)
+- `index.mts` - Window API exposure (now in extension preload)
+- `electron-builder.js` - macOS permission descriptions
+
+### 6. Build Process
+
+After any TypeScript changes in nativephp-electron:
+```bash
+cd /Users/vijaytupakula/Development/Bootstrapguru/clueless/nativephp-electron/resources/js
+npm run plugin:build
+```
+
+This compiles TypeScript to JavaScript that Electron actually runs.
+
+### 7. Testing the Extension System
+
+Run the application:
+```bash
+composer native:dev
+```
+
+Expected console output:
+```
+[NativePHP] Loading extensions from app path: /Users/vijaytupakula/Development/Bootstrapguru/clueless
+[NativePHP] Loaded extension from: /Users/vijaytupakula/Development/Bootstrapguru/clueless/resources/js/nativephp-extension.js
+[Extension Test] beforeReady hook called
+[Extension Test] electron-audio-loopback initialized successfully
+[NativePHP] Registered extension API routes
+[NativePHP] Registered IPC handler: test:ping
+[NativePHP] Registered IPC handler: test:echo
+[NativePHP] Registered IPC handler: test:get-info
+[Extension Test] afterReady hook called
+[NativePHP] Exposed preload API: audioLoopback
+[NativePHP] Exposed preload API: extensionTest
+```
+
+Test from browser console:
+```javascript
+// Test extension system
+await window.extensionTest.ping();
+
+// Test audio loopback
+await window.audioLoopback.enableLoopback('default');
+await window.audioLoopback.disableLoopback();
+```
+
+## Key Technical Details
+
+### Path Resolution
+- Main extension loader uses `getAppPath()` from php.ts
+- Preload loader uses custom path resolution (can't import php.ts in preload context)
+- Both resolve to Laravel project root correctly
+
+### Process Separation
+- Main process: Handles IPC, API routes, system operations
+- Preload script: Bridges main and renderer processes
+- Renderer process: Vue app accesses window APIs
+
+### Security Considerations
+- Extensions run with full Electron privileges
+- Preload APIs are exposed to renderer via `window` object
+- No additional security risks vs inline code
+
+### Extension Loading Order
+1. Extensions loaded before app ready
+2. `beforeReady` hooks called
+3. App initialized
+4. IPC handlers registered
+5. `afterReady` hooks called
+6. Preload script loads extension preload APIs
+
+## Benefits Achieved
+
+1. **No Vendor Modifications**: All customizations in project files
+2. **Survives Updates**: `composer update` won't lose changes
+3. **Single File Architecture**: Everything in one `nativephp-extension.js`
+4. **Full Electron Access**: Can use any Electron API
+5. **Clean Separation**: Main process, preload, and API routes clearly organized
+6. **Development Flexibility**: Local package development with symlink
+
+## Future Considerations
+
+1. Consider contributing extension system back to NativePHP core
+2. Add TypeScript support for extension files
+3. Create extension examples for common use cases
+4. Document extension API reference
+
+## Final Implementation Notes
+
+### WebFrameMain Error Investigation
+During implementation, we encountered a "Render frame was disposed before WebFrameMain could be accessed" error. Investigation revealed:
+- The error was NOT caused by our extension system
+- It's a pre-existing race condition in NativePHP's broadcastToWindows function
+- The error appeared more frequently when using complex preload extension loading
+
+### Solution: Simplified Approach
+We reverted to a simpler implementation:
+1. **Main Process Extensions**: Continue using the extension system for lifecycle hooks, IPC handlers, and API routes
+2. **Preload APIs**: Use direct window object assignment in the preload script instead of dynamic loading
+   ```javascript
+   // In preload/index.mts
+   window.audioLoopback = {
+     enableLoopback: () => ipcRenderer.invoke('enable-loopback-audio'),
+     disableLoopback: () => ipcRenderer.invoke('disable-loopback-audio')
+   };
+   ```
+
+### Final Architecture
+1. **Extension File** (`resources/js/nativephp-extension.js`):
+   - beforeReady, afterReady, beforeQuit hooks
+   - IPC handlers for test functionality
+   - API routes for media permissions
+   - No preload section (removed due to complexity)
+
+2. **Preload Script** (modified in NativePHP):
+   - Direct window API assignment for audio loopback
+   - Simpler and more reliable than dynamic loading
+
+3. **Benefits**:
+   - All main process extensions work perfectly
+   - Preload APIs are exposed reliably without complex loading
+   - No WebFrameMain errors from our code
+   - Clean separation of concerns
+
+## Summary
+
+We've successfully implemented a hybrid approach that:
+- Uses the extension system for main process functionality
+- Uses direct preload modifications for window APIs
+- Solves the vendor modification problem for most use cases
+- Provides a stable, error-free implementation
+- Maintains all customizations in trackable locations
+
+The system is now production-ready with audio loopback and media permissions working reliably.
\ No newline at end of file
diff --git a/app/Http/Controllers/AudioTestController.php b/app/Http/Controllers/AudioTestController.php
new file mode 100644
index 0000000..3a7b636
--- /dev/null
+++ b/app/Http/Controllers/AudioTestController.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Inertia\Inertia;
+
+class AudioTestController extends Controller
+{
+    public function index()
+    {
+        return Inertia::render('AudioTest/Index');
+    }
+}
\ No newline at end of file
diff --git a/app/Providers/NativeAppServiceProvider.php b/app/Providers/NativeAppServiceProvider.php
index b2657db..16dfaf2 100644
--- a/app/Providers/NativeAppServiceProvider.php
+++ b/app/Providers/NativeAppServiceProvider.php
@@ -19,7 +19,7 @@ public function boot(): void
     {
         // Create an overlay window for sales assistant
         Window::open()
-            ->route('realtime-agent')
+            ->route('realtime-agent-v2')
             ->width(1200)
             ->height(700)
             ->minWidth(400)
diff --git a/clueless-vendor-backup-20250722-145731/README.md b/clueless-vendor-backup-20250722-145731/README.md
new file mode 100644
index 0000000..3d1443d
--- /dev/null
+++ b/clueless-vendor-backup-20250722-145731/README.md
@@ -0,0 +1,52 @@
+# Clueless Vendor Files Backup
+
+This backup was created on 2025-07-22 at 14:57:31
+
+## Modified Files
+
+### 1. entitlements.mac.plist
+- **Location**: `vendor/nativephp/electron/resources/js/build/entitlements.mac.plist`
+- **Changes**: Added `com.apple.security.device.audio-input` entitlement for microphone access
+
+### 2. system.ts
+- **Location**: `vendor/nativephp/electron/resources/js/electron-plugin/src/server/api/system.ts`
+- **Changes**: Added two new endpoints:
+  - `GET /api/system/media-access-status/:mediaType` - Check permission status
+  - `POST /api/system/ask-for-media-access` - Request permission programmatically
+
+### 3. index.ts
+- **Location**: `vendor/nativephp/electron/resources/js/electron-plugin/src/index.ts` 
+- **Changes**: Added electron-audio-loopback initialization
+
+### 4. index.mts
+- **Location**: `vendor/nativephp/electron/resources/js/electron-plugin/src/preload/index.mts`
+- **Changes**: Exposed audio loopback functions to renderer process
+
+## Purpose
+These changes were made to:
+1. Fix microphone permission issues in the macOS build
+2. Integrate electron-audio-loopback for system audio capture
+3. Replace Swift-based audio capture with electron-audio-loopback
+
+## Restoration
+To restore these files after a composer update:
+```bash
+# 1. Copy all the backup files to their respective locations
+cp entitlements.mac.plist /path/to/project/vendor/nativephp/electron/resources/js/build/
+cp system.ts /path/to/project/vendor/nativephp/electron/resources/js/electron-plugin/src/server/api/
+cp index.ts /path/to/project/vendor/nativephp/electron/resources/js/electron-plugin/src/
+cp index.mts /path/to/project/vendor/nativephp/electron/resources/js/electron-plugin/src/preload/
+cp electron-builder.js /path/to/project/vendor/nativephp/electron/resources/js/
+
+# 2. IMPORTANT: Build the TypeScript files to JavaScript
+cd /path/to/project/vendor/nativephp/electron/resources/js
+npm run plugin:build
+
+# The build command compiles the TypeScript source files (.ts) to JavaScript (.js) files
+# that the Electron app actually uses. Without this step, your changes won't take effect!
+```
+
+## Notes
+- The `electron-builder.js` file contains macOS permission descriptions for microphone, camera, and screen recording
+- After copying the files, you MUST run `npm run plugin:build` to compile the TypeScript changes
+- The build may show TypeScript warnings about electron-audio-loopback - these can be safely ignored
\ No newline at end of file
diff --git a/clueless-vendor-backup-20250722-145731/electron-builder.js b/clueless-vendor-backup-20250722-145731/electron-builder.js
new file mode 100644
index 0000000..e4e5b0d
--- /dev/null
+++ b/clueless-vendor-backup-20250722-145731/electron-builder.js
@@ -0,0 +1,127 @@
+import { join } from 'path';
+import { exec } from 'child_process';
+
+const appUrl = process.env.APP_URL;
+const appId = process.env.NATIVEPHP_APP_ID;
+const appName = process.env.NATIVEPHP_APP_NAME;
+const isBuilding = process.env.NATIVEPHP_BUILDING;
+const appAuthor = process.env.NATIVEPHP_APP_AUTHOR;
+const fileName = process.env.NATIVEPHP_APP_FILENAME;
+const appVersion = process.env.NATIVEPHP_APP_VERSION;
+const appCopyright = process.env.NATIVEPHP_APP_COPYRIGHT;
+const deepLinkProtocol = process.env.NATIVEPHP_DEEPLINK_SCHEME;
+
+// Since we do not copy the php executable here, we only need these for building
+const isWindows = process.argv.includes('--win');
+const isLinux = process.argv.includes('--linux');
+const isDarwin = process.argv.includes('--mac');
+
+let targetOs;
+
+if (isWindows) {
+    targetOs = 'win';
+}
+
+if (isLinux) {
+    targetOs = 'linux';
+}
+
+if (isDarwin) {
+    targetOs = 'mac';
+}
+
+let updaterConfig = {};
+
+try {
+    updaterConfig = process.env.NATIVEPHP_UPDATER_CONFIG;
+    updaterConfig = JSON.parse(updaterConfig);
+} catch (e) {
+    updaterConfig = {};
+}
+
+if (isBuilding) {
+    console.log('  • updater config', updaterConfig);
+}
+
+export default {
+    appId: appId,
+    productName: appName,
+    copyright: appCopyright,
+    directories: {
+        buildResources: 'build',
+        output: isBuilding ? join(process.env.APP_PATH, 'dist') : undefined,
+    },
+    files: [
+        '!**/.vscode/*',
+        '!src/*',
+        '!electron.vite.config.{js,ts,mjs,cjs}',
+        '!{.eslintignore,.eslintrc.cjs,.prettierignore,.prettierrc.yaml,dev-app-update.yml,CHANGELOG.md,README.md}',
+        '!{.env,.env.*,.npmrc,pnpm-lock.yaml}',
+    ],
+    asarUnpack: [
+        'resources/**',
+    ],
+    beforePack: async (context) => {
+        let arch = {
+            1: 'x64',
+            3: 'arm64'
+        }[context.arch];
+
+        if(arch === undefined) {
+            console.error('Cannot build PHP for unsupported architecture');
+            process.exit(1);
+        }
+
+        console.log(`  • building php binary - exec php.js --${targetOs} --${arch}`);
+        exec(`node php.js --${targetOs} --${arch}`);
+    },
+    afterSign: 'build/notarize.js',
+    win: {
+        executableName: fileName,
+    },
+    nsis: {
+        artifactName: appName + '-${version}-setup.${ext}',
+        shortcutName: '${productName}',
+        uninstallDisplayName: '${productName}',
+        createDesktopShortcut: 'always',
+    },
+    protocols: {
+        name: deepLinkProtocol,
+        schemes: [deepLinkProtocol],
+    },
+    mac: {
+        entitlementsInherit: 'build/entitlements.mac.plist',
+        artifactName: appName + '-${version}-${arch}.${ext}',
+        extendInfo: {
+            NSCameraUsageDescription:
+                "Application requests access to the device's camera.",
+            NSMicrophoneUsageDescription:
+                "Application requests access to the device's microphone.",
+            NSScreenCaptureUsageDescription:
+                "Application requests access to screen recording to capture system audio.",
+            NSDocumentsFolderUsageDescription:
+                "Application requests access to the user's Documents folder.",
+            NSDownloadsFolderUsageDescription:
+                "Application requests access to the user's Downloads folder.",
+        },
+    },
+    dmg: {
+        artifactName: appName + '-${version}-${arch}.${ext}',
+    },
+    linux: {
+        target: ['AppImage', 'deb'],
+        maintainer: appUrl,
+        category: 'Utility',
+    },
+    appImage: {
+        artifactName: appName + '-${version}.${ext}',
+    },
+    npmRebuild: false,
+    publish: updaterConfig,
+    extraMetadata: {
+        name: fileName,
+        homepage: appUrl,
+        version: appVersion,
+        author: appAuthor,
+    }
+};
diff --git a/clueless-vendor-backup-20250722-145731/entitlements.mac.plist b/clueless-vendor-backup-20250722-145731/entitlements.mac.plist
new file mode 100644
index 0000000..05904b0
--- /dev/null
+++ b/clueless-vendor-backup-20250722-145731/entitlements.mac.plist
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+  <dict>
+    <key>com.apple.security.cs.allow-jit</key>
+    <true/>
+    <key>com.apple.security.cs.allow-unsigned-executable-memory</key>
+    <true/>
+    <key>com.apple.security.cs.allow-dyld-environment-variables</key>
+    <true/>
+    <key>com.apple.security.device.audio-input</key>
+    <true/>
+  </dict>
+</plist>
diff --git a/clueless-vendor-backup-20250722-145731/index.mts b/clueless-vendor-backup-20250722-145731/index.mts
new file mode 100644
index 0000000..9d90f73
--- /dev/null
+++ b/clueless-vendor-backup-20250722-145731/index.mts
@@ -0,0 +1,92 @@
+import remote from "@electron/remote";
+import {ipcRenderer} from "electron";
+
+const Native = {
+    on: (event, callback) => {
+        ipcRenderer.on('native-event', (_, data) => {
+            // Strip leading slashes
+            event = event.replace(/^(\\)+/, '');
+            data.event = data.event.replace(/^(\\)+/, '');
+
+            if (event === data.event) {
+                return callback(data.payload, event);
+            }
+        })
+    },
+    contextMenu: (template) => {
+        let menu = remote.Menu.buildFromTemplate(template);
+        menu.popup({ window: remote.getCurrentWindow() });
+    }
+};
+
+// @ts-ignore
+window.Native = Native;
+
+// @ts-ignore
+window.remote = remote;
+
+// Expose audio loopback functions
+// Since contextIsolation is false, we attach directly to window
+// @ts-ignore
+window.audioLoopback = {
+  enableLoopback: () => ipcRenderer.invoke('enable-loopback-audio'),
+  disableLoopback: () => ipcRenderer.invoke('disable-loopback-audio')
+};
+
+ipcRenderer.on('log', (event, {level, message, context}) => {
+    if (level === 'error') {
+      console.error(`[${level}] ${message}`, context)
+    } else if (level === 'warn') {
+      console.warn(`[${level}] ${message}`, context)
+    } else {
+      console.log(`[${level}] ${message}`, context)
+    }
+});
+
+// Add Livewire event listeners
+ipcRenderer.on('native-event', (event, data) => {
+
+  // Strip leading slashes
+  data.event = data.event.replace(/^(\\)+/, '');
+
+  // add support for livewire 3
+  // @ts-ignore
+  if (window.Livewire) {
+    // @ts-ignore
+    window.Livewire.dispatch('native:' + data.event, data.payload);
+  }
+
+  // add support for livewire 2
+  // @ts-ignore
+  if (window.livewire) {
+    // @ts-ignore
+    window.livewire.components.components().forEach(component => {
+      if (Array.isArray(component.listeners)) {
+        component.listeners.forEach(event => {
+          if (event.startsWith('native')) {
+            let event_parts = event.split(/(native:|native-)|:|,/)
+
+            if (event_parts[1] == 'native:') {
+              event_parts.splice(2, 0, 'private', undefined, 'nativephp', undefined)
+            }
+
+            let [
+              s1,
+              signature,
+              channel_type,
+              s2,
+              channel,
+              s3,
+              event_name,
+            ] = event_parts
+
+            if (data.event === event_name) {
+              // @ts-ignore
+              window.livewire.emit(event, data.payload)
+            }
+          }
+        })
+      }
+    })
+  }
+})
diff --git a/clueless-vendor-backup-20250722-145731/index.ts b/clueless-vendor-backup-20250722-145731/index.ts
new file mode 100644
index 0000000..59dc09e
--- /dev/null
+++ b/clueless-vendor-backup-20250722-145731/index.ts
@@ -0,0 +1,290 @@
+import CrossProcessExports from "electron";
+import { app, session, powerMonitor } from "electron";
+import { initialize } from "@electron/remote/main/index.js";
+import { initMain as initAudioLoopback } from "electron-audio-loopback";
+import state from "./server/state.js";
+import { electronApp, optimizer } from "@electron-toolkit/utils";
+import {
+  retrieveNativePHPConfig,
+  retrievePhpIniSettings,
+  runScheduler,
+  startAPI,
+  startPhpApp,
+} from "./server/index.js";
+import { notifyLaravel } from "./server/utils.js";
+import { resolve } from "path";
+import { stopAllProcesses } from "./server/api/childProcess.js";
+import ps from "ps-node";
+import killSync from "kill-sync";
+
+// Workaround for CommonJS module
+import electronUpdater from 'electron-updater';
+const { autoUpdater } = electronUpdater;
+
+class NativePHP {
+  processes = [];
+  schedulerInterval = undefined;
+  mainWindow = null;
+
+  public bootstrap(
+    app: CrossProcessExports.App,
+    icon: string,
+    phpBinary: string,
+    cert: string
+  ) {
+
+    initialize();
+    initAudioLoopback();
+
+    state.icon = icon;
+    state.php = phpBinary;
+    state.caCert = cert;
+
+    this.bootstrapApp(app);
+    this.addEventListeners(app);
+  }
+
+  private addEventListeners(app: Electron.CrossProcessExports.App) {
+    app.on("open-url", (event, url) => {
+      notifyLaravel("events", {
+        event: "\\Native\\Laravel\\Events\\App\\OpenedFromURL",
+        payload: [url],
+      });
+    });
+
+    app.on("open-file", (event, path) => {
+      notifyLaravel("events", {
+        event: "\\Native\\Laravel\\Events\\App\\OpenFile",
+        payload: [path],
+      });
+    });
+
+    app.on("window-all-closed", () => {
+      if (process.platform !== "darwin") {
+        app.quit();
+      }
+    });
+
+    app.on("before-quit", () => {
+      if (this.schedulerInterval) {
+          clearInterval(this.schedulerInterval);
+      }
+
+      // close all child processes from the app
+      stopAllProcesses();
+
+      this.killChildProcesses();
+    });
+
+    // Default open or close DevTools by F12 in development
+    // and ignore CommandOrControl + R in production.
+    // see https://github.com/alex8088/electron-toolkit/tree/master/packages/utils
+    app.on("browser-window-created", (_, window) => {
+      optimizer.watchWindowShortcuts(window);
+    });
+
+    app.on("activate", function (event, hasVisibleWindows) {
+      // On macOS it's common to re-create a window in the app when the
+      // dock icon is clicked and there are no other windows open.
+      if (!hasVisibleWindows) {
+        notifyLaravel("booted");
+      }
+
+      event.preventDefault();
+    });
+  }
+
+  private async bootstrapApp(app: Electron.CrossProcessExports.App) {
+    await app.whenReady();
+
+    const config = await this.loadConfig();
+
+    this.setDockIcon();
+    this.setAppUserModelId(config);
+    this.setDeepLinkHandler(config);
+    this.startAutoUpdater(config);
+
+    await this.startElectronApi();
+
+    state.phpIni = await this.loadPhpIni();
+
+    await this.startPhpApp();
+    this.startScheduler();
+
+    powerMonitor.on("suspend", () => {
+      this.stopScheduler();
+    });
+
+    powerMonitor.on("resume", () => {
+      this.stopScheduler();
+      this.startScheduler();
+    });
+
+    const filter = {
+        urls: [`http://127.0.0.1:${state.phpPort}/*`]
+    };
+
+    session.defaultSession.webRequest.onBeforeSendHeaders(filter, (details, callback) => {
+        details.requestHeaders['X-NativePHP-Secret'] = state.randomSecret;
+
+        callback({ requestHeaders: details.requestHeaders });
+    });
+
+    await notifyLaravel("booted");
+  }
+
+  private async loadConfig() {
+    let config = {};
+
+    try {
+      const result = await retrieveNativePHPConfig();
+
+      config = JSON.parse(result.stdout);
+    } catch (error) {
+      console.error(error);
+    }
+
+    return config;
+  }
+
+  private setDockIcon() {
+    // Only run this on macOS
+    if (
+      process.platform === "darwin" &&
+      process.env.NODE_ENV === "development"
+    ) {
+      app.dock.setIcon(state.icon);
+    }
+  }
+
+  private setAppUserModelId(config) {
+    electronApp.setAppUserModelId(config?.app_id);
+  }
+
+  private setDeepLinkHandler(config) {
+    const deepLinkProtocol = config?.deeplink_scheme;
+
+    if (deepLinkProtocol) {
+      if (process.defaultApp) {
+        if (process.argv.length >= 2) {
+          app.setAsDefaultProtocolClient(deepLinkProtocol, process.execPath, [
+            resolve(process.argv[1]),
+          ]);
+        }
+      } else {
+        app.setAsDefaultProtocolClient(deepLinkProtocol);
+      }
+
+            /**
+             * Handle protocol url for windows and linux
+             * This code will be different in Windows and Linux compared to MacOS.
+             * This is due to both platforms emitting the second-instance event rather
+             * than the open-url event and Windows requiring additional code in order to
+             * open the contents of the protocol link within the same Electron instance.
+             */
+            if (process.platform !== "darwin") {
+                const gotTheLock = app.requestSingleInstanceLock();
+                if (!gotTheLock) {
+                    app.quit();
+                    return;
+                } else {
+                    app.on(
+                        "second-instance",
+                        (event, commandLine, workingDirectory) => {
+                            // Someone tried to run a second instance, we should focus our window.
+                            if (this.mainWindow) {
+                                if (this.mainWindow.isMinimized())
+                                    this.mainWindow.restore();
+                                this.mainWindow.focus();
+                            }
+
+                            // the commandLine is array of strings in which last element is deep link url
+                            notifyLaravel("events", {
+                                event: "\\Native\\Laravel\\Events\\App\\OpenedFromURL",
+                                payload: {
+                                    url: commandLine[commandLine.length - 1],
+                                    workingDirectory: workingDirectory,
+                                },
+                            });
+                        },
+                    );
+                }
+            }
+        }
+    }
+
+  private startAutoUpdater(config) {
+    if (config?.updater?.enabled === true) {
+      autoUpdater.checkForUpdatesAndNotify();
+    }
+  }
+
+  private async startElectronApi() {
+    // Start an Express server so that the Electron app can be controlled from PHP via API
+    const electronApi = await startAPI();
+
+    state.electronApiPort = electronApi.port;
+
+    console.log("Electron API server started on port", electronApi.port);
+  }
+
+  private async loadPhpIni() {
+    let config = {};
+
+    try {
+      const result = await retrievePhpIniSettings();
+
+      config = JSON.parse(result.stdout);
+    } catch (error) {
+      console.error(error);
+    }
+
+    return config;
+  }
+
+  private async startPhpApp() {
+    this.processes.push(await startPhpApp());
+  }
+
+
+    private stopScheduler() {
+        if (this.schedulerInterval) {
+            clearInterval(this.schedulerInterval);
+            this.schedulerInterval = null;
+        }
+    }
+
+  private startScheduler() {
+    const now = new Date();
+    const delay =
+      (60 - now.getSeconds()) * 1000 + (1000 - now.getMilliseconds());
+
+    setTimeout(() => {
+      console.log("Running scheduler...");
+
+      runScheduler();
+
+      this.schedulerInterval = setInterval(() => {
+        console.log("Running scheduler...");
+
+        runScheduler();
+      }, 60 * 1000);
+    }, delay);
+  }
+
+  private killChildProcesses() {
+    this.processes
+      .filter((p) => p !== undefined)
+      .forEach((process) => {
+        try {
+          // @ts-ignore
+          killSync(process.pid, 'SIGTERM', true); // Kill tree
+          ps.kill(process.pid); // Sometimes does not kill the subprocess of php server
+        } catch (err) {
+          console.error(err);
+        }
+      });
+  }
+}
+
+export default new NativePHP();
diff --git a/clueless-vendor-backup-20250722-145731/system.ts b/clueless-vendor-backup-20250722-145731/system.ts
new file mode 100644
index 0000000..36fe89a
--- /dev/null
+++ b/clueless-vendor-backup-20250722-145731/system.ts
@@ -0,0 +1,160 @@
+import express from 'express';
+import {BrowserWindow, systemPreferences, safeStorage, nativeTheme} from 'electron';
+
+const router = express.Router();
+
+router.get('/can-prompt-touch-id', (req, res) => {
+    res.json({
+        result: systemPreferences.canPromptTouchID(),
+    });
+});
+
+router.post('/prompt-touch-id', async (req, res) => {
+    try {
+        await systemPreferences.promptTouchID(req.body.reason)
+
+        res.sendStatus(200);
+    } catch (e) {
+        res.status(400).json({
+            error: e.message,
+        });
+    }
+});
+
+router.get('/can-encrypt', async (req, res) => {
+    res.json({
+        result: await safeStorage.isEncryptionAvailable(),
+    });
+});
+
+router.post('/encrypt', async (req, res) => {
+    try {
+        res.json({
+            result: await safeStorage.encryptString(req.body.string).toString('base64'),
+        });
+    } catch (e) {
+        res.status(400).json({
+            error: e.message,
+        });
+    }
+});
+
+router.post('/decrypt', async (req, res) => {
+    try {
+        res.json({
+            result: await safeStorage.decryptString(Buffer.from(req.body.string, 'base64')),
+        });
+    } catch (e) {
+        res.status(400).json({
+            error: e.message,
+        });
+    }
+});
+
+router.get('/printers', async (req, res) => {
+    const printers = await BrowserWindow.getAllWindows()[0].webContents.getPrintersAsync();
+
+    res.json({
+        printers,
+    });
+});
+
+router.post('/print', async (req, res) => {
+    const {printer, html} = req.body;
+
+    let printWindow = new BrowserWindow({
+        show: false,
+    });
+
+    printWindow.webContents.on('did-finish-load', () => {
+        printWindow.webContents.print({
+            silent: true,
+            deviceName: printer,
+        }, (success, errorType) => {
+            if (success) {
+                console.log('Print job completed successfully.');
+                res.sendStatus(200);
+            } else {
+                console.error('Print job failed:', errorType);
+                res.sendStatus(500);
+            }
+            if (printWindow) {
+                printWindow.close(); // Close the window and the process
+                printWindow = null;  // Free memory
+            }
+        });
+    });
+
+    await printWindow.loadURL(`data:text/html;charset=UTF-8,${html}`);
+});
+
+router.post('/print-to-pdf', async (req, res) => {
+    const {html} = req.body;
+
+    let printWindow = new BrowserWindow({
+        show: false,
+    });
+
+    printWindow.webContents.on('did-finish-load', () => {
+        printWindow.webContents.printToPDF({}).then(data => {
+            printWindow.close();
+                res.json({
+                    result: data.toString('base64'),
+                });
+        }).catch(e => {
+            printWindow.close();
+
+            res.status(400).json({
+                error: e.message,
+            });
+        });
+    });
+
+    await printWindow.loadURL(`data:text/html;charset=UTF-8,${html}`);
+});
+
+router.get('/theme', (req, res) => {
+    res.json({
+        result: nativeTheme.themeSource,
+    });
+});
+
+router.post('/theme', (req, res) => {
+    const { theme } = req.body;
+
+    nativeTheme.themeSource = theme;
+
+    res.json({
+        result: theme,
+    });
+});
+
+router.get('/media-access-status/:mediaType', (req, res) => {
+    const { mediaType } = req.params;
+    
+    if (process.platform === 'darwin') {
+        const status = systemPreferences.getMediaAccessStatus(mediaType as 'microphone' | 'camera' | 'screen');
+        res.json({ status });
+    } else {
+        res.json({ status: 'granted' }); // Non-macOS platforms don't have this API
+    }
+});
+
+router.post('/ask-for-media-access', async (req, res) => {
+    const { mediaType } = req.body;
+    
+    if (process.platform === 'darwin') {
+        try {
+            const granted = await systemPreferences.askForMediaAccess(mediaType as 'microphone' | 'camera');
+            res.json({ granted });
+        } catch (e) {
+            res.status(400).json({
+                error: e.message,
+            });
+        }
+    } else {
+        res.json({ granted: true }); // Non-macOS platforms don't need this
+    }
+});
+
+export default router;
diff --git a/composer.json b/composer.json
index b94235c..0b8cc00 100644
--- a/composer.json
+++ b/composer.json
@@ -16,12 +16,21 @@
         "realtime-transcription"
     ],
     "license": "MIT",
+    "repositories": [
+        {
+            "type": "path",
+            "url": "nativephp-electron",
+            "options": {
+                "symlink": true
+            }
+        }
+    ],
     "require": {
         "php": "^8.2",
         "inertiajs/inertia-laravel": "^2.0",
-        "laravel/framework": "^12.0",
+        "laravel/framework": "12.20.0",
         "laravel/tinker": "^2.10.1",
-        "nativephp/electron": "^1.1",
+        "nativephp/electron": "dev-main",
         "openai-php/laravel": "^0.14.0",
         "pusher/pusher-php-server": "^7.2",
         "tightenco/ziggy": "^2.4"
diff --git a/composer.lock b/composer.lock
index 152ac37..839cf41 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "12a8d20e2a229b4b8bcfb87df99d31c9",
+    "content-hash": "68c9b6aa6a385271e89f60cf24bc3057",
     "packages": [
         {
             "name": "brick/math",
@@ -1056,16 +1056,16 @@
         },
         {
             "name": "inertiajs/inertia-laravel",
-            "version": "v2.0.3",
+            "version": "v2.0.4",
             "source": {
                 "type": "git",
                 "url": "https://github.com/inertiajs/inertia-laravel.git",
-                "reference": "b732a5cc33423b2c2366fea38b17dc637d2a0b4f"
+                "reference": "bab0c0c992aa36e63d800903288d490d6b774d97"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/inertiajs/inertia-laravel/zipball/b732a5cc33423b2c2366fea38b17dc637d2a0b4f",
-                "reference": "b732a5cc33423b2c2366fea38b17dc637d2a0b4f",
+                "url": "https://api.github.com/repos/inertiajs/inertia-laravel/zipball/bab0c0c992aa36e63d800903288d490d6b774d97",
+                "reference": "bab0c0c992aa36e63d800903288d490d6b774d97",
                 "shasum": ""
             },
             "require": {
@@ -1075,6 +1075,7 @@
                 "symfony/console": "^6.2|^7.0"
             },
             "require-dev": {
+                "guzzlehttp/guzzle": "^7.2",
                 "laravel/pint": "^1.16",
                 "mockery/mockery": "^1.3.3",
                 "orchestra/testbench": "^8.0|^9.2|^10.0",
@@ -1118,9 +1119,9 @@
             ],
             "support": {
                 "issues": "https://github.com/inertiajs/inertia-laravel/issues",
-                "source": "https://github.com/inertiajs/inertia-laravel/tree/v2.0.3"
+                "source": "https://github.com/inertiajs/inertia-laravel/tree/v2.0.4"
             },
-            "time": "2025-06-20T07:38:21+00:00"
+            "time": "2025-07-15T08:08:04+00:00"
         },
         {
             "name": "laravel/framework",
@@ -1525,16 +1526,16 @@
         },
         {
             "name": "league/commonmark",
-            "version": "2.7.0",
+            "version": "2.7.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/thephpleague/commonmark.git",
-                "reference": "6fbb36d44824ed4091adbcf4c7d4a3923cdb3405"
+                "reference": "10732241927d3971d28e7ea7b5712721fa2296ca"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/thephpleague/commonmark/zipball/6fbb36d44824ed4091adbcf4c7d4a3923cdb3405",
-                "reference": "6fbb36d44824ed4091adbcf4c7d4a3923cdb3405",
+                "url": "https://api.github.com/repos/thephpleague/commonmark/zipball/10732241927d3971d28e7ea7b5712721fa2296ca",
+                "reference": "10732241927d3971d28e7ea7b5712721fa2296ca",
                 "shasum": ""
             },
             "require": {
@@ -1563,7 +1564,7 @@
                 "symfony/process": "^5.4 | ^6.0 | ^7.0",
                 "symfony/yaml": "^2.3 | ^3.0 | ^4.0 | ^5.0 | ^6.0 | ^7.0",
                 "unleashedtech/php-coding-standard": "^3.1.1",
-                "vimeo/psalm": "^4.24.0 || ^5.0.0"
+                "vimeo/psalm": "^4.24.0 || ^5.0.0 || ^6.0.0"
             },
             "suggest": {
                 "symfony/yaml": "v2.3+ required if using the Front Matter extension"
@@ -1628,7 +1629,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2025-05-05T12:20:28+00:00"
+            "time": "2025-07-20T12:47:49+00:00"
         },
         {
             "name": "league/config",
@@ -2179,17 +2180,11 @@
         },
         {
             "name": "nativephp/electron",
-            "version": "1.1.1",
-            "source": {
-                "type": "git",
-                "url": "https://github.com/NativePHP/electron.git",
-                "reference": "861d5ef169f38b282abc2673e92aa167b68aa844"
-            },
+            "version": "dev-main",
             "dist": {
-                "type": "zip",
-                "url": "https://api.github.com/repos/NativePHP/electron/zipball/861d5ef169f38b282abc2673e92aa167b68aa844",
-                "reference": "861d5ef169f38b282abc2673e92aa167b68aa844",
-                "shasum": ""
+                "type": "path",
+                "url": "nativephp-electron",
+                "reference": "d376c75fdc7cbdd555a046b0c3924a4e7760aa6c"
             },
             "require": {
                 "ext-zip": "*",
@@ -2217,12 +2212,12 @@
             "type": "library",
             "extra": {
                 "laravel": {
-                    "aliases": {
-                        "Updater": "Native\\Electron\\Facades\\Updater"
-                    },
                     "providers": [
                         "Native\\Electron\\ElectronServiceProvider"
-                    ]
+                    ],
+                    "aliases": {
+                        "Updater": "Native\\Electron\\Facades\\Updater"
+                    }
                 }
             },
             "autoload": {
@@ -2230,7 +2225,33 @@
                     "Native\\Electron\\": "src/"
                 }
             },
-            "notification-url": "https://packagist.org/downloads/",
+            "autoload-dev": {
+                "psr-4": {
+                    "Native\\Electron\\Tests\\": "tests/"
+                }
+            },
+            "scripts": {
+                "qa": [
+                    "@composer format",
+                    "@composer analyse",
+                    "@composer test"
+                ],
+                "post-autoload-dump": [
+                    "@php ./vendor/bin/testbench package:discover --ansi"
+                ],
+                "analyse": [
+                    "vendor/bin/phpstan analyse"
+                ],
+                "test": [
+                    "vendor/bin/pest"
+                ],
+                "test-coverage": [
+                    "vendor/bin/pest --coverage"
+                ],
+                "format": [
+                    "vendor/bin/pint"
+                ]
+            },
             "license": [
                 "MIT"
             ],
@@ -2253,20 +2274,20 @@
                 "laravel",
                 "nativephp"
             ],
-            "support": {
-                "source": "https://github.com/NativePHP/electron/tree/1.1.1"
-            },
             "funding": [
                 {
-                    "url": "https://github.com/sponsors/simonhamp",
-                    "type": "github"
+                    "type": "github",
+                    "url": "https://github.com/sponsors/simonhamp"
                 },
                 {
-                    "url": "https://opencollective.com/nativephp",
-                    "type": "opencollective"
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/nativephp"
                 }
             ],
-            "time": "2025-06-30T06:43:39+00:00"
+            "transport-options": {
+                "symlink": true,
+                "relative": true
+            }
         },
         {
             "name": "nativephp/laravel",
@@ -2374,16 +2395,16 @@
         },
         {
             "name": "nativephp/php-bin",
-            "version": "1.0.2",
+            "version": "1.0.3",
             "source": {
                 "type": "git",
                 "url": "https://github.com/NativePHP/php-bin.git",
-                "reference": "a888cffa82b5c24c578fa73e7895d2210c502563"
+                "reference": "96adcfcadc8b7d117a095140a695702cbaeca412"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/NativePHP/php-bin/zipball/a888cffa82b5c24c578fa73e7895d2210c502563",
-                "reference": "a888cffa82b5c24c578fa73e7895d2210c502563",
+                "url": "https://api.github.com/repos/NativePHP/php-bin/zipball/96adcfcadc8b7d117a095140a695702cbaeca412",
+                "reference": "96adcfcadc8b7d117a095140a695702cbaeca412",
                 "shasum": ""
             },
             "type": "library",
@@ -2413,7 +2434,7 @@
                 "php"
             ],
             "support": {
-                "source": "https://github.com/NativePHP/php-bin/tree/1.0.2"
+                "source": "https://github.com/NativePHP/php-bin/tree/1.0.3"
             },
             "funding": [
                 {
@@ -2425,7 +2446,7 @@
                     "type": "opencollective"
                 }
             ],
-            "time": "2025-05-23T13:32:30+00:00"
+            "time": "2025-07-16T08:42:59+00:00"
         },
         {
             "name": "nesbot/carbon",
@@ -4058,16 +4079,16 @@
         },
         {
             "name": "spatie/laravel-package-tools",
-            "version": "1.92.4",
+            "version": "1.92.7",
             "source": {
                 "type": "git",
                 "url": "https://github.com/spatie/laravel-package-tools.git",
-                "reference": "d20b1969f836d210459b78683d85c9cd5c5f508c"
+                "reference": "f09a799850b1ed765103a4f0b4355006360c49a5"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/spatie/laravel-package-tools/zipball/d20b1969f836d210459b78683d85c9cd5c5f508c",
-                "reference": "d20b1969f836d210459b78683d85c9cd5c5f508c",
+                "url": "https://api.github.com/repos/spatie/laravel-package-tools/zipball/f09a799850b1ed765103a4f0b4355006360c49a5",
+                "reference": "f09a799850b1ed765103a4f0b4355006360c49a5",
                 "shasum": ""
             },
             "require": {
@@ -4107,7 +4128,7 @@
             ],
             "support": {
                 "issues": "https://github.com/spatie/laravel-package-tools/issues",
-                "source": "https://github.com/spatie/laravel-package-tools/tree/1.92.4"
+                "source": "https://github.com/spatie/laravel-package-tools/tree/1.92.7"
             },
             "funding": [
                 {
@@ -4115,7 +4136,7 @@
                     "type": "github"
                 }
             ],
-            "time": "2025-04-11T15:27:14+00:00"
+            "time": "2025-07-17T15:46:43+00:00"
         },
         {
             "name": "symfony/clock",
@@ -7289,16 +7310,16 @@
         },
         {
             "name": "laravel/pint",
-            "version": "v1.23.0",
+            "version": "v1.24.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/laravel/pint.git",
-                "reference": "9ab851dba4faa51a3c3223dd3d07044129021024"
+                "reference": "0345f3b05f136801af8c339f9d16ef29e6b4df8a"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/laravel/pint/zipball/9ab851dba4faa51a3c3223dd3d07044129021024",
-                "reference": "9ab851dba4faa51a3c3223dd3d07044129021024",
+                "url": "https://api.github.com/repos/laravel/pint/zipball/0345f3b05f136801af8c339f9d16ef29e6b4df8a",
+                "reference": "0345f3b05f136801af8c339f9d16ef29e6b4df8a",
                 "shasum": ""
             },
             "require": {
@@ -7309,7 +7330,7 @@
                 "php": "^8.2.0"
             },
             "require-dev": {
-                "friendsofphp/php-cs-fixer": "^3.76.0",
+                "friendsofphp/php-cs-fixer": "^3.82.2",
                 "illuminate/view": "^11.45.1",
                 "larastan/larastan": "^3.5.0",
                 "laravel-zero/framework": "^11.45.0",
@@ -7354,20 +7375,20 @@
                 "issues": "https://github.com/laravel/pint/issues",
                 "source": "https://github.com/laravel/pint"
             },
-            "time": "2025-07-03T10:37:47+00:00"
+            "time": "2025-07-10T18:09:32+00:00"
         },
         {
             "name": "laravel/sail",
-            "version": "v1.43.1",
+            "version": "v1.44.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/laravel/sail.git",
-                "reference": "3e7d899232a8c5e3ea4fc6dee7525ad583887e72"
+                "reference": "a09097bd2a8a38e23ac472fa6a6cf5b0d1c1d3fe"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/laravel/sail/zipball/3e7d899232a8c5e3ea4fc6dee7525ad583887e72",
-                "reference": "3e7d899232a8c5e3ea4fc6dee7525ad583887e72",
+                "url": "https://api.github.com/repos/laravel/sail/zipball/a09097bd2a8a38e23ac472fa6a6cf5b0d1c1d3fe",
+                "reference": "a09097bd2a8a38e23ac472fa6a6cf5b0d1c1d3fe",
                 "shasum": ""
             },
             "require": {
@@ -7417,7 +7438,7 @@
                 "issues": "https://github.com/laravel/sail/issues",
                 "source": "https://github.com/laravel/sail"
             },
-            "time": "2025-05-19T13:19:21+00:00"
+            "time": "2025-07-04T16:17:06+00:00"
         },
         {
             "name": "mockery/mockery",
@@ -8354,16 +8375,16 @@
         },
         {
             "name": "phpstan/phpdoc-parser",
-            "version": "2.1.0",
+            "version": "2.2.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/phpstan/phpdoc-parser.git",
-                "reference": "9b30d6fd026b2c132b3985ce6b23bec09ab3aa68"
+                "reference": "b9e61a61e39e02dd90944e9115241c7f7e76bfd8"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/phpstan/phpdoc-parser/zipball/9b30d6fd026b2c132b3985ce6b23bec09ab3aa68",
-                "reference": "9b30d6fd026b2c132b3985ce6b23bec09ab3aa68",
+                "url": "https://api.github.com/repos/phpstan/phpdoc-parser/zipball/b9e61a61e39e02dd90944e9115241c7f7e76bfd8",
+                "reference": "b9e61a61e39e02dd90944e9115241c7f7e76bfd8",
                 "shasum": ""
             },
             "require": {
@@ -8395,9 +8416,9 @@
             "description": "PHPDoc parser with support for nullable, intersection and generic types",
             "support": {
                 "issues": "https://github.com/phpstan/phpdoc-parser/issues",
-                "source": "https://github.com/phpstan/phpdoc-parser/tree/2.1.0"
+                "source": "https://github.com/phpstan/phpdoc-parser/tree/2.2.0"
             },
-            "time": "2025-02-19T13:28:12+00:00"
+            "time": "2025-07-13T07:04:09+00:00"
         },
         {
             "name": "phpunit/php-code-coverage",
@@ -10009,7 +10030,9 @@
     ],
     "aliases": [],
     "minimum-stability": "stable",
-    "stability-flags": {},
+    "stability-flags": {
+        "nativephp/electron": 20
+    },
     "prefer-stable": true,
     "prefer-lowest": false,
     "platform": {
diff --git a/package-lock.json b/package-lock.json
index fcfd94e..51d5c58 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,8 @@
             "version": "1.0.0",
             "dependencies": {
                 "@inertiajs/vue3": "^2.0.0",
+                "@openai/agents": "^0.0.12",
+                "@openai/agents-realtime": "^0.0.12",
                 "@tailwindcss/vite": "^4.1.1",
                 "@types/dompurify": "^3.0.5",
                 "@vitejs/plugin-vue": "^5.2.1",
@@ -18,9 +20,11 @@
                 "concurrently": "^9.0.1",
                 "date-fns": "^4.1.0",
                 "dompurify": "^3.2.6",
+                "electron-audio-loopback": "^1.0.5",
                 "laravel-vite-plugin": "^1.0",
                 "lucide-vue-next": "^0.468.0",
                 "marked": "^16.0.0",
+                "pinia": "^3.0.3",
                 "reka-ui": "^2.2.0",
                 "tailwind-merge": "^3.2.0",
                 "tailwindcss": "^4.1.1",
@@ -108,6 +112,38 @@
                 "node": ">=6.9.0"
             }
         },
+        "node_modules/@electron/get": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/@electron/get/-/get-2.0.3.tgz",
+            "integrity": "sha512-Qkzpg2s9GnVV2I2BjRksUi43U5e6+zaQMcjoJy0C+C5oxaKl+fmckGDQFtRpZpZV0NQekuZZ+tGz7EA9TVnQtQ==",
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "debug": "^4.1.1",
+                "env-paths": "^2.2.0",
+                "fs-extra": "^8.1.0",
+                "got": "^11.8.5",
+                "progress": "^2.0.3",
+                "semver": "^6.2.0",
+                "sumchecker": "^3.0.1"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "optionalDependencies": {
+                "global-agent": "^3.0.0"
+            }
+        },
+        "node_modules/@electron/get/node_modules/semver": {
+            "version": "6.3.1",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+            "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+            "license": "ISC",
+            "peer": true,
+            "bin": {
+                "semver": "bin/semver.js"
+            }
+        },
         "node_modules/@esbuild/aix-ppc64": {
             "version": "0.25.5",
             "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.5.tgz",
@@ -914,6 +950,30 @@
                 "@jridgewell/sourcemap-codec": "^1.4.14"
             }
         },
+        "node_modules/@modelcontextprotocol/sdk": {
+            "version": "1.16.0",
+            "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.16.0.tgz",
+            "integrity": "sha512-8ofX7gkZcLj9H9rSd50mCgm3SSF8C7XoclxJuLoV0Cz3rEQ1tv9MZRYYvJtm9n1BiEQQMzSmE/w2AEkNacLYfg==",
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "ajv": "^6.12.6",
+                "content-type": "^1.0.5",
+                "cors": "^2.8.5",
+                "cross-spawn": "^7.0.5",
+                "eventsource": "^3.0.2",
+                "eventsource-parser": "^3.0.0",
+                "express": "^5.0.1",
+                "express-rate-limit": "^7.5.0",
+                "pkce-challenge": "^5.0.0",
+                "raw-body": "^3.0.0",
+                "zod": "^3.23.8",
+                "zod-to-json-schema": "^3.24.1"
+            },
+            "engines": {
+                "node": ">=18"
+            }
+        },
         "node_modules/@nodelib/fs.scandir": {
             "version": "2.1.5",
             "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -952,6 +1012,76 @@
                 "node": ">= 8"
             }
         },
+        "node_modules/@openai/agents": {
+            "version": "0.0.12",
+            "resolved": "https://registry.npmjs.org/@openai/agents/-/agents-0.0.12.tgz",
+            "integrity": "sha512-36DBV9Z7zST2Do4Wcfeb/ku0HxMVXvRsHAoTwrEZlLl3tdJcVqzhjNf+ZBumFG1vpflHveCE8iuR/KTGmGoC6A==",
+            "license": "MIT",
+            "dependencies": {
+                "@openai/agents-core": "0.0.12",
+                "@openai/agents-openai": "0.0.12",
+                "@openai/agents-realtime": "0.0.12",
+                "debug": "^4.4.0",
+                "openai": "^5.10.1"
+            }
+        },
+        "node_modules/@openai/agents-core": {
+            "version": "0.0.12",
+            "resolved": "https://registry.npmjs.org/@openai/agents-core/-/agents-core-0.0.12.tgz",
+            "integrity": "sha512-GZ3k+QvehH794OrWmXlHcLNX4OnYAQxd4zg7M3Dfk40Rhxl0p0v3CUjevLqO1Hp3rsfstbx8vGR9Qpmvmzuv3A==",
+            "license": "MIT",
+            "dependencies": {
+                "@openai/zod": "npm:zod@3.25.40 - 3.25.67",
+                "debug": "^4.4.0",
+                "openai": "^5.10.1"
+            },
+            "optionalDependencies": {
+                "@modelcontextprotocol/sdk": "^1.12.0"
+            },
+            "peerDependencies": {
+                "zod": "3.25.40 - 3.25.67"
+            },
+            "peerDependenciesMeta": {
+                "zod": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@openai/agents-openai": {
+            "version": "0.0.12",
+            "resolved": "https://registry.npmjs.org/@openai/agents-openai/-/agents-openai-0.0.12.tgz",
+            "integrity": "sha512-frp3eJ4UwOpfX9gVSyTtbTif4e4oo+/SADpTLcG9HMv2ubEXcZlClngtqTQ97p7cmk9Pqvl5GLnQpq2tX36HZQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@openai/agents-core": "0.0.12",
+                "@openai/zod": "npm:zod@3.25.40 - 3.25.67",
+                "debug": "^4.4.0",
+                "openai": "^5.10.1"
+            }
+        },
+        "node_modules/@openai/agents-realtime": {
+            "version": "0.0.12",
+            "resolved": "https://registry.npmjs.org/@openai/agents-realtime/-/agents-realtime-0.0.12.tgz",
+            "integrity": "sha512-P76qomYpNkHJ3vjzWhqhh4+m1REHhjy2ty7IglKBCf2QMk9k4CGFJw75YDffEVD/Z/8eT+ouiL+pho/6cAFCQg==",
+            "license": "MIT",
+            "dependencies": {
+                "@openai/agents-core": "0.0.12",
+                "@openai/zod": "npm:zod@3.25.40 - 3.25.67",
+                "@types/ws": "^8.18.1",
+                "debug": "^4.4.0",
+                "ws": "^8.18.1"
+            }
+        },
+        "node_modules/@openai/zod": {
+            "name": "zod",
+            "version": "3.25.67",
+            "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.67.tgz",
+            "integrity": "sha512-idA2YXwpCdqUSKRCACDE6ItZD9TZzy3OZMtpfLoh6oPR47lipysRrJfjzMqFxQ3uJuUPyUeWe1r9vLH33xO/Qw==",
+            "license": "MIT",
+            "funding": {
+                "url": "https://github.com/sponsors/colinhacks"
+            }
+        },
         "node_modules/@rollup/rollup-android-arm-eabi": {
             "version": "4.41.1",
             "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.41.1.tgz",
@@ -1212,6 +1342,19 @@
                 "win32"
             ]
         },
+        "node_modules/@sindresorhus/is": {
+            "version": "4.6.0",
+            "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-4.6.0.tgz",
+            "integrity": "sha512-t09vSN3MdfsyCHoFcTRCH/iUtG7OJ0CsjzB8cjAmKc/va/kIgeDI/TxsigdncE/4be734m0cvIYwNaV4i2XqAw==",
+            "license": "MIT",
+            "peer": true,
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sindresorhus/is?sponsor=1"
+            }
+        },
         "node_modules/@swc/helpers": {
             "version": "0.5.17",
             "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.17.tgz",
@@ -1221,6 +1364,19 @@
                 "tslib": "^2.8.0"
             }
         },
+        "node_modules/@szmarczak/http-timer": {
+            "version": "4.0.6",
+            "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-4.0.6.tgz",
+            "integrity": "sha512-4BAffykYOgO+5nzBWYwE3W90sBgLJoUPRWWcL8wlyiM8IB8ipJz3UMJ9KXQd1RKQXpKp8Tutn80HZtWsu2u76w==",
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "defer-to-connect": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
         "node_modules/@tailwindcss/node": {
             "version": "4.1.8",
             "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.8.tgz",
@@ -1509,6 +1665,19 @@
                 "vue": "^2.7.0 || ^3.0.0"
             }
         },
+        "node_modules/@types/cacheable-request": {
+            "version": "6.0.3",
+            "resolved": "https://registry.npmjs.org/@types/cacheable-request/-/cacheable-request-6.0.3.tgz",
+            "integrity": "sha512-IQ3EbTzGxIigb1I3qPZc1rWJnH0BmSKv5QYTalEwweFvyBDLSAe24zP0le/hyi7ecGfZVlIVAg4BZqb8WBwKqw==",
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "@types/http-cache-semantics": "*",
+                "@types/keyv": "^3.1.4",
+                "@types/node": "*",
+                "@types/responselike": "^1.0.0"
+            }
+        },
         "node_modules/@types/dompurify": {
             "version": "3.0.5",
             "resolved": "https://registry.npmjs.org/@types/dompurify/-/dompurify-3.0.5.tgz",
@@ -1524,6 +1693,13 @@
             "integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==",
             "license": "MIT"
         },
+        "node_modules/@types/http-cache-semantics": {
+            "version": "4.0.4",
+            "resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.0.4.tgz",
+            "integrity": "sha512-1m0bIFVc7eJWyve9S0RnuRgcQqF/Xd5QsUZAZeQFr1Q3/p9JWoQQEqmVy+DPTNpGXwhgIetAoYF8JSc33q29QA==",
+            "license": "MIT",
+            "peer": true
+        },
         "node_modules/@types/json-schema": {
             "version": "7.0.15",
             "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -1531,11 +1707,20 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/@types/keyv": {
+            "version": "3.1.4",
+            "resolved": "https://registry.npmjs.org/@types/keyv/-/keyv-3.1.4.tgz",
+            "integrity": "sha512-BQ5aZNSCpj7D6K2ksrRCTmKRLEpnPvWDiLPfoGyhZ++8YtiK9d/3DBKPJgry359X/P1PfruyYwvnvwFjuEiEIg==",
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "@types/node": "*"
+            }
+        },
         "node_modules/@types/node": {
             "version": "22.15.30",
             "resolved": "https://registry.npmjs.org/@types/node/-/node-22.15.30.tgz",
             "integrity": "sha512-6Q7lr06bEHdlfplU6YRbgG1SFBdlsfNC4/lX+SkhiTs0cpJkOElmWls8PxDFv4yY/xKb8Y6SO0OmSX4wgqTZbA==",
-            "devOptional": true,
             "license": "MIT",
             "dependencies": {
                 "undici-types": "~6.21.0"
@@ -1547,6 +1732,16 @@
             "integrity": "sha512-eOunJqu0K1923aExK6y8p6fsihYEn/BYuQ4g0CxAAgFc4b/ZLN4CrsRZ55srTdqoiLzU2B2evC+apEIxprEzkQ==",
             "license": "MIT"
         },
+        "node_modules/@types/responselike": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.3.tgz",
+            "integrity": "sha512-H/+L+UkTV33uf49PH5pCAUBVPNj2nDBXTN+qS1dOwyyg24l3CcicicCA7ca+HMvJBZcFgl5r8e+RR6elsb4Lyw==",
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "@types/node": "*"
+            }
+        },
         "node_modules/@types/trusted-types": {
             "version": "2.0.7",
             "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
@@ -1559,6 +1754,26 @@
             "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
             "license": "MIT"
         },
+        "node_modules/@types/ws": {
+            "version": "8.18.1",
+            "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
+            "integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/node": "*"
+            }
+        },
+        "node_modules/@types/yauzl": {
+            "version": "2.10.3",
+            "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
+            "integrity": "sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==",
+            "license": "MIT",
+            "optional": true,
+            "peer": true,
+            "dependencies": {
+                "@types/node": "*"
+            }
+        },
         "node_modules/@typescript-eslint/eslint-plugin": {
             "version": "8.33.1",
             "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.33.1.tgz",
@@ -1906,6 +2121,39 @@
                 "he": "^1.2.0"
             }
         },
+        "node_modules/@vue/devtools-api": {
+            "version": "7.7.7",
+            "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.7.7.tgz",
+            "integrity": "sha512-lwOnNBH2e7x1fIIbVT7yF5D+YWhqELm55/4ZKf45R9T8r9dE2AIOy8HKjfqzGsoTHFbWbr337O4E0A0QADnjBg==",
+            "license": "MIT",
+            "dependencies": {
+                "@vue/devtools-kit": "^7.7.7"
+            }
+        },
+        "node_modules/@vue/devtools-kit": {
+            "version": "7.7.7",
+            "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.7.7.tgz",
+            "integrity": "sha512-wgoZtxcTta65cnZ1Q6MbAfePVFxfM+gq0saaeytoph7nEa7yMXoi6sCPy4ufO111B9msnw0VOWjPEFCXuAKRHA==",
+            "license": "MIT",
+            "dependencies": {
+                "@vue/devtools-shared": "^7.7.7",
+                "birpc": "^2.3.0",
+                "hookable": "^5.5.3",
+                "mitt": "^3.0.1",
+                "perfect-debounce": "^1.0.0",
+                "speakingurl": "^14.0.1",
+                "superjson": "^2.2.2"
+            }
+        },
+        "node_modules/@vue/devtools-shared": {
+            "version": "7.7.7",
+            "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.7.7.tgz",
+            "integrity": "sha512-+udSj47aRl5aKb0memBvcUG9koarqnxNM5yjuREvqwK6T3ap4mn3Zqqc17QrBFTqSMjr3HK1cvStEZpMDpfdyw==",
+            "license": "MIT",
+            "dependencies": {
+                "rfdc": "^1.4.1"
+            }
+        },
         "node_modules/@vue/eslint-config-typescript": {
             "version": "14.5.0",
             "resolved": "https://registry.npmjs.org/@vue/eslint-config-typescript/-/eslint-config-typescript-14.5.0.tgz",
@@ -2043,6 +2291,43 @@
                 "url": "https://github.com/sponsors/antfu"
             }
         },
+        "node_modules/accepts": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz",
+            "integrity": "sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==",
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "mime-types": "^3.0.0",
+                "negotiator": "^1.0.0"
+            },
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
+        "node_modules/accepts/node_modules/mime-db": {
+            "version": "1.54.0",
+            "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
+            "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
+            "license": "MIT",
+            "optional": true,
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
+        "node_modules/accepts/node_modules/mime-types": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.1.tgz",
+            "integrity": "sha512-xRc4oEhT6eaBpU1XF7AjpOFD+xQmXNB5OVKwp4tqCuBpHLS/ZbBDrc07mYTDqVMg6PfxUjjNp85O6Cd2Z/5HWA==",
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "mime-db": "^1.54.0"
+            },
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
         "node_modules/acorn": {
             "version": "8.14.1",
             "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
@@ -2070,7 +2355,7 @@
             "version": "6.12.6",
             "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
             "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-            "dev": true,
+            "devOptional": true,
             "license": "MIT",
             "dependencies": {
                 "fast-deep-equal": "^3.1.1",
@@ -2157,6 +2442,36 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/birpc": {
+            "version": "2.5.0",
+            "resolved": "https://registry.npmjs.org/birpc/-/birpc-2.5.0.tgz",
+            "integrity": "sha512-VSWO/W6nNQdyP520F1mhf+Lc2f8pjGQOtoHHm7Ze8Go1kX7akpVIrtTa0fn+HB0QJEDVacl6aO08YE0PgXfdnQ==",
+            "license": "MIT",
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            }
+        },
+        "node_modules/body-parser": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.2.0.tgz",
+            "integrity": "sha512-02qvAaxv8tp7fBa/mw1ga98OGm+eCbqzJOKoRt70sLmfEEi+jyBYVTDGfCL/k06/4EMk/z01gCe7HoCH/f2LTg==",
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "bytes": "^3.1.2",
+                "content-type": "^1.0.5",
+                "debug": "^4.4.0",
+                "http-errors": "^2.0.0",
+                "iconv-lite": "^0.6.3",
+                "on-finished": "^2.4.1",
+                "qs": "^6.14.0",
+                "raw-body": "^3.0.0",
+                "type-is": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=18"
+            }
+        },
         "node_modules/boolbase": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
@@ -2164,6 +2479,15 @@
             "dev": true,
             "license": "ISC"
         },
+        "node_modules/boolean": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/boolean/-/boolean-3.2.0.tgz",
+            "integrity": "sha512-d0II/GO9uf9lfUHH2BQsjxzRJZBdsjgsBiW4BvhWk/3qoKwQFjIDVN19PfX8F2D/r9PCMTtLWjYVCFrpeYUzsw==",
+            "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
+            "license": "MIT",
+            "optional": true,
+            "peer": true
+        },
         "node_modules/brace-expansion": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
@@ -2187,6 +2511,55 @@
                 "node": ">=8"
             }
         },
+        "node_modules/buffer-crc32": {
+            "version": "0.2.13",
+            "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+            "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
+            "license": "MIT",
+            "peer": true,
+            "engines": {
+                "node": "*"
+            }
+        },
+        "node_modules/bytes": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+            "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+            "license": "MIT",
+            "optional": true,
+            "engines": {
+                "node": ">= 0.8"
+            }
+        },
+        "node_modules/cacheable-lookup": {
+            "version": "5.0.4",
+            "resolved": "https://registry.npmjs.org/cacheable-lookup/-/cacheable-lookup-5.0.4.tgz",
+            "integrity": "sha512-2/kNscPhpcxrOigMZzbiWF7dz8ilhb/nIHU3EyZiXWXpeq/au8qJ8VhdftMkty3n7Gj6HIGalQG8oiBNB3AJgA==",
+            "license": "MIT",
+            "peer": true,
+            "engines": {
+                "node": ">=10.6.0"
+            }
+        },
+        "node_modules/cacheable-request": {
+            "version": "7.0.4",
+            "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-7.0.4.tgz",
+            "integrity": "sha512-v+p6ongsrp0yTGbJXjgxPow2+DL93DASP4kXCDKb8/bwRtt9OEF3whggkkDkGNzgcWy2XaF4a8nZglC7uElscg==",
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "clone-response": "^1.0.2",
+                "get-stream": "^5.1.0",
+                "http-cache-semantics": "^4.0.0",
+                "keyv": "^4.0.0",
+                "lowercase-keys": "^2.0.0",
+                "normalize-url": "^6.0.1",
+                "responselike": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
         "node_modules/call-bind-apply-helpers": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
@@ -2289,6 +2662,19 @@
                 "node": ">=12"
             }
         },
+        "node_modules/clone-response": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.3.tgz",
+            "integrity": "sha512-ROoL94jJH2dUVML2Y/5PEDNaSHgeOdSDicUyS7izcF63G6sTc/FTjLub4b8Il9S8S0beOfYt0TaA5qvFK+w0wA==",
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "mimic-response": "^1.0.0"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/clsx": {
             "version": "2.1.1",
             "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
@@ -2360,11 +2746,83 @@
                 "url": "https://github.com/open-cli-tools/concurrently?sponsor=1"
             }
         },
+        "node_modules/content-disposition": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-1.0.0.tgz",
+            "integrity": "sha512-Au9nRL8VNUut/XSzbQA38+M78dzP4D+eqg3gfJHMIHHYa3bg067xj1KxMUWj+VULbiZMowKngFFbKczUrNJ1mg==",
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "safe-buffer": "5.2.1"
+            },
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
+        "node_modules/content-type": {
+            "version": "1.0.5",
+            "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+            "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+            "license": "MIT",
+            "optional": true,
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
+        "node_modules/cookie": {
+            "version": "0.7.2",
+            "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+            "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
+            "license": "MIT",
+            "optional": true,
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
+        "node_modules/cookie-signature": {
+            "version": "1.2.2",
+            "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.2.2.tgz",
+            "integrity": "sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==",
+            "license": "MIT",
+            "optional": true,
+            "engines": {
+                "node": ">=6.6.0"
+            }
+        },
+        "node_modules/copy-anything": {
+            "version": "3.0.5",
+            "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-3.0.5.tgz",
+            "integrity": "sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==",
+            "license": "MIT",
+            "dependencies": {
+                "is-what": "^4.1.8"
+            },
+            "engines": {
+                "node": ">=12.13"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/mesqueeb"
+            }
+        },
+        "node_modules/cors": {
+            "version": "2.8.5",
+            "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+            "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "object-assign": "^4",
+                "vary": "^1"
+            },
+            "engines": {
+                "node": ">= 0.10"
+            }
+        },
         "node_modules/cross-spawn": {
             "version": "7.0.6",
             "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
             "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
-            "dev": true,
+            "devOptional": true,
             "license": "MIT",
             "dependencies": {
                 "path-key": "^3.1.0",
@@ -2415,7 +2873,6 @@
             "version": "4.4.1",
             "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
             "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "ms": "^2.1.3"
@@ -2429,6 +2886,35 @@
                 }
             }
         },
+        "node_modules/decompress-response": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
+            "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "mimic-response": "^3.1.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/decompress-response/node_modules/mimic-response": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
+            "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
+            "license": "MIT",
+            "peer": true,
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/deep-is": {
             "version": "0.1.4",
             "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -2436,21 +2922,79 @@
             "dev": true,
             "license": "MIT"
         },
-        "node_modules/defu": {
-            "version": "6.1.4",
-            "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.4.tgz",
-            "integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==",
-            "license": "MIT"
-        },
-        "node_modules/delayed-stream": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-            "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+        "node_modules/defer-to-connect": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-2.0.1.tgz",
+            "integrity": "sha512-4tvttepXG1VaYGrRibk5EwJd1t4udunSOVMdLSAL6mId1ix438oPwPZMALY41FCijukO1L0twNcGsdzS7dHgDg==",
+            "license": "MIT",
+            "peer": true,
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/define-data-property": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+            "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+            "license": "MIT",
+            "optional": true,
+            "peer": true,
+            "dependencies": {
+                "es-define-property": "^1.0.0",
+                "es-errors": "^1.3.0",
+                "gopd": "^1.0.1"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/define-properties": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
+            "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+            "license": "MIT",
+            "optional": true,
+            "peer": true,
+            "dependencies": {
+                "define-data-property": "^1.0.1",
+                "has-property-descriptors": "^1.0.0",
+                "object-keys": "^1.1.1"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/defu": {
+            "version": "6.1.4",
+            "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.4.tgz",
+            "integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==",
+            "license": "MIT"
+        },
+        "node_modules/delayed-stream": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+            "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
             "license": "MIT",
             "engines": {
                 "node": ">=0.4.0"
             }
         },
+        "node_modules/depd": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+            "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+            "license": "MIT",
+            "optional": true,
+            "engines": {
+                "node": ">= 0.8"
+            }
+        },
         "node_modules/detect-libc": {
             "version": "2.0.4",
             "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
@@ -2460,6 +3004,14 @@
                 "node": ">=8"
             }
         },
+        "node_modules/detect-node": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
+            "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
+            "license": "MIT",
+            "optional": true,
+            "peer": true
+        },
         "node_modules/dompurify": {
             "version": "3.2.6",
             "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.6.tgz",
@@ -2483,12 +3035,67 @@
                 "node": ">= 0.4"
             }
         },
+        "node_modules/ee-first": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+            "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
+            "license": "MIT",
+            "optional": true
+        },
+        "node_modules/electron": {
+            "version": "37.2.4",
+            "resolved": "https://registry.npmjs.org/electron/-/electron-37.2.4.tgz",
+            "integrity": "sha512-F1WDDvY60TpFwGyW+evNB5q0Em8PamcDTVIKB2NaiaKEbNC2Fabn8Wyxy5g+Anirr1K40eKGjfSJhWEUbI1TOw==",
+            "hasInstallScript": true,
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "@electron/get": "^2.0.0",
+                "@types/node": "^22.7.7",
+                "extract-zip": "^2.0.1"
+            },
+            "bin": {
+                "electron": "cli.js"
+            },
+            "engines": {
+                "node": ">= 12.20.55"
+            }
+        },
+        "node_modules/electron-audio-loopback": {
+            "version": "1.0.5",
+            "resolved": "https://registry.npmjs.org/electron-audio-loopback/-/electron-audio-loopback-1.0.5.tgz",
+            "integrity": "sha512-E/xneHrk2tLD7JntbjBJJr4HyWGaLrdGvqmoeBJZg9URbBBm2OgTEZ5TWgTkIPiAwEvAllsV+VfdBOfP4FeMkw==",
+            "license": "MIT",
+            "peerDependencies": {
+                "electron": ">=31.0.1"
+            }
+        },
         "node_modules/emoji-regex": {
             "version": "8.0.0",
             "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
             "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
             "license": "MIT"
         },
+        "node_modules/encodeurl": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+            "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+            "license": "MIT",
+            "optional": true,
+            "engines": {
+                "node": ">= 0.8"
+            }
+        },
+        "node_modules/end-of-stream": {
+            "version": "1.4.5",
+            "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz",
+            "integrity": "sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==",
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "once": "^1.4.0"
+            }
+        },
         "node_modules/enhanced-resolve": {
             "version": "5.18.1",
             "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.1.tgz",
@@ -2514,6 +3121,16 @@
                 "url": "https://github.com/fb55/entities?sponsor=1"
             }
         },
+        "node_modules/env-paths": {
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
+            "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
+            "license": "MIT",
+            "peer": true,
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/es-define-property": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
@@ -2569,6 +3186,14 @@
                 "benchmarks"
             ]
         },
+        "node_modules/es6-error": {
+            "version": "4.1.1",
+            "resolved": "https://registry.npmjs.org/es6-error/-/es6-error-4.1.1.tgz",
+            "integrity": "sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==",
+            "license": "MIT",
+            "optional": true,
+            "peer": true
+        },
         "node_modules/esbuild": {
             "version": "0.25.5",
             "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.5.tgz",
@@ -2618,11 +3243,18 @@
                 "node": ">=6"
             }
         },
+        "node_modules/escape-html": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+            "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+            "license": "MIT",
+            "optional": true
+        },
         "node_modules/escape-string-regexp": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
             "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-            "dev": true,
+            "devOptional": true,
             "license": "MIT",
             "engines": {
                 "node": ">=10"
@@ -2957,11 +3589,147 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/etag": {
+            "version": "1.8.1",
+            "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+            "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+            "license": "MIT",
+            "optional": true,
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
+        "node_modules/eventsource": {
+            "version": "3.0.7",
+            "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-3.0.7.tgz",
+            "integrity": "sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA==",
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "eventsource-parser": "^3.0.1"
+            },
+            "engines": {
+                "node": ">=18.0.0"
+            }
+        },
+        "node_modules/eventsource-parser": {
+            "version": "3.0.3",
+            "resolved": "https://registry.npmjs.org/eventsource-parser/-/eventsource-parser-3.0.3.tgz",
+            "integrity": "sha512-nVpZkTMM9rF6AQ9gPJpFsNAMt48wIzB5TQgiTLdHiuO8XEDhUgZEhqKlZWXbIzo9VmJ/HvysHqEaVeD5v9TPvA==",
+            "license": "MIT",
+            "optional": true,
+            "engines": {
+                "node": ">=20.0.0"
+            }
+        },
+        "node_modules/express": {
+            "version": "5.1.0",
+            "resolved": "https://registry.npmjs.org/express/-/express-5.1.0.tgz",
+            "integrity": "sha512-DT9ck5YIRU+8GYzzU5kT3eHGA5iL+1Zd0EutOmTE9Dtk+Tvuzd23VBU+ec7HPNSTxXYO55gPV/hq4pSBJDjFpA==",
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "accepts": "^2.0.0",
+                "body-parser": "^2.2.0",
+                "content-disposition": "^1.0.0",
+                "content-type": "^1.0.5",
+                "cookie": "^0.7.1",
+                "cookie-signature": "^1.2.1",
+                "debug": "^4.4.0",
+                "encodeurl": "^2.0.0",
+                "escape-html": "^1.0.3",
+                "etag": "^1.8.1",
+                "finalhandler": "^2.1.0",
+                "fresh": "^2.0.0",
+                "http-errors": "^2.0.0",
+                "merge-descriptors": "^2.0.0",
+                "mime-types": "^3.0.0",
+                "on-finished": "^2.4.1",
+                "once": "^1.4.0",
+                "parseurl": "^1.3.3",
+                "proxy-addr": "^2.0.7",
+                "qs": "^6.14.0",
+                "range-parser": "^1.2.1",
+                "router": "^2.2.0",
+                "send": "^1.1.0",
+                "serve-static": "^2.2.0",
+                "statuses": "^2.0.1",
+                "type-is": "^2.0.1",
+                "vary": "^1.1.2"
+            },
+            "engines": {
+                "node": ">= 18"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/express"
+            }
+        },
+        "node_modules/express-rate-limit": {
+            "version": "7.5.1",
+            "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-7.5.1.tgz",
+            "integrity": "sha512-7iN8iPMDzOMHPUYllBEsQdWVB6fPDMPqwjBaFrgr4Jgr/+okjvzAy+UHlYYL/Vs0OsOrMkwS6PJDkFlJwoxUnw==",
+            "license": "MIT",
+            "optional": true,
+            "engines": {
+                "node": ">= 16"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/express-rate-limit"
+            },
+            "peerDependencies": {
+                "express": ">= 4.11"
+            }
+        },
+        "node_modules/express/node_modules/mime-db": {
+            "version": "1.54.0",
+            "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
+            "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
+            "license": "MIT",
+            "optional": true,
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
+        "node_modules/express/node_modules/mime-types": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.1.tgz",
+            "integrity": "sha512-xRc4oEhT6eaBpU1XF7AjpOFD+xQmXNB5OVKwp4tqCuBpHLS/ZbBDrc07mYTDqVMg6PfxUjjNp85O6Cd2Z/5HWA==",
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "mime-db": "^1.54.0"
+            },
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
+        "node_modules/extract-zip": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
+            "integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==",
+            "license": "BSD-2-Clause",
+            "peer": true,
+            "dependencies": {
+                "debug": "^4.1.1",
+                "get-stream": "^5.1.0",
+                "yauzl": "^2.10.0"
+            },
+            "bin": {
+                "extract-zip": "cli.js"
+            },
+            "engines": {
+                "node": ">= 10.17.0"
+            },
+            "optionalDependencies": {
+                "@types/yauzl": "^2.9.1"
+            }
+        },
         "node_modules/fast-deep-equal": {
             "version": "3.1.3",
             "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
             "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-            "dev": true,
+            "devOptional": true,
             "license": "MIT"
         },
         "node_modules/fast-glob": {
@@ -2998,7 +3766,7 @@
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
             "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-            "dev": true,
+            "devOptional": true,
             "license": "MIT"
         },
         "node_modules/fast-levenshtein": {
@@ -3018,6 +3786,16 @@
                 "reusify": "^1.0.4"
             }
         },
+        "node_modules/fd-slicer": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
+            "integrity": "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==",
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "pend": "~1.2.0"
+            }
+        },
         "node_modules/file-entry-cache": {
             "version": "8.0.0",
             "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -3044,6 +3822,24 @@
                 "node": ">=8"
             }
         },
+        "node_modules/finalhandler": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-2.1.0.tgz",
+            "integrity": "sha512-/t88Ty3d5JWQbWYgaOGCCYfXRwV1+be02WqYYlL6h0lEiUAMPM8o8qKGO01YIkOHzka2up08wvgYD0mDiI+q3Q==",
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "debug": "^4.4.0",
+                "encodeurl": "^2.0.0",
+                "escape-html": "^1.0.3",
+                "on-finished": "^2.4.1",
+                "parseurl": "^1.3.3",
+                "statuses": "^2.0.1"
+            },
+            "engines": {
+                "node": ">= 0.8"
+            }
+        },
         "node_modules/find-up": {
             "version": "5.0.0",
             "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -3118,6 +3914,41 @@
                 "node": ">= 6"
             }
         },
+        "node_modules/forwarded": {
+            "version": "0.2.0",
+            "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+            "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+            "license": "MIT",
+            "optional": true,
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
+        "node_modules/fresh": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz",
+            "integrity": "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==",
+            "license": "MIT",
+            "optional": true,
+            "engines": {
+                "node": ">= 0.8"
+            }
+        },
+        "node_modules/fs-extra": {
+            "version": "8.1.0",
+            "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
+            "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "graceful-fs": "^4.2.0",
+                "jsonfile": "^4.0.0",
+                "universalify": "^0.1.0"
+            },
+            "engines": {
+                "node": ">=6 <7 || >=8"
+            }
+        },
         "node_modules/fsevents": {
             "version": "2.3.3",
             "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -3187,6 +4018,22 @@
                 "node": ">= 0.4"
             }
         },
+        "node_modules/get-stream": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
+            "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "pump": "^3.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/glob-parent": {
             "version": "6.0.2",
             "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -3200,6 +4047,25 @@
                 "node": ">=10.13.0"
             }
         },
+        "node_modules/global-agent": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/global-agent/-/global-agent-3.0.0.tgz",
+            "integrity": "sha512-PT6XReJ+D07JvGoxQMkT6qji/jVNfX/h364XHZOWeRzy64sSFr+xJ5OX7LI3b4MPQzdL4H8Y8M0xzPpsVMwA8Q==",
+            "license": "BSD-3-Clause",
+            "optional": true,
+            "peer": true,
+            "dependencies": {
+                "boolean": "^3.0.1",
+                "es6-error": "^4.1.1",
+                "matcher": "^3.0.0",
+                "roarr": "^2.15.3",
+                "semver": "^7.3.2",
+                "serialize-error": "^7.0.1"
+            },
+            "engines": {
+                "node": ">=10.0"
+            }
+        },
         "node_modules/globals": {
             "version": "14.0.0",
             "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
@@ -3213,6 +4079,24 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/globalthis": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
+            "integrity": "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==",
+            "license": "MIT",
+            "optional": true,
+            "peer": true,
+            "dependencies": {
+                "define-properties": "^1.2.1",
+                "gopd": "^1.0.1"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
         "node_modules/gopd": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
@@ -3225,6 +4109,32 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/got": {
+            "version": "11.8.6",
+            "resolved": "https://registry.npmjs.org/got/-/got-11.8.6.tgz",
+            "integrity": "sha512-6tfZ91bOr7bOXnK7PRDCGBLa1H4U080YHNaAQ2KsMGlLEzRbk44nsZF2E1IeRc3vtJHPVbKCYgdFbaGO2ljd8g==",
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "@sindresorhus/is": "^4.0.0",
+                "@szmarczak/http-timer": "^4.0.5",
+                "@types/cacheable-request": "^6.0.1",
+                "@types/responselike": "^1.0.0",
+                "cacheable-lookup": "^5.0.3",
+                "cacheable-request": "^7.0.2",
+                "decompress-response": "^6.0.0",
+                "http2-wrapper": "^1.0.0-beta.5.2",
+                "lowercase-keys": "^2.0.0",
+                "p-cancelable": "^2.0.0",
+                "responselike": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=10.19.0"
+            },
+            "funding": {
+                "url": "https://github.com/sindresorhus/got?sponsor=1"
+            }
+        },
         "node_modules/graceful-fs": {
             "version": "4.2.11",
             "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
@@ -3247,6 +4157,20 @@
                 "node": ">=8"
             }
         },
+        "node_modules/has-property-descriptors": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+            "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+            "license": "MIT",
+            "optional": true,
+            "peer": true,
+            "dependencies": {
+                "es-define-property": "^1.0.0"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
         "node_modules/has-symbols": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
@@ -3296,6 +4220,73 @@
                 "he": "bin/he"
             }
         },
+        "node_modules/hookable": {
+            "version": "5.5.3",
+            "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
+            "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
+            "license": "MIT"
+        },
+        "node_modules/http-cache-semantics": {
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.2.0.tgz",
+            "integrity": "sha512-dTxcvPXqPvXBQpq5dUr6mEMJX4oIEFv6bwom3FDwKRDsuIjjJGANqhBuoAn9c1RQJIdAKav33ED65E2ys+87QQ==",
+            "license": "BSD-2-Clause",
+            "peer": true
+        },
+        "node_modules/http-errors": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
+            "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "depd": "2.0.0",
+                "inherits": "2.0.4",
+                "setprototypeof": "1.2.0",
+                "statuses": "2.0.1",
+                "toidentifier": "1.0.1"
+            },
+            "engines": {
+                "node": ">= 0.8"
+            }
+        },
+        "node_modules/http-errors/node_modules/statuses": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+            "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+            "license": "MIT",
+            "optional": true,
+            "engines": {
+                "node": ">= 0.8"
+            }
+        },
+        "node_modules/http2-wrapper": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/http2-wrapper/-/http2-wrapper-1.0.3.tgz",
+            "integrity": "sha512-V+23sDMr12Wnz7iTcDeJr3O6AIxlnvT/bmaAAAP/Xda35C90p9599p0F1eHR/N1KILWSoWVAiOMFjBBXaXSMxg==",
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "quick-lru": "^5.1.1",
+                "resolve-alpn": "^1.0.0"
+            },
+            "engines": {
+                "node": ">=10.19.0"
+            }
+        },
+        "node_modules/iconv-lite": {
+            "version": "0.6.3",
+            "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+            "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "safer-buffer": ">= 2.1.2 < 3.0.0"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
         "node_modules/ignore": {
             "version": "5.3.2",
             "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -3333,6 +4324,23 @@
                 "node": ">=0.8.19"
             }
         },
+        "node_modules/inherits": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+            "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+            "license": "ISC",
+            "optional": true
+        },
+        "node_modules/ipaddr.js": {
+            "version": "1.9.1",
+            "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+            "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+            "license": "MIT",
+            "optional": true,
+            "engines": {
+                "node": ">= 0.10"
+            }
+        },
         "node_modules/is-extglob": {
             "version": "2.1.1",
             "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -3375,11 +4383,30 @@
                 "node": ">=0.12.0"
             }
         },
+        "node_modules/is-promise": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-4.0.0.tgz",
+            "integrity": "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==",
+            "license": "MIT",
+            "optional": true
+        },
+        "node_modules/is-what": {
+            "version": "4.1.16",
+            "resolved": "https://registry.npmjs.org/is-what/-/is-what-4.1.16.tgz",
+            "integrity": "sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=12.13"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/mesqueeb"
+            }
+        },
         "node_modules/isexe": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
             "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-            "dev": true,
+            "devOptional": true,
             "license": "ISC"
         },
         "node_modules/jiti": {
@@ -3408,14 +4435,13 @@
             "version": "3.0.1",
             "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
             "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
-            "dev": true,
             "license": "MIT"
         },
         "node_modules/json-schema-traverse": {
             "version": "0.4.1",
             "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
             "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-            "dev": true,
+            "devOptional": true,
             "license": "MIT"
         },
         "node_modules/json-stable-stringify-without-jsonify": {
@@ -3425,11 +4451,28 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/json-stringify-safe": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
+            "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
+            "license": "ISC",
+            "optional": true,
+            "peer": true
+        },
+        "node_modules/jsonfile": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+            "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
+            "license": "MIT",
+            "peer": true,
+            "optionalDependencies": {
+                "graceful-fs": "^4.1.6"
+            }
+        },
         "node_modules/keyv": {
             "version": "4.5.4",
             "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
             "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "json-buffer": "3.0.1"
@@ -3725,6 +4768,16 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/lowercase-keys": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-2.0.0.tgz",
+            "integrity": "sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==",
+            "license": "MIT",
+            "peer": true,
+            "engines": {
+                "node": ">=8"
+            }
+        },
         "node_modules/lucide-vue-next": {
             "version": "0.468.0",
             "resolved": "https://registry.npmjs.org/lucide-vue-next/-/lucide-vue-next-0.468.0.tgz",
@@ -3755,6 +4808,20 @@
                 "node": ">= 20"
             }
         },
+        "node_modules/matcher": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/matcher/-/matcher-3.0.0.tgz",
+            "integrity": "sha512-OkeDaAZ/bQCxeFAozM55PKcKU0yJMPGifLwV4Qgjitu+5MoAfSQN4lsLJeXZ1b8w0x+/Emda6MZgXS1jvsapng==",
+            "license": "MIT",
+            "optional": true,
+            "peer": true,
+            "dependencies": {
+                "escape-string-regexp": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
         "node_modules/math-intrinsics": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -3764,6 +4831,29 @@
                 "node": ">= 0.4"
             }
         },
+        "node_modules/media-typer": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-1.1.0.tgz",
+            "integrity": "sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==",
+            "license": "MIT",
+            "optional": true,
+            "engines": {
+                "node": ">= 0.8"
+            }
+        },
+        "node_modules/merge-descriptors": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-2.0.0.tgz",
+            "integrity": "sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==",
+            "license": "MIT",
+            "optional": true,
+            "engines": {
+                "node": ">=18"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/merge2": {
             "version": "1.4.1",
             "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -3809,6 +4899,16 @@
                 "node": ">= 0.6"
             }
         },
+        "node_modules/mimic-response": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
+            "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==",
+            "license": "MIT",
+            "peer": true,
+            "engines": {
+                "node": ">=4"
+            }
+        },
         "node_modules/minimatch": {
             "version": "9.0.5",
             "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
@@ -3846,6 +4946,12 @@
                 "node": ">= 18"
             }
         },
+        "node_modules/mitt": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+            "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
+            "license": "MIT"
+        },
         "node_modules/mkdirp": {
             "version": "3.0.1",
             "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz",
@@ -3865,7 +4971,6 @@
             "version": "2.1.3",
             "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
             "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-            "dev": true,
             "license": "MIT"
         },
         "node_modules/muggle-string": {
@@ -3900,6 +5005,29 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/negotiator": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.0.0.tgz",
+            "integrity": "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==",
+            "license": "MIT",
+            "optional": true,
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
+        "node_modules/normalize-url": {
+            "version": "6.1.0",
+            "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
+            "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==",
+            "license": "MIT",
+            "peer": true,
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/nth-check": {
             "version": "2.1.1",
             "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
@@ -3913,6 +5041,16 @@
                 "url": "https://github.com/fb55/nth-check?sponsor=1"
             }
         },
+        "node_modules/object-assign": {
+            "version": "4.1.1",
+            "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+            "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+            "license": "MIT",
+            "optional": true,
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
         "node_modules/object-inspect": {
             "version": "1.13.4",
             "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
@@ -3925,12 +5063,66 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/object-keys": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+            "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+            "license": "MIT",
+            "optional": true,
+            "peer": true,
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
         "node_modules/ohash": {
             "version": "2.0.11",
             "resolved": "https://registry.npmjs.org/ohash/-/ohash-2.0.11.tgz",
             "integrity": "sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==",
             "license": "MIT"
         },
+        "node_modules/on-finished": {
+            "version": "2.4.1",
+            "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+            "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "ee-first": "1.1.1"
+            },
+            "engines": {
+                "node": ">= 0.8"
+            }
+        },
+        "node_modules/once": {
+            "version": "1.4.0",
+            "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+            "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+            "license": "ISC",
+            "dependencies": {
+                "wrappy": "1"
+            }
+        },
+        "node_modules/openai": {
+            "version": "5.10.1",
+            "resolved": "https://registry.npmjs.org/openai/-/openai-5.10.1.tgz",
+            "integrity": "sha512-fq6xVfv1/gpLbsj8fArEt3b6B9jBxdhAK+VJ+bDvbUvNd+KTLlA3bnDeYZaBsGH9LUhJ1M1yXfp9sEyBLMx6eA==",
+            "license": "Apache-2.0",
+            "bin": {
+                "openai": "bin/cli"
+            },
+            "peerDependencies": {
+                "ws": "^8.18.0",
+                "zod": "^3.23.8"
+            },
+            "peerDependenciesMeta": {
+                "ws": {
+                    "optional": true
+                },
+                "zod": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/optionator": {
             "version": "0.9.4",
             "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -3949,6 +5141,16 @@
                 "node": ">= 0.8.0"
             }
         },
+        "node_modules/p-cancelable": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-2.1.1.tgz",
+            "integrity": "sha512-BZOr3nRQHOntUjTrH8+Lh54smKHoHyur8We1V8DSMVrl5A2malOOwuJRnKRDjSnkoeBh4at6BwEnb5I7Jl31wg==",
+            "license": "MIT",
+            "peer": true,
+            "engines": {
+                "node": ">=8"
+            }
+        },
         "node_modules/p-limit": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
@@ -3994,6 +5196,16 @@
                 "node": ">=6"
             }
         },
+        "node_modules/parseurl": {
+            "version": "1.3.3",
+            "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+            "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+            "license": "MIT",
+            "optional": true,
+            "engines": {
+                "node": ">= 0.8"
+            }
+        },
         "node_modules/path-browserify": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
@@ -4015,12 +5227,35 @@
             "version": "3.1.1",
             "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
             "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-            "dev": true,
+            "devOptional": true,
             "license": "MIT",
             "engines": {
                 "node": ">=8"
             }
         },
+        "node_modules/path-to-regexp": {
+            "version": "8.2.0",
+            "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.2.0.tgz",
+            "integrity": "sha512-TdrF7fW9Rphjq4RjrW0Kp2AW0Ahwu9sRGTkS6bvDi0SCwZlEZYmcfDbEsTz8RVk0EHIS/Vd1bv3JhG+1xZuAyQ==",
+            "license": "MIT",
+            "optional": true,
+            "engines": {
+                "node": ">=16"
+            }
+        },
+        "node_modules/pend": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
+            "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==",
+            "license": "MIT",
+            "peer": true
+        },
+        "node_modules/perfect-debounce": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
+            "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
+            "license": "MIT"
+        },
         "node_modules/picocolors": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -4039,6 +5274,37 @@
                 "url": "https://github.com/sponsors/jonschlinkert"
             }
         },
+        "node_modules/pinia": {
+            "version": "3.0.3",
+            "resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.3.tgz",
+            "integrity": "sha512-ttXO/InUULUXkMHpTdp9Fj4hLpD/2AoJdmAbAeW2yu1iy1k+pkFekQXw5VpC0/5p51IOR/jDaDRfRWRnMMsGOA==",
+            "license": "MIT",
+            "dependencies": {
+                "@vue/devtools-api": "^7.7.2"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/posva"
+            },
+            "peerDependencies": {
+                "typescript": ">=4.4.4",
+                "vue": "^2.7.0 || ^3.5.11"
+            },
+            "peerDependenciesMeta": {
+                "typescript": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/pkce-challenge": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/pkce-challenge/-/pkce-challenge-5.0.0.tgz",
+            "integrity": "sha512-ueGLflrrnvwB3xuo/uGob5pd5FN7l0MsLf0Z87o/UQmRtwjvfylfc9MurIxRAWywCYTgrvpXBcqjV4OfCYGCIQ==",
+            "license": "MIT",
+            "optional": true,
+            "engines": {
+                "node": ">=16.20.0"
+            }
+        },
         "node_modules/postcss": {
             "version": "8.5.4",
             "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.4.tgz",
@@ -4203,17 +5469,52 @@
                 }
             }
         },
+        "node_modules/progress": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
+            "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
+            "license": "MIT",
+            "peer": true,
+            "engines": {
+                "node": ">=0.4.0"
+            }
+        },
+        "node_modules/proxy-addr": {
+            "version": "2.0.7",
+            "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+            "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "forwarded": "0.2.0",
+                "ipaddr.js": "1.9.1"
+            },
+            "engines": {
+                "node": ">= 0.10"
+            }
+        },
         "node_modules/proxy-from-env": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
             "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
             "license": "MIT"
         },
+        "node_modules/pump": {
+            "version": "3.0.3",
+            "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.3.tgz",
+            "integrity": "sha512-todwxLMY7/heScKmntwQG8CXVkWUOdYxIvY2s0VWAAMh/nd8SoYiRaKjlr7+iCs984f2P8zvrfWcDDYVb73NfA==",
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "end-of-stream": "^1.1.0",
+                "once": "^1.3.1"
+            }
+        },
         "node_modules/punycode": {
             "version": "2.3.1",
             "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
             "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
-            "dev": true,
+            "devOptional": true,
             "license": "MIT",
             "engines": {
                 "node": ">=6"
@@ -4255,6 +5556,45 @@
             ],
             "license": "MIT"
         },
+        "node_modules/quick-lru": {
+            "version": "5.1.1",
+            "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
+            "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
+            "license": "MIT",
+            "peer": true,
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/range-parser": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+            "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+            "license": "MIT",
+            "optional": true,
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
+        "node_modules/raw-body": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-3.0.0.tgz",
+            "integrity": "sha512-RmkhL8CAyCRPXCE28MMH0z2PNWQBNk2Q09ZdxM9IOOXwxwZbN+qbWaatPkdkWIKL2ZVDImrN/pK5HTRz2PcS4g==",
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "bytes": "3.1.2",
+                "http-errors": "2.0.0",
+                "iconv-lite": "0.6.3",
+                "unpipe": "1.0.0"
+            },
+            "engines": {
+                "node": ">= 0.8"
+            }
+        },
         "node_modules/reka-ui": {
             "version": "2.3.0",
             "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.3.0.tgz",
@@ -4285,6 +5625,13 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/resolve-alpn": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/resolve-alpn/-/resolve-alpn-1.2.1.tgz",
+            "integrity": "sha512-0a1F4l73/ZFZOakJnQ3FvkJ2+gSTQWz/r2KE5OdDY0TxPm5h4GkqkWWfM47T7HsbnOtcJVEF4epCVy6u7Q3K+g==",
+            "license": "MIT",
+            "peer": true
+        },
         "node_modules/resolve-from": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -4295,6 +5642,19 @@
                 "node": ">=4"
             }
         },
+        "node_modules/responselike": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/responselike/-/responselike-2.0.1.tgz",
+            "integrity": "sha512-4gl03wn3hj1HP3yzgdI7d3lCkF95F21Pz4BPGvKHinyQzALR5CapwC8yIi0Rh58DEMQ/SguC03wFj2k0M/mHhw==",
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "lowercase-keys": "^2.0.0"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/reusify": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
@@ -4306,6 +5666,31 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/rfdc": {
+            "version": "1.4.1",
+            "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
+            "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
+            "license": "MIT"
+        },
+        "node_modules/roarr": {
+            "version": "2.15.4",
+            "resolved": "https://registry.npmjs.org/roarr/-/roarr-2.15.4.tgz",
+            "integrity": "sha512-CHhPh+UNHD2GTXNYhPWLnU8ONHdI+5DI+4EYIAOaiD63rHeYlZvyh8P+in5999TTSFgUYuKUAjzRI4mdh/p+2A==",
+            "license": "BSD-3-Clause",
+            "optional": true,
+            "peer": true,
+            "dependencies": {
+                "boolean": "^3.0.1",
+                "detect-node": "^2.0.4",
+                "globalthis": "^1.0.1",
+                "json-stringify-safe": "^5.0.1",
+                "semver-compare": "^1.0.0",
+                "sprintf-js": "^1.1.2"
+            },
+            "engines": {
+                "node": ">=8.0"
+            }
+        },
         "node_modules/rollup": {
             "version": "4.41.1",
             "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.41.1.tgz",
@@ -4358,6 +5743,23 @@
                 "linux"
             ]
         },
+        "node_modules/router": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/router/-/router-2.2.0.tgz",
+            "integrity": "sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==",
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "debug": "^4.4.0",
+                "depd": "^2.0.0",
+                "is-promise": "^4.0.0",
+                "parseurl": "^1.3.3",
+                "path-to-regexp": "^8.0.0"
+            },
+            "engines": {
+                "node": ">= 18"
+            }
+        },
         "node_modules/run-parallel": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -4391,11 +5793,39 @@
                 "tslib": "^2.1.0"
             }
         },
+        "node_modules/safe-buffer": {
+            "version": "5.2.1",
+            "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+            "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/feross"
+                },
+                {
+                    "type": "patreon",
+                    "url": "https://www.patreon.com/feross"
+                },
+                {
+                    "type": "consulting",
+                    "url": "https://feross.org/support"
+                }
+            ],
+            "license": "MIT",
+            "optional": true
+        },
+        "node_modules/safer-buffer": {
+            "version": "2.1.2",
+            "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+            "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+            "license": "MIT",
+            "optional": true
+        },
         "node_modules/semver": {
             "version": "7.7.2",
             "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
             "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
-            "dev": true,
+            "devOptional": true,
             "license": "ISC",
             "bin": {
                 "semver": "bin/semver.js"
@@ -4404,11 +5834,119 @@
                 "node": ">=10"
             }
         },
+        "node_modules/semver-compare": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
+            "integrity": "sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==",
+            "license": "MIT",
+            "optional": true,
+            "peer": true
+        },
+        "node_modules/send": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/send/-/send-1.2.0.tgz",
+            "integrity": "sha512-uaW0WwXKpL9blXE2o0bRhoL2EGXIrZxQ2ZQ4mgcfoBxdFmQold+qWsD2jLrfZ0trjKL6vOw0j//eAwcALFjKSw==",
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "debug": "^4.3.5",
+                "encodeurl": "^2.0.0",
+                "escape-html": "^1.0.3",
+                "etag": "^1.8.1",
+                "fresh": "^2.0.0",
+                "http-errors": "^2.0.0",
+                "mime-types": "^3.0.1",
+                "ms": "^2.1.3",
+                "on-finished": "^2.4.1",
+                "range-parser": "^1.2.1",
+                "statuses": "^2.0.1"
+            },
+            "engines": {
+                "node": ">= 18"
+            }
+        },
+        "node_modules/send/node_modules/mime-db": {
+            "version": "1.54.0",
+            "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
+            "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
+            "license": "MIT",
+            "optional": true,
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
+        "node_modules/send/node_modules/mime-types": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.1.tgz",
+            "integrity": "sha512-xRc4oEhT6eaBpU1XF7AjpOFD+xQmXNB5OVKwp4tqCuBpHLS/ZbBDrc07mYTDqVMg6PfxUjjNp85O6Cd2Z/5HWA==",
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "mime-db": "^1.54.0"
+            },
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
+        "node_modules/serialize-error": {
+            "version": "7.0.1",
+            "resolved": "https://registry.npmjs.org/serialize-error/-/serialize-error-7.0.1.tgz",
+            "integrity": "sha512-8I8TjW5KMOKsZQTvoxjuSIa7foAwPWGOts+6o7sgjz41/qMD9VQHEDxi6PBvK2l0MXUmqZyNpUK+T2tQaaElvw==",
+            "license": "MIT",
+            "optional": true,
+            "peer": true,
+            "dependencies": {
+                "type-fest": "^0.13.1"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/serialize-error/node_modules/type-fest": {
+            "version": "0.13.1",
+            "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz",
+            "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==",
+            "license": "(MIT OR CC0-1.0)",
+            "optional": true,
+            "peer": true,
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/serve-static": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-2.2.0.tgz",
+            "integrity": "sha512-61g9pCh0Vnh7IutZjtLGGpTA355+OPn2TyDv/6ivP2h/AdAVX9azsoxmg2/M6nZeQZNYBEwIcsne1mJd9oQItQ==",
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "encodeurl": "^2.0.0",
+                "escape-html": "^1.0.3",
+                "parseurl": "^1.3.3",
+                "send": "^1.2.0"
+            },
+            "engines": {
+                "node": ">= 18"
+            }
+        },
+        "node_modules/setprototypeof": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+            "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+            "license": "ISC",
+            "optional": true
+        },
         "node_modules/shebang-command": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
             "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-            "dev": true,
+            "devOptional": true,
             "license": "MIT",
             "dependencies": {
                 "shebang-regex": "^3.0.0"
@@ -4421,7 +5959,7 @@
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
             "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-            "dev": true,
+            "devOptional": true,
             "license": "MIT",
             "engines": {
                 "node": ">=8"
@@ -4520,6 +6058,33 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/speakingurl": {
+            "version": "14.0.1",
+            "resolved": "https://registry.npmjs.org/speakingurl/-/speakingurl-14.0.1.tgz",
+            "integrity": "sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==",
+            "license": "BSD-3-Clause",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/sprintf-js": {
+            "version": "1.1.3",
+            "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz",
+            "integrity": "sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==",
+            "license": "BSD-3-Clause",
+            "optional": true,
+            "peer": true
+        },
+        "node_modules/statuses": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
+            "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
+            "license": "MIT",
+            "optional": true,
+            "engines": {
+                "node": ">= 0.8"
+            }
+        },
         "node_modules/string-width": {
             "version": "4.2.3",
             "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
@@ -4559,6 +6124,31 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/sumchecker": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/sumchecker/-/sumchecker-3.0.1.tgz",
+            "integrity": "sha512-MvjXzkz/BOfyVDkG0oFOtBxHX2u3gKbMHIF/dXblZsgD3BWOFLmHovIpZY7BykJdAjcqRCBi1WYBNdEC9yI7vg==",
+            "license": "Apache-2.0",
+            "peer": true,
+            "dependencies": {
+                "debug": "^4.1.0"
+            },
+            "engines": {
+                "node": ">= 8.0"
+            }
+        },
+        "node_modules/superjson": {
+            "version": "2.2.2",
+            "resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.2.tgz",
+            "integrity": "sha512-5JRxVqC8I8NuOUjzBbvVJAKNM8qoVuH0O77h4WInc/qC2q5IreqKxYwgkga3PfA22OayK2ikceb/B26dztPl+Q==",
+            "license": "MIT",
+            "dependencies": {
+                "copy-anything": "^3.0.2"
+            },
+            "engines": {
+                "node": ">=16"
+            }
+        },
         "node_modules/supports-color": {
             "version": "8.1.1",
             "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
@@ -4671,6 +6261,16 @@
                 "node": ">=8.0"
             }
         },
+        "node_modules/toidentifier": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+            "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+            "license": "MIT",
+            "optional": true,
+            "engines": {
+                "node": ">=0.6"
+            }
+        },
         "node_modules/tree-kill": {
             "version": "1.2.2",
             "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
@@ -4734,6 +6334,44 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/type-is": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/type-is/-/type-is-2.0.1.tgz",
+            "integrity": "sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==",
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "content-type": "^1.0.5",
+                "media-typer": "^1.1.0",
+                "mime-types": "^3.0.0"
+            },
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
+        "node_modules/type-is/node_modules/mime-db": {
+            "version": "1.54.0",
+            "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
+            "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
+            "license": "MIT",
+            "optional": true,
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
+        "node_modules/type-is/node_modules/mime-types": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.1.tgz",
+            "integrity": "sha512-xRc4oEhT6eaBpU1XF7AjpOFD+xQmXNB5OVKwp4tqCuBpHLS/ZbBDrc07mYTDqVMg6PfxUjjNp85O6Cd2Z/5HWA==",
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "mime-db": "^1.54.0"
+            },
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
         "node_modules/typescript": {
             "version": "5.8.3",
             "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
@@ -4774,14 +6412,33 @@
             "version": "6.21.0",
             "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
             "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
-            "devOptional": true,
             "license": "MIT"
         },
+        "node_modules/universalify": {
+            "version": "0.1.2",
+            "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+            "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+            "license": "MIT",
+            "peer": true,
+            "engines": {
+                "node": ">= 4.0.0"
+            }
+        },
+        "node_modules/unpipe": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+            "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+            "license": "MIT",
+            "optional": true,
+            "engines": {
+                "node": ">= 0.8"
+            }
+        },
         "node_modules/uri-js": {
             "version": "4.4.1",
             "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
             "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
-            "dev": true,
+            "devOptional": true,
             "license": "BSD-2-Clause",
             "dependencies": {
                 "punycode": "^2.1.0"
@@ -4794,6 +6451,16 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/vary": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+            "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+            "license": "MIT",
+            "optional": true,
+            "engines": {
+                "node": ">= 0.8"
+            }
+        },
         "node_modules/vite": {
             "version": "6.3.5",
             "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
@@ -4991,7 +6658,7 @@
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
             "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-            "dev": true,
+            "devOptional": true,
             "license": "ISC",
             "dependencies": {
                 "isexe": "^2.0.0"
@@ -5030,6 +6697,33 @@
                 "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
             }
         },
+        "node_modules/wrappy": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+            "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+            "license": "ISC"
+        },
+        "node_modules/ws": {
+            "version": "8.18.3",
+            "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
+            "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=10.0.0"
+            },
+            "peerDependencies": {
+                "bufferutil": "^4.0.1",
+                "utf-8-validate": ">=5.0.2"
+            },
+            "peerDependenciesMeta": {
+                "bufferutil": {
+                    "optional": true
+                },
+                "utf-8-validate": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/xml-name-validator": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
@@ -5085,6 +6779,17 @@
                 "node": ">=12"
             }
         },
+        "node_modules/yauzl": {
+            "version": "2.10.0",
+            "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
+            "integrity": "sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==",
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "buffer-crc32": "~0.2.3",
+                "fd-slicer": "~1.1.0"
+            }
+        },
         "node_modules/yocto-queue": {
             "version": "0.1.0",
             "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
@@ -5119,6 +6824,26 @@
             "funding": {
                 "url": "https://github.com/sponsors/ljharb"
             }
+        },
+        "node_modules/zod": {
+            "version": "3.25.67",
+            "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.67.tgz",
+            "integrity": "sha512-idA2YXwpCdqUSKRCACDE6ItZD9TZzy3OZMtpfLoh6oPR47lipysRrJfjzMqFxQ3uJuUPyUeWe1r9vLH33xO/Qw==",
+            "license": "MIT",
+            "optional": true,
+            "funding": {
+                "url": "https://github.com/sponsors/colinhacks"
+            }
+        },
+        "node_modules/zod-to-json-schema": {
+            "version": "3.24.6",
+            "resolved": "https://registry.npmjs.org/zod-to-json-schema/-/zod-to-json-schema-3.24.6.tgz",
+            "integrity": "sha512-h/z3PKvcTcTetyjl1fkj79MHNEjm+HpD6NXheWjzOekY7kV+lwDYnHw+ivHkijnCSMz1yJaWBD9vu/Fcmk+vEg==",
+            "license": "ISC",
+            "optional": true,
+            "peerDependencies": {
+                "zod": "^3.24.1"
+            }
         }
     }
 }
diff --git a/package.json b/package.json
index 8e8583e..897db95 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,8 @@
     },
     "dependencies": {
         "@inertiajs/vue3": "^2.0.0",
+        "@openai/agents": "^0.0.12",
+        "@openai/agents-realtime": "^0.0.12",
         "@tailwindcss/vite": "^4.1.1",
         "@types/dompurify": "^3.0.5",
         "@vitejs/plugin-vue": "^5.2.1",
@@ -36,9 +38,11 @@
         "concurrently": "^9.0.1",
         "date-fns": "^4.1.0",
         "dompurify": "^3.2.6",
+        "electron-audio-loopback": "^1.0.5",
         "laravel-vite-plugin": "^1.0",
         "lucide-vue-next": "^0.468.0",
         "marked": "^16.0.0",
+        "pinia": "^3.0.3",
         "reka-ui": "^2.2.0",
         "tailwind-merge": "^3.2.0",
         "tailwindcss": "^4.1.1",
diff --git a/resources/css/app.css b/resources/css/app.css
index eb647a3..b01904a 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -1,11 +1,13 @@
 @import 'tailwindcss';
 
+/* Tell Tailwind CSS v4 where to look for utility classes */
+@source "../js/**/*.{js,ts,vue}";
+
 @import 'tw-animate-css';
 
 /* Realtime agent styles removed - using unified design system */
 
-@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
-@source '../../storage/framework/views/*.php';
+/* Tailwind v4 with Vite automatically detects source files */
 
 @custom-variant dark (&:is(.dark *));
 
@@ -58,6 +60,14 @@
     --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
     --color-sidebar-border: var(--sidebar-border);
     --color-sidebar-ring: var(--sidebar-ring);
+
+    /* Transcript card colors */
+    --color-blue-50: var(--blue-50);
+    --color-blue-900: var(--blue-900);
+    --color-gray-50: var(--gray-50);
+    --color-gray-800: var(--gray-800);
+    --color-yellow-50: var(--yellow-50);
+    --color-yellow-900: var(--yellow-900);
 }
 
 /*
@@ -121,6 +131,14 @@
     --sidebar-border: hsl(0 0% 91%);
     --sidebar-ring: hsl(217.2 91.2% 59.8%);
     --sidebar: hsl(0 0% 98%);
+    
+    /* Transcript card colors */
+    --blue-50: hsl(214 100% 97%);
+    --blue-900: hsl(215 80% 20%);
+    --gray-50: hsl(210 20% 98%);
+    --gray-800: hsl(209 20% 25%);
+    --yellow-50: hsl(50 100% 96%);
+    --yellow-900: hsl(45 80% 20%);
 }
 
 .dark {
@@ -157,6 +175,14 @@
     --sidebar-border: hsl(0 0% 15.9%);
     --sidebar-ring: hsl(217.2 91.2% 59.8%);
     --sidebar: hsl(240 5.9% 10%);
+    
+    /* Transcript card colors - dark mode */
+    --blue-50: hsl(214 100% 97%);
+    --blue-900: hsl(215 80% 20%);
+    --gray-50: hsl(210 20% 98%);
+    --gray-800: hsl(209 20% 25%);
+    --yellow-50: hsl(50 100% 96%);
+    --yellow-900: hsl(45 80% 20%);
 }
 
 @layer base {
@@ -178,23 +204,13 @@
     position: relative;
 }
 
-/* Enhanced screen recording protection */
-.screen-protection-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+/* Enhanced screen recording protection - content overlay */
+.screen-protection-content-overlay {
+    position: absolute;
+    inset: 0;
     pointer-events: none;
-    z-index: 999999;
-    background: transparent;
-    /* This creates a compositing layer that can interfere with screen recording */
-    will-change: transform;
-    transform: translateZ(0);
-    -webkit-transform: translateZ(0);
-    /* Force GPU acceleration */
-    -webkit-backface-visibility: hidden;
-    backface-visibility: hidden;
+    z-index: 10;
+    border-radius: 0.5rem;
 }
 
 /* Alternative protection using filters */
@@ -517,6 +533,111 @@ body {
     overflow-x: hidden;
 }
 
+
+/* Custom scrollbar styles for glass-morphism */
+.custom-scrollbar {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(139, 92, 246, 0.3) transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 3px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+    background: rgba(139, 92, 246, 0.3);
+    border-radius: 3px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: rgba(139, 92, 246, 0.5);
+}
+
+/* Dark mode custom scrollbar */
+.dark .custom-scrollbar::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.dark .custom-scrollbar::-webkit-scrollbar-thumb {
+    background: rgba(139, 92, 246, 0.5);
+}
+
+.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: rgba(139, 92, 246, 0.7);
+}
+
+/* Minimal transcript scrollbar */
+.transcript-scrollbar {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
+}
+
+.transcript-scrollbar::-webkit-scrollbar {
+    width: 4px;
+}
+
+.transcript-scrollbar::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.transcript-scrollbar::-webkit-scrollbar-thumb {
+    background: rgba(156, 163, 175, 0.5);
+    border-radius: 2px;
+}
+
+.transcript-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: rgba(156, 163, 175, 0.7);
+}
+
+/* Dark mode transcript scrollbar */
+.dark .transcript-scrollbar::-webkit-scrollbar-thumb {
+    background: rgba(107, 114, 128, 0.5);
+}
+
+.dark .transcript-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: rgba(107, 114, 128, 0.7);
+}
+
+/* Enhanced text clarity for glass-morphism */
+.glass-card {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.glass-card h3 {
+    font-weight: 600;
+    letter-spacing: -0.01em;
+}
+
+.glass-card p {
+    font-weight: 400;
+}
+
+/* Ensure text remains readable on glass backgrounds */
+.glass-card .text-gray-900 {
+    color: rgb(17, 24, 39);
+    font-weight: 500;
+}
+
+.glass-card .text-gray-600 {
+    color: rgb(75, 85, 99);
+}
+
+.dark .glass-card .text-gray-100 {
+    color: rgb(243, 244, 246);
+    font-weight: 500;
+}
+
+.dark .glass-card .text-gray-400 {
+    color: rgb(209, 213, 219);
+}
+
 /* Responsive styles for narrow widths */
 @media (max-width: 768px) {
     /* Mobile menu dropdown styles */
@@ -608,12 +729,12 @@ body {
 
 /* Dot pattern background for main container */
 .bg-dot-pattern {
-    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
+    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
     background-size: 20px 20px;
 }
 
 .dark .bg-dot-pattern {
-    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
+    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
 }
 
 /* Fade in animation */
@@ -666,6 +787,77 @@ body {
     background-color: rgb(252, 165, 165); /* red-300 */
 }
 
+/* Transcript card background colors - Ensure these work with Tailwind v4 */
+.bg-blue-50 {
+    background-color: rgb(239, 246, 255) !important;
+}
+
+.bg-gray-50 {
+    background-color: rgb(249, 250, 251) !important;
+}
+
+.bg-gray-100 {
+    background-color: rgb(243, 244, 246) !important;
+}
+
+.bg-yellow-50 {
+    background-color: rgb(254, 252, 232) !important;
+}
+
+.bg-green-50 {
+    background-color: rgb(240, 253, 244) !important;
+}
+
+/* Ensure transcript cards are never transparent */
+.animate-fadeIn .bg-blue-50 {
+    background-color: rgb(239, 246, 255) !important;
+}
+
+.animate-fadeIn.bg-gray-50 {
+    background-color: rgb(249, 250, 251) !important;
+}
+
+.animate-fadeIn.bg-yellow-50 {
+    background-color: rgb(254, 252, 232) !important;
+}
+
+.dark .bg-blue-50 {
+    background-color: rgba(30, 58, 138, 0.2) !important; /* blue-900 with 20% opacity */
+}
+
+.dark .bg-gray-50 {
+    background-color: rgb(31, 41, 55) !important; /* gray-800 */
+}
+
+.dark .bg-gray-100 {
+    background-color: rgb(55, 65, 81) !important; /* gray-700 */
+}
+
+.dark .bg-yellow-50 {
+    background-color: rgba(120, 53, 15, 0.2) !important; /* yellow-900 with 20% opacity */
+}
+
+/* Border colors for transcript cards */
+.border-blue-100 {
+    border-color: rgb(219, 234, 254) !important;
+}
+
+.border-yellow-200 {
+    border-color: rgb(254, 240, 138) !important;
+}
+
+.dark .border-blue-900\/30 {
+    border-color: rgba(30, 58, 138, 0.3) !important;
+}
+
+.dark .border-yellow-900\/30 {
+    border-color: rgba(120, 53, 15, 0.3) !important;
+}
+
+.dark .bg-green-50 {
+    background-color: rgba(20, 83, 45, 0.2) !important; /* green-900 with 20% opacity */
+}
+
 /* Fix template dropdown hover colors in dark mode */
 .dark .hover\:bg-gray-50\/50:hover {
     background-color: rgba(0, 0, 0, 0.5) !important;
diff --git a/resources/js/app.ts b/resources/js/app.ts
index da710e3..a34cbf5 100644
--- a/resources/js/app.ts
+++ b/resources/js/app.ts
@@ -3,6 +3,7 @@ import '../css/app.css';
 import { createInertiaApp } from '@inertiajs/vue3';
 import axios from 'axios';
 import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
+import { createPinia } from 'pinia';
 import type { DefineComponent } from 'vue';
 import { createApp, h } from 'vue';
 import { ZiggyVue } from 'ziggy-js';
@@ -17,6 +18,8 @@ if (token) {
 
 const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
 
+const pinia = createPinia();
+
 createInertiaApp({
     title: (title) => (title ? `${title} - ${appName}` : appName),
     resolve: (name) => resolvePageComponent(`./pages/${name}.vue`, import.meta.glob<DefineComponent>('./pages/**/*.vue')),
@@ -24,6 +27,7 @@ createInertiaApp({
         createApp({ render: () => h(App, props) })
             .use(plugin)
             .use(ZiggyVue)
+            .use(pinia)
             .mount(el);
     },
     progress: {
diff --git a/resources/js/components/AppSidebar.vue b/resources/js/components/AppSidebar.vue
index 3c47f1c..c8c8143 100644
--- a/resources/js/components/AppSidebar.vue
+++ b/resources/js/components/AppSidebar.vue
@@ -10,7 +10,7 @@ import AppLogo from './AppLogo.vue';
 const mainNavItems: NavItem[] = [
     {
         title: 'Realtime Agent',
-        href: '/realtime-agent',
+        href: '/realtime-agent-v2',
         icon: Phone,
     },
     {
@@ -55,7 +55,7 @@ const footerNavItems: NavItem[] = [
             <SidebarMenu>
                 <SidebarMenuItem>
                     <SidebarMenuButton size="lg" as-child>
-                        <Link href="/realtime-agent">
+                        <Link href="/realtime-agent-v2">
                             <AppLogo />
                         </Link>
                     </SidebarMenuButton>
diff --git a/resources/js/components/ContextualInformation.vue b/resources/js/components/ContextualInformation.vue
index 2cc6e3b..531c553 100644
--- a/resources/js/components/ContextualInformation.vue
+++ b/resources/js/components/ContextualInformation.vue
@@ -1,6 +1,6 @@
 <template>
     <div
-        class="flex h-48 flex-shrink-0 flex-col overflow-hidden rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-800"
+        class="flex h-full flex-col overflow-hidden rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-900"
     >
         <div class="mb-3 flex items-center justify-between">
             <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Contextual Information</h3>
@@ -13,7 +13,7 @@
 
         <div
             v-else-if="relevantSection"
-            class="scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-600 scrollbar-track-transparent flex-1 overflow-y-auto"
+            class="scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-600 scrollbar-track-transparent flex-1 min-h-0 overflow-y-auto"
         >
             <div class="space-y-3">
                 <transition
@@ -24,7 +24,7 @@
                     leave-from-class="transform opacity-100 scale-100"
                     leave-to-class="transform opacity-0 scale-95"
                 >
-                    <div class="rounded-lg border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-900" :key="relevantSection.title">
+                    <div class="rounded-lg border border-gray-200 bg-gray-100 p-3 dark:border-gray-700 dark:bg-gray-800" :key="relevantSection.title">
                         <h4 class="mb-1 text-xs font-semibold text-gray-700 uppercase dark:text-gray-300">
                             {{ relevantSection.title }}
                         </h4>
diff --git a/resources/js/components/RealtimeAgent/Actions/CommitmentsList.vue b/resources/js/components/RealtimeAgent/Actions/CommitmentsList.vue
new file mode 100644
index 0000000..d347fc8
--- /dev/null
+++ b/resources/js/components/RealtimeAgent/Actions/CommitmentsList.vue
@@ -0,0 +1,51 @@
+<template>
+    <div
+        class="flex flex-col rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-900"
+    >
+        <h3 class="mb-2 text-sm font-semibold text-gray-900 dark:text-gray-100">Commitments Made</h3>
+
+        <div v-if="commitments.length === 0" class="text-xs text-gray-600 dark:text-gray-400">
+            No commitments captured yet...
+        </div>
+
+        <div v-else class="scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent dark:scrollbar-thumb-gray-600 flex-1 min-h-0 space-y-1.5 overflow-y-auto">
+            <div v-for="commitment in commitments" :key="commitment.id" class="flex items-start gap-2 py-2 text-xs">
+                <div class="flex items-start gap-2">
+                    <span
+                        :class="[
+                            'mt-1 h-2 w-2 flex-shrink-0 rounded-full',
+                            commitment.speaker === 'salesperson' ? 'bg-green-500' : 'bg-gray-400',
+                        ]"
+                    ></span>
+                    <div class="flex-1">
+                        <span
+                            :class="[
+                                'font-medium',
+                                commitment.speaker === 'salesperson'
+                                    ? 'text-gray-900 dark:text-gray-100'
+                                    : 'text-gray-900 dark:text-gray-100',
+                            ]"
+                        >
+                            {{ commitment.speaker === 'salesperson' ? 'You:' : 'Customer:' }}
+                        </span>
+                        <span class="ml-1 text-gray-600 dark:text-gray-400">{{ commitment.text }}</span>
+                        <span v-if="commitment.deadline" class="ml-1 text-gray-600 dark:text-gray-400">
+                            ({{ commitment.deadline }})
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRealtimeAgentStore } from '@/stores/realtimeAgent';
+
+// Store
+const realtimeStore = useRealtimeAgentStore();
+
+// Computed
+const commitments = computed(() => realtimeStore.commitments);
+</script>
\ No newline at end of file
diff --git a/resources/js/components/RealtimeAgent/Actions/PostCallActions.vue b/resources/js/components/RealtimeAgent/Actions/PostCallActions.vue
new file mode 100644
index 0000000..afd6e45
--- /dev/null
+++ b/resources/js/components/RealtimeAgent/Actions/PostCallActions.vue
@@ -0,0 +1,46 @@
+<template>
+    <div
+        class="flex flex-col rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-900"
+    >
+        <h3 class="mb-2 text-sm font-semibold text-gray-900 dark:text-gray-100">Post-Call Actions</h3>
+
+        <div v-if="actionItems.length === 0" class="text-xs text-gray-600 dark:text-gray-400">
+            Action items will appear here...
+        </div>
+
+        <div v-else class="scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent dark:scrollbar-thumb-gray-600 max-h-48 space-y-1.5 overflow-y-auto">
+            <div v-for="item in actionItems" :key="item.id" class="flex items-start gap-2 py-2">
+                <div class="flex items-start gap-2">
+                    <input 
+                        type="checkbox" 
+                        :checked="item.completed"
+                        @change="toggleComplete(item.id)"
+                        class="mt-0.5 rounded border-gray-200 dark:border-gray-700" 
+                    />
+                    <label class="flex-1 text-xs text-gray-900 dark:text-gray-100">
+                        {{ item.text }}
+                        <span v-if="item.deadline" class="text-gray-600 dark:text-gray-400">
+                            - Due: {{ item.deadline }}
+                        </span>
+                    </label>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRealtimeAgentStore } from '@/stores/realtimeAgent';
+
+// Store
+const realtimeStore = useRealtimeAgentStore();
+
+// Computed
+const actionItems = computed(() => realtimeStore.actionItems);
+
+// Methods
+const toggleComplete = (id: string) => {
+    realtimeStore.toggleActionItemComplete(id);
+};
+</script>
\ No newline at end of file
diff --git a/resources/js/components/RealtimeAgent/Content/CustomerIntelligence.vue b/resources/js/components/RealtimeAgent/Content/CustomerIntelligence.vue
new file mode 100644
index 0000000..4ce40ec
--- /dev/null
+++ b/resources/js/components/RealtimeAgent/Content/CustomerIntelligence.vue
@@ -0,0 +1,63 @@
+<template>
+    <div
+        class="rounded-lg border border-gray-200 bg-white p-4 transition-all duration-300 dark:border-gray-700 dark:bg-gray-900"
+        :class="{ 'animate-fadeIn': intelligenceUpdating }"
+    >
+        <h3 class="mb-3 flex items-center gap-2 text-sm font-semibold text-gray-900 dark:text-gray-100">
+            Customer Intelligence
+            <span v-if="intelligenceUpdating" class="animate-pulse text-xs text-gray-900 dark:text-gray-100">
+                Updating...
+            </span>
+        </h3>
+
+        <!-- Intent & Stage -->
+        <div class="mb-3 grid grid-cols-2 gap-3">
+            <div class="rounded-lg bg-gray-100 p-3 dark:bg-gray-800">
+                <p class="text-xs text-gray-600 dark:text-gray-400">Intent</p>
+                <p class="text-sm font-medium text-gray-900 capitalize dark:text-gray-100">
+                    {{ customerIntelligence.intent }}
+                </p>
+            </div>
+            <div class="rounded-lg bg-gray-100 p-3 dark:bg-gray-800">
+                <p class="text-xs text-gray-600 dark:text-gray-400">Stage</p>
+                <p class="text-sm font-medium text-gray-900 dark:text-gray-100">
+                    {{ customerIntelligence.buyingStage }}
+                </p>
+            </div>
+        </div>
+
+        <!-- Engagement Level -->
+        <div class="omega-metric-card">
+            <div class="mb-2 flex items-center justify-between">
+                <p class="omega-metric-label">Engagement Level</p>
+                <p class="text-xs font-medium text-gray-900 dark:text-gray-100">
+                    {{ customerIntelligence.engagementLevel }}%
+                </p>
+            </div>
+            <div class="relative h-2 w-full overflow-hidden rounded-full">
+                <!-- Background bar -->
+                <div class="absolute inset-0" style="background-color: rgba(255, 255, 255, 0.3) !important;"></div>
+                <!-- Progress bar -->
+                <div
+                    class="absolute inset-y-0 left-0 transition-all duration-300 ease-out"
+                    :style="{ 
+                        width: `${customerIntelligence.engagementLevel}%`, 
+                        backgroundColor: 'rgb(59, 130, 246) !important' 
+                    }"
+                ></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRealtimeAgentStore } from '@/stores/realtimeAgent';
+
+// Store
+const realtimeStore = useRealtimeAgentStore();
+
+// Computed
+const customerIntelligence = computed(() => realtimeStore.customerIntelligence);
+const intelligenceUpdating = computed(() => realtimeStore.intelligenceUpdating);
+</script>
\ No newline at end of file
diff --git a/resources/js/components/RealtimeAgent/Content/DiscussionTopics.vue b/resources/js/components/RealtimeAgent/Content/DiscussionTopics.vue
new file mode 100644
index 0000000..434f193
--- /dev/null
+++ b/resources/js/components/RealtimeAgent/Content/DiscussionTopics.vue
@@ -0,0 +1,51 @@
+<template>
+    <div
+        class="flex flex-col rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-900"
+    >
+        <h3 class="mb-2 text-sm font-semibold text-gray-900 dark:text-gray-100">Discussion Topics</h3>
+
+        <div v-if="topics.length === 0" class="py-2 text-center">
+            <p class="text-xs text-gray-600 dark:text-gray-400">Topics will appear as discussed...</p>
+        </div>
+
+        <div
+            v-else
+            class="scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-600 scrollbar-track-transparent flex flex-1 min-h-0 flex-wrap content-start gap-2 overflow-y-auto"
+        >
+            <div
+                v-for="topic in topics"
+                :key="topic.id"
+                :class="[
+                    'animate-fadeIn inline-flex h-6 items-center rounded-full px-2 text-xs font-medium',
+                    topicSentimentClass(topic.sentiment),
+                ]"
+            >
+                <span>{{ topic.name }}</span>
+                <span class="ml-1 text-gray-600 dark:text-gray-400">{{ topic.mentions }}x</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRealtimeAgentStore } from '@/stores/realtimeAgent';
+
+// Store
+const realtimeStore = useRealtimeAgentStore();
+
+// Computed
+const topics = computed(() => realtimeStore.topics);
+
+// Methods
+const topicSentimentClass = (sentiment: string) => {
+    const classMap: Record<string, string> = {
+        'positive': 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400',
+        'negative': 'bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400',
+        'mixed': 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400',
+        'neutral': 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-400',
+    };
+    
+    return classMap[sentiment] || classMap.neutral;
+};
+</script>
\ No newline at end of file
diff --git a/resources/js/components/RealtimeAgent/Content/KeyInsights.vue b/resources/js/components/RealtimeAgent/Content/KeyInsights.vue
new file mode 100644
index 0000000..7885995
--- /dev/null
+++ b/resources/js/components/RealtimeAgent/Content/KeyInsights.vue
@@ -0,0 +1,59 @@
+<template>
+    <div
+        class="flex h-full flex-col overflow-hidden rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-900"
+    >
+        <h3 class="mb-3 text-sm font-semibold text-gray-900 dark:text-gray-100">Key Insights</h3>
+
+        <div v-if="insights.length === 0" class="py-4 text-center">
+            <p class="text-xs text-gray-600 dark:text-gray-400">Listening for insights...</p>
+        </div>
+
+        <div
+            v-else
+            class="scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-600 scrollbar-track-transparent flex-1 min-h-0 space-y-2 overflow-y-auto"
+        >
+            <div v-for="insight in recentInsights" :key="insight.id" class="animate-fadeIn flex items-start gap-2">
+                <div class="flex items-start gap-2">
+                    <span
+                        :class="[
+                            'inline-flex items-center rounded-full px-2 py-1 text-xs font-medium',
+                            insightTypeClass(insight.type),
+                        ]"
+                    >
+                        {{ formatInsightType(insight.type) }}
+                    </span>
+                    <p class="flex-1 text-xs text-gray-900 dark:text-gray-100">{{ insight.text }}</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRealtimeAgentStore } from '@/stores/realtimeAgent';
+
+// Store
+const realtimeStore = useRealtimeAgentStore();
+
+// Computed
+const insights = computed(() => realtimeStore.insights);
+const recentInsights = computed(() => realtimeStore.recentInsights);
+
+// Methods
+const formatInsightType = (type: string) => {
+    return type.replace('_', ' ');
+};
+
+const insightTypeClass = (type: string) => {
+    const classMap: Record<string, string> = {
+        'pain_point': 'bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400',
+        'objection': 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400',
+        'positive_signal': 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400',
+        'concern': 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400',
+        'question': 'bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-400',
+    };
+    
+    return classMap[type] || 'bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-400';
+};
+</script>
\ No newline at end of file
diff --git a/resources/js/components/RealtimeAgent/Content/LiveTranscription.vue b/resources/js/components/RealtimeAgent/Content/LiveTranscription.vue
new file mode 100644
index 0000000..2de963e
--- /dev/null
+++ b/resources/js/components/RealtimeAgent/Content/LiveTranscription.vue
@@ -0,0 +1,94 @@
+<template>
+    <div class="col-span-1 h-full">
+        <div class="flex h-full flex-col rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
+            <!-- Transcription Header -->
+            <div class="border-b border-gray-200 px-4 py-3 dark:border-gray-700">
+                <div class="flex items-center justify-between">
+                    <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Live Transcription</h3>
+                    <div class="flex items-center gap-3">
+                        <div class="flex items-center gap-1.5">
+                            <div class="h-2 w-2 rounded-full bg-green-500"></div>
+                            <span class="text-xs text-gray-600 dark:text-gray-400">You</span>
+                        </div>
+                        <div class="flex items-center gap-1.5">
+                            <div class="h-2 w-2 rounded-full bg-green-500"></div>
+                            <span class="text-xs text-gray-600 dark:text-gray-400">Customer</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Transcription Content - Reversed order, newest first -->
+            <div
+                ref="transcriptContainer"
+                class="transcript-scrollbar flex flex-1 min-h-0 flex-col-reverse overflow-y-auto p-4 pb-8"
+            >
+                <div v-if="transcriptGroups.length === 0" class="py-12 text-center">
+                    <p class="text-sm text-gray-600 dark:text-gray-400">Waiting for conversation to begin...</p>
+                </div>
+
+                <div
+                    v-for="group in [...transcriptGroups].reverse()"
+                    :key="group.id"
+                    class="mb-3 flex"
+                    :class="[
+                        group.role === 'salesperson' ? 'justify-end' : '',
+                        group.role === 'customer' ? 'justify-start' : '',
+                        group.role === 'system' ? 'justify-center' : '',
+                    ]"
+                >
+                    <div
+                        :class="[
+                            'animate-fadeIn inline-block max-w-[70%] rounded-lg border p-3',
+                            group.role === 'salesperson' ? 'border-blue-50 bg-blue-50 text-left dark:border-blue-900/20 dark:bg-blue-900/20' : '',
+                            group.role === 'customer' ? 'border-gray-200 bg-gray-100 text-left dark:border-gray-700 dark:bg-gray-700' : '',
+                            group.role === 'system' ? 'border-gray-200 bg-gray-50 text-center text-sm dark:border-gray-700 dark:bg-gray-800' : ''
+                        ]"
+                    >
+                        <div class="min-w-0">
+                            <p class="whitespace-pre-wrap break-words">{{ group.messages.map(msg => msg.text).join(' ') }}</p>
+                        </div>
+                        <span class="mt-2 block text-xs text-gray-500 dark:text-gray-400">
+                            {{ formatTime(group.startTime) }}
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch, nextTick } from 'vue';
+import { useRealtimeAgentStore } from '@/stores/realtimeAgent';
+
+// Store
+const realtimeStore = useRealtimeAgentStore();
+
+// Refs
+const transcriptContainer = ref<HTMLElement>();
+
+// Computed
+const transcriptGroups = computed(() => realtimeStore.transcriptGroups);
+
+// Watch for new messages to auto-scroll
+watch(
+    () => transcriptGroups.value.length,
+    async () => {
+        await nextTick();
+        if (transcriptContainer.value) {
+            // Since we're using flex-col-reverse, scrollTop = 0 is the bottom
+            transcriptContainer.value.scrollTop = 0;
+        }
+    }
+);
+
+// Methods
+const formatTime = (timestamp: number) => {
+    const date = new Date(timestamp);
+    const hours = date.getHours().toString().padStart(2, '0');
+    const minutes = date.getMinutes().toString().padStart(2, '0');
+    const seconds = date.getSeconds().toString().padStart(2, '0');
+    return `${hours}:${minutes}:${seconds}`;
+};
+</script>
\ No newline at end of file
diff --git a/resources/js/components/RealtimeAgent/Content/TalkingPoints.vue b/resources/js/components/RealtimeAgent/Content/TalkingPoints.vue
new file mode 100644
index 0000000..c52d14b
--- /dev/null
+++ b/resources/js/components/RealtimeAgent/Content/TalkingPoints.vue
@@ -0,0 +1,57 @@
+<template>
+    <div
+        class="flex flex-col rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-900"
+        v-if="selectedTemplate?.talking_points?.length > 0"
+    >
+        <div class="mb-3 flex items-center justify-between">
+            <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Talking Points</h3>
+            <div class="flex items-center gap-2">
+                <div class="text-xs text-gray-600 dark:text-gray-400">
+                    {{ coveredPoints.length }}/{{ selectedTemplate.talking_points.length }} covered
+                </div>
+                <div class="h-1.5 w-16 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
+                    <div class="h-full bg-blue-500 transition-all duration-300 ease-out" :style="{ width: `${talkingPointsProgress}%` }"></div>
+                </div>
+            </div>
+        </div>
+
+        <div
+            class="scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-600 scrollbar-track-transparent max-h-48 space-y-2 overflow-y-auto"
+        >
+            <div v-for="(point, index) in selectedTemplate.talking_points" :key="index" class="flex items-start gap-2">
+                <input
+                    type="checkbox"
+                    :id="`point-${index}`"
+                    :checked="coveredPoints.includes(index)"
+                    @change="togglePoint(index)"
+                    class="mt-0.5 cursor-pointer rounded border-gray-200 dark:border-gray-700"
+                />
+                <label
+                    :for="`point-${index}`"
+                    class="flex-1 cursor-pointer text-xs text-gray-900 dark:text-gray-100"
+                    :class="{ 'text-gray-600 line-through dark:text-gray-400': coveredPoints.includes(index) }"
+                >
+                    {{ point }}
+                </label>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRealtimeAgentStore } from '@/stores/realtimeAgent';
+
+// Store
+const realtimeStore = useRealtimeAgentStore();
+
+// Computed
+const selectedTemplate = computed(() => realtimeStore.selectedTemplate);
+const coveredPoints = computed(() => realtimeStore.coveredPoints);
+const talkingPointsProgress = computed(() => realtimeStore.talkingPointsProgress);
+
+// Methods
+const togglePoint = (index: number) => {
+    realtimeStore.toggleTalkingPoint(index);
+};
+</script>
\ No newline at end of file
diff --git a/resources/js/components/RealtimeAgent/Modals/CustomerInfoModal.vue b/resources/js/components/RealtimeAgent/Modals/CustomerInfoModal.vue
new file mode 100644
index 0000000..24a5908
--- /dev/null
+++ b/resources/js/components/RealtimeAgent/Modals/CustomerInfoModal.vue
@@ -0,0 +1,89 @@
+<template>
+    <div v-if="showModal" class="bg-opacity-50 fixed inset-0 z-50 flex items-center justify-center bg-black">
+        <div class="mx-4 w-full max-w-md rounded-lg border border-gray-200 bg-white p-6 shadow-lg dark:border-gray-700 dark:bg-gray-800">
+            <h2 class="mb-4 text-lg font-semibold">Customer Information (Optional)</h2>
+
+            <div class="space-y-4">
+                <div>
+                    <label class="mb-1 block text-sm font-medium text-gray-600 dark:text-gray-400">Customer Name</label>
+                    <input
+                        v-model="customerName"
+                        type="text"
+                        class="w-full rounded-lg border border-gray-200 px-3 py-2 focus:border-transparent focus:ring-2 focus:ring-blue-500 dark:border-gray-700 dark:bg-gray-900 dark:text-white"
+                        placeholder="John Smith"
+                    />
+                </div>
+
+                <div>
+                    <label class="mb-1 block text-sm font-medium text-gray-600 dark:text-gray-400">Company</label>
+                    <input
+                        v-model="customerCompany"
+                        type="text"
+                        class="w-full rounded-lg border border-gray-200 px-3 py-2 focus:border-transparent focus:ring-2 focus:ring-blue-500 dark:border-gray-700 dark:bg-gray-900 dark:text-white"
+                        placeholder="Acme Corp"
+                    />
+                </div>
+            </div>
+
+            <div class="mt-6 flex gap-3">
+                <button
+                    @click="startWithInfo"
+                    class="flex-1 rounded-lg bg-blue-600 px-4 py-2 text-white transition-colors hover:bg-blue-700"
+                >
+                    Start Call
+                </button>
+                <button
+                    @click="skip"
+                    class="flex-1 rounded-lg bg-gray-100 px-4 py-2 text-gray-800 transition-colors hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600"
+                >
+                    Skip
+                </button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRealtimeAgentStore } from '@/stores/realtimeAgent';
+
+// Emit events
+const emit = defineEmits<{
+    startWithInfo: [{ name: string; company: string }];
+    skip: [];
+}>();
+
+// Store
+const realtimeStore = useRealtimeAgentStore();
+
+// Computed
+const showModal = computed(() => realtimeStore.showCustomerModal);
+const customerName = computed({
+    get: () => realtimeStore.customerInfo.name,
+    set: (value) => realtimeStore.setCustomerInfo({ 
+        ...realtimeStore.customerInfo, 
+        name: value 
+    })
+});
+const customerCompany = computed({
+    get: () => realtimeStore.customerInfo.company,
+    set: (value) => realtimeStore.setCustomerInfo({ 
+        ...realtimeStore.customerInfo, 
+        company: value 
+    })
+});
+
+// Methods
+const startWithInfo = () => {
+    emit('startWithInfo', {
+        name: customerName.value,
+        company: customerCompany.value
+    });
+    realtimeStore.setShowCustomerModal(false);
+};
+
+const skip = () => {
+    emit('skip');
+    realtimeStore.setShowCustomerModal(false);
+};
+</script>
\ No newline at end of file
diff --git a/resources/js/components/RealtimeAgent/Navigation/CoachSelector.vue b/resources/js/components/RealtimeAgent/Navigation/CoachSelector.vue
new file mode 100644
index 0000000..9928aad
--- /dev/null
+++ b/resources/js/components/RealtimeAgent/Navigation/CoachSelector.vue
@@ -0,0 +1,207 @@
+<template>
+    <div class="relative z-[100]" @click.stop>
+        <button
+            ref="buttonRef"
+            @click.stop="toggleDropdown"
+            :disabled="isActive"
+            class="flex items-center gap-1.5 text-xs text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"
+            :class="{ 'cursor-not-allowed opacity-50': isActive }"
+        >
+            <span>Coach:</span>
+            <span class="font-medium text-gray-800 dark:text-gray-200">
+                {{ selectedTemplate?.name || 'Select' }}
+            </span>
+            <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+            </svg>
+        </button>
+
+        <!-- Coach Dropdown Menu -->
+        <Teleport to="body">
+            <div
+                v-if="showCoachDropdown"
+                @click.stop
+                data-dropdown
+                :style="dropdownStyle"
+                class="fixed z-[9999] flex max-h-96 w-full flex-col rounded-lg bg-gray-50 shadow-xl md:w-80 dark:bg-gray-900"
+            >
+            <!-- Search Input -->
+            <div class="border-b border-gray-200 p-3 dark:border-gray-700">
+                <input
+                    v-model="searchQuery"
+                    type="text"
+                    placeholder="Search templates..."
+                    class="w-full rounded border border-gray-200 bg-white px-3 py-1.5 text-sm transition-all focus:border-transparent focus:ring-1 focus:ring-blue-500 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200"
+                    @click.stop
+                />
+            </div>
+
+            <!-- Template List -->
+            <div
+                class="scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent hover:scrollbar-thumb-gray-400 flex-1 overflow-y-auto"
+            >
+                <div v-if="filteredTemplates.length === 0" class="p-3 text-center text-xs text-gray-600 dark:text-gray-400">
+                    No templates found
+                </div>
+                <div
+                    v-for="template in filteredTemplates"
+                    :key="template.id"
+                    @click="selectTemplate(template)"
+                    class="cursor-pointer px-3 py-1.5 transition-colors hover:bg-gray-50/50 dark:hover:bg-gray-700/50"
+                    :class="{ 
+                        'border-l-2 border-blue-500 bg-blue-50/50': selectedTemplate?.id === template.id 
+                    }"
+                >
+                    <div class="flex items-center gap-2">
+                        <span class="text-sm">{{ getIconEmoji(template.icon) }}</span>
+                        <p class="text-xs text-gray-900 dark:text-gray-100">{{ template.name }}</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        </Teleport>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, onUnmounted, watch } from 'vue';
+import { useRealtimeAgentStore } from '@/stores/realtimeAgent';
+import { useSettingsStore } from '@/stores/settings';
+
+// Stores
+const realtimeStore = useRealtimeAgentStore();
+const settingsStore = useSettingsStore();
+
+// Refs
+const buttonRef = ref<HTMLElement>();
+const dropdownStyle = ref({});
+
+// Computed
+const isActive = computed(() => realtimeStore.isActive);
+const selectedTemplate = computed(() => realtimeStore.selectedTemplate);
+const templates = computed(() => realtimeStore.templates);
+const showCoachDropdown = computed(() => settingsStore.showCoachDropdown);
+const searchQuery = computed({
+    get: () => settingsStore.templateSearchQuery,
+    set: (value) => settingsStore.setTemplateSearchQuery(value)
+});
+
+const filteredTemplates = computed(() => {
+    // Ensure templates is an array
+    const templateArray = Array.isArray(templates.value) ? templates.value : [];
+    
+    if (!searchQuery.value) return templateArray;
+    
+    const query = searchQuery.value.toLowerCase();
+    return templateArray.filter(template => 
+        template.name.toLowerCase().includes(query)
+    );
+});
+
+// Methods
+const updateDropdownPosition = () => {
+    if (!buttonRef.value || !showCoachDropdown.value) return;
+    
+    const rect = buttonRef.value.getBoundingClientRect();
+    const isMobile = window.innerWidth < 768;
+    
+    // Calculate position
+    const top = rect.bottom + 8; // 8px gap (mt-2)
+    let left = rect.left;
+    let width = rect.width;
+    
+    // On desktop, align to right edge and set fixed width
+    if (!isMobile) {
+        width = 320; // w-80 = 20rem = 320px
+        left = rect.right - width;
+        
+        // Ensure dropdown doesn't go off-screen on the left
+        if (left < 16) {
+            left = 16; // Add some padding from edge
+        }
+    }
+    
+    // Ensure dropdown doesn't go off-screen on the right
+    const maxRight = window.innerWidth - 16;
+    if (left + width > maxRight) {
+        left = maxRight - width;
+    }
+    
+    dropdownStyle.value = {
+        top: `${top}px`,
+        left: `${left}px`,
+        width: isMobile ? `${width}px` : `${width}px`,
+    };
+};
+
+const toggleDropdown = () => {
+    settingsStore.toggleCoachDropdown();
+    if (!showCoachDropdown.value) {
+        // Update position when opening
+        setTimeout(updateDropdownPosition, 0);
+    }
+};
+
+// Update position on window resize
+const handleResize = () => {
+    if (showCoachDropdown.value) {
+        updateDropdownPosition();
+    }
+};
+
+// Handle click outside
+const handleClickOutside = (event: MouseEvent) => {
+    const target = event.target as HTMLElement;
+    if (!target.closest('[data-dropdown]') && !buttonRef.value?.contains(target)) {
+        settingsStore.closeAllDropdowns();
+    }
+};
+
+// Watch for dropdown visibility changes
+const stopWatcher = watch(showCoachDropdown, (isVisible) => {
+    if (isVisible) {
+        updateDropdownPosition();
+        window.addEventListener('resize', handleResize);
+        window.addEventListener('scroll', updateDropdownPosition, true);
+        // Add click outside handler
+        setTimeout(() => {
+            document.addEventListener('click', handleClickOutside);
+        }, 0);
+    } else {
+        window.removeEventListener('resize', handleResize);
+        window.removeEventListener('scroll', updateDropdownPosition, true);
+        document.removeEventListener('click', handleClickOutside);
+    }
+});
+
+onUnmounted(() => {
+    stopWatcher();
+    window.removeEventListener('resize', handleResize);
+    window.removeEventListener('scroll', updateDropdownPosition, true);
+    document.removeEventListener('click', handleClickOutside);
+});
+
+const selectTemplate = (template: any) => {
+    realtimeStore.setSelectedTemplate(template);
+    settingsStore.closeAllDropdowns();
+    settingsStore.setTemplateSearchQuery('');
+};
+
+const getIconEmoji = (icon?: string) => {
+    if (!icon) return '📋';
+    
+    const iconMap: Record<string, string> = {
+        'discovery': '🔍',
+        'demo': '🎯',
+        'negotiation': '💰',
+        'support': '🛟',
+        'onboarding': '🚀',
+        'feedback': '💭',
+        'renewal': '🔄',
+        'upsell': '📈',
+        'default': '📋'
+    };
+    
+    return iconMap[icon] || iconMap.default;
+};
+</script>
\ No newline at end of file
diff --git a/resources/js/components/RealtimeAgent/Navigation/ConnectionStatus.vue b/resources/js/components/RealtimeAgent/Navigation/ConnectionStatus.vue
new file mode 100644
index 0000000..48ad05e
--- /dev/null
+++ b/resources/js/components/RealtimeAgent/Navigation/ConnectionStatus.vue
@@ -0,0 +1,43 @@
+<template>
+    <div class="flex items-center gap-1.5">
+        <div class="relative">
+            <div
+                :class="[
+                    'h-2 w-2 rounded-full transition-all duration-300',
+                    connectionStatus === 'connected'
+                        ? 'bg-green-500'
+                        : connectionStatus === 'connecting'
+                          ? 'bg-yellow-500'
+                          : 'bg-gray-400',
+                ]"
+            ></div>
+            <!-- Pulse animation for connecting state -->
+            <div
+                v-if="connectionStatus === 'connecting'"
+                class="absolute inset-0 h-2 w-2 animate-ping rounded-full bg-yellow-500 opacity-75"
+            ></div>
+        </div>
+        <span class="text-xs font-medium capitalize">
+            <span v-if="connectionStatus === 'connected'" class="text-green-600 dark:text-green-400">
+                Connected
+            </span>
+            <span v-else-if="connectionStatus === 'connecting'" class="text-yellow-600 dark:text-yellow-400">
+                Connecting...
+            </span>
+            <span v-else class="text-gray-500 dark:text-gray-400">
+                Not Connected
+            </span>
+        </span>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRealtimeAgentStore } from '@/stores/realtimeAgent';
+
+// Store
+const realtimeStore = useRealtimeAgentStore();
+
+// Computed
+const connectionStatus = computed(() => realtimeStore.connectionStatus);
+</script>
\ No newline at end of file
diff --git a/resources/js/components/RealtimeAgent/Navigation/MobileMenu.vue b/resources/js/components/RealtimeAgent/Navigation/MobileMenu.vue
new file mode 100644
index 0000000..7c9225f
--- /dev/null
+++ b/resources/js/components/RealtimeAgent/Navigation/MobileMenu.vue
@@ -0,0 +1,200 @@
+<template>
+    <div
+        v-if="showMobileMenu"
+        class="animate-fadeIn fixed top-10 right-0 left-0 z-[100] max-h-[80vh] overflow-y-auto border-b border-gray-200 bg-white shadow-lg md:hidden dark:border-gray-700 dark:bg-gray-900"
+        @click.stop
+    >
+        <div class="space-y-3 px-4 py-3">
+            <!-- Coach Selector in Mobile Menu -->
+            <div class="border-b border-gray-100 pb-3 dark:border-gray-800">
+                <button
+                    @click.stop="toggleCoachDropdown"
+                    :disabled="isActive"
+                    class="flex w-full items-center justify-between text-xs text-gray-600 dark:text-gray-400"
+                    :class="{ 'cursor-not-allowed opacity-50': isActive }"
+                    type="button"
+                >
+                    <span>
+                        Coach: 
+                        <span class="font-medium text-gray-800 dark:text-gray-200">
+                            {{ selectedTemplate?.name || 'Select' }}
+                        </span>
+                    </span>
+                    <svg
+                        class="h-3 w-3 transition-transform"
+                        :class="{ 'rotate-180': showCoachDropdown }"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                    >
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                    </svg>
+                </button>
+
+                <!-- Coach Dropdown inside Mobile Menu -->
+                <div v-if="showCoachDropdown" class="mt-2 rounded-lg bg-gray-50 p-2 dark:bg-gray-800">
+                    <!-- Search Input -->
+                    <input
+                        v-model="searchQuery"
+                        type="text"
+                        placeholder="Search templates..."
+                        class="mb-2 w-full rounded border border-gray-200 bg-white px-2 py-1 text-xs focus:ring-1 focus:ring-blue-500 focus:outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
+                        @click.stop
+                    />
+                    <div class="max-h-36 overflow-y-auto">
+                        <div v-if="filteredTemplates.length === 0" class="p-2 text-center text-xs text-gray-600 dark:text-gray-400">
+                            No templates found
+                        </div>
+                        <button
+                            v-for="template in filteredTemplates"
+                            :key="template.id"
+                            @click.stop="selectTemplate(template)"
+                            class="w-full cursor-pointer rounded px-2 py-1.5 text-left transition-colors hover:bg-white dark:hover:bg-gray-700"
+                            :class="{ 'bg-blue-100': selectedTemplate?.id === template.id }"
+                        >
+                            <div class="pointer-events-none flex items-center gap-2">
+                                <span class="text-xs">{{ getIconEmoji(template.icon) }}</span>
+                                <p class="text-xs text-gray-900 dark:text-gray-100">{{ template.name }}</p>
+                            </div>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Connection Status -->
+            <div class="flex items-center justify-between">
+                <span class="text-xs text-gray-600 dark:text-gray-400">Connection</span>
+                <ConnectionStatus />
+            </div>
+
+            <!-- Screen Protection -->
+            <button
+                @click="toggleProtection"
+                class="flex w-full items-center justify-between text-xs"
+                :class="[
+                    isProtectionSupported
+                        ? isProtectionEnabled
+                            ? 'text-green-600 dark:text-green-400'
+                            : 'text-gray-600 dark:text-gray-400'
+                        : 'text-orange-600 dark:text-orange-400',
+                ]"
+            >
+                <span>Screen Protection</span>
+                <span class="font-medium">
+                    {{ protectionStatusText }}
+                </span>
+            </button>
+
+            <!-- Overlay Mode -->
+            <button
+                v-if="isOverlaySupported"
+                @click="toggleOverlay"
+                class="flex w-full items-center justify-between text-xs"
+                :class="[
+                    isOverlayMode 
+                        ? 'text-blue-600 dark:text-blue-400' 
+                        : 'text-gray-600 dark:text-gray-400'
+                ]"
+            >
+                <span>Overlay Mode</span>
+                <span class="font-medium">{{ isOverlayMode ? 'ON' : 'OFF' }}</span>
+            </button>
+
+            <!-- Call History Link -->
+            <button
+                @click="handleDashboardClick"
+                :disabled="isActive"
+                class="w-full border-t border-gray-100 pt-3 text-left text-xs text-gray-600 dark:border-gray-800 dark:text-gray-400"
+                :class="{ 'cursor-not-allowed opacity-50': isActive }"
+            >
+                View Call History →
+            </button>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRealtimeAgentStore } from '@/stores/realtimeAgent';
+import { useSettingsStore } from '@/stores/settings';
+import ConnectionStatus from './ConnectionStatus.vue';
+
+// Emit events
+const emit = defineEmits<{
+    dashboardClick: [];
+}>();
+
+// Stores
+const realtimeStore = useRealtimeAgentStore();
+const settingsStore = useSettingsStore();
+
+// Computed
+const showMobileMenu = computed(() => settingsStore.showMobileMenu);
+const showCoachDropdown = computed(() => settingsStore.showCoachDropdown);
+const isActive = computed(() => realtimeStore.isActive);
+const selectedTemplate = computed(() => realtimeStore.selectedTemplate);
+const templates = computed(() => realtimeStore.templates);
+const searchQuery = computed({
+    get: () => settingsStore.templateSearchQuery,
+    set: (value) => settingsStore.setTemplateSearchQuery(value)
+});
+const isProtectionEnabled = computed(() => settingsStore.isProtectionEnabled);
+const isProtectionSupported = computed(() => settingsStore.isProtectionSupported);
+const protectionStatusText = computed(() => settingsStore.protectionStatusText);
+const isOverlayMode = computed(() => settingsStore.isOverlayMode);
+const isOverlaySupported = computed(() => settingsStore.isOverlaySupported);
+
+const filteredTemplates = computed(() => {
+    if (!searchQuery.value) return templates.value;
+    
+    const query = searchQuery.value.toLowerCase();
+    return templates.value.filter(template => 
+        template.name.toLowerCase().includes(query)
+    );
+});
+
+// Methods
+const toggleCoachDropdown = () => {
+    settingsStore.showCoachDropdown = !settingsStore.showCoachDropdown;
+};
+
+const selectTemplate = (template: any) => {
+    realtimeStore.setSelectedTemplate(template);
+    settingsStore.closeAllDropdowns();
+    settingsStore.setTemplateSearchQuery('');
+};
+
+const toggleProtection = () => {
+    settingsStore.toggleProtection();
+    settingsStore.closeAllDropdowns();
+};
+
+const toggleOverlay = () => {
+    settingsStore.toggleOverlayMode();
+    settingsStore.closeAllDropdowns();
+};
+
+const handleDashboardClick = () => {
+    emit('dashboardClick');
+    settingsStore.closeAllDropdowns();
+};
+
+
+const getIconEmoji = (icon?: string) => {
+    if (!icon) return '📋';
+    
+    const iconMap: Record<string, string> = {
+        'discovery': '🔍',
+        'demo': '🎯',
+        'negotiation': '💰',
+        'support': '🛟',
+        'onboarding': '🚀',
+        'feedback': '💭',
+        'renewal': '🔄',
+        'upsell': '📈',
+        'default': '📋'
+    };
+    
+    return iconMap[icon] || iconMap.default;
+};
+</script>
\ No newline at end of file
diff --git a/resources/js/components/RealtimeAgent/Navigation/MockModeToggle.vue b/resources/js/components/RealtimeAgent/Navigation/MockModeToggle.vue
new file mode 100644
index 0000000..61c9493
--- /dev/null
+++ b/resources/js/components/RealtimeAgent/Navigation/MockModeToggle.vue
@@ -0,0 +1,35 @@
+<template>
+    <div class="flex items-center gap-2">
+        <label class="text-xs text-gray-600 dark:text-gray-400">Mock Data</label>
+        <button
+            @click="toggleMockMode"
+            class="relative inline-flex h-5 w-9 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900"
+            :class="isMockMode ? 'bg-green-500' : 'bg-gray-300 dark:bg-gray-600'"
+            :aria-checked="isMockMode"
+            role="switch"
+        >
+            <span class="sr-only">Toggle mock data mode</span>
+            <span
+                class="inline-block h-3.5 w-3.5 transform rounded-full bg-white transition-transform"
+                :class="isMockMode ? 'translate-x-4' : 'translate-x-0.5'"
+            />
+        </button>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRealtimeAgentStore } from '@/stores/realtimeAgent';
+
+const realtimeStore = useRealtimeAgentStore();
+
+const isMockMode = computed(() => realtimeStore.isMockMode);
+
+const toggleMockMode = () => {
+    if (isMockMode.value) {
+        realtimeStore.disableMockMode();
+    } else {
+        realtimeStore.enableMockMode();
+    }
+};
+</script>
\ No newline at end of file
diff --git a/resources/js/components/RealtimeAgent/Navigation/OverlayModeToggle.vue b/resources/js/components/RealtimeAgent/Navigation/OverlayModeToggle.vue
new file mode 100644
index 0000000..61e1f2e
--- /dev/null
+++ b/resources/js/components/RealtimeAgent/Navigation/OverlayModeToggle.vue
@@ -0,0 +1,60 @@
+<template>
+    <button
+        @click="toggleOverlayMode"
+        class="flex items-center gap-1.5 text-xs transition-colors"
+        :class="[
+            isOverlayMode
+                ? 'text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300'
+                : 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100',
+        ]"
+        :title="isOverlayMode ? 'Exit overlay mode' : 'Enter overlay mode'"
+    >
+        <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path
+                v-if="!isOverlayMode"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"
+            />
+            <path
+                v-else
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+            />
+        </svg>
+        <span class="font-medium">
+            {{ overlayStatusText }}
+        </span>
+    </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useSettingsStore } from '@/stores/settings';
+import { useOverlayMode } from '@/composables/useOverlayMode';
+
+// Store
+const settingsStore = useSettingsStore();
+
+// Composable
+const { isOverlayMode: overlayModeState, toggleOverlayMode: toggleOverlayModeComposable } = useOverlayMode();
+
+// Computed - use the composable's state which is the source of truth
+const isOverlayMode = computed(() => overlayModeState.value);
+const overlayStatusText = computed(() => isOverlayMode.value ? 'Normal' : 'Overlay');
+
+// Methods
+const toggleOverlayMode = () => {
+    // Use the composable's toggle function which handles window transparency
+    const result = toggleOverlayModeComposable();
+    
+    // Keep the settings store in sync with the composable state
+    // Use setOverlayMode to ensure the body class is properly managed
+    if (result) {
+        settingsStore.setOverlayMode(overlayModeState.value);
+    }
+};
+</script>
\ No newline at end of file
diff --git a/resources/js/components/RealtimeAgent/Navigation/ScreenProtectionToggle.vue b/resources/js/components/RealtimeAgent/Navigation/ScreenProtectionToggle.vue
new file mode 100644
index 0000000..3175f3d
--- /dev/null
+++ b/resources/js/components/RealtimeAgent/Navigation/ScreenProtectionToggle.vue
@@ -0,0 +1,68 @@
+<template>
+    <button
+        @click="toggleProtection"
+        class="flex items-center gap-1.5 text-xs transition-colors"
+        :class="[
+            isProtectionSupported
+                ? isProtectionEnabled
+                    ? 'text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300'
+                    : 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100'
+                : 'text-orange-600 hover:text-orange-700 dark:text-orange-400 dark:hover:text-orange-300',
+        ]"
+    >
+        <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path
+                v-if="isProtectionEnabled"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
+            />
+            <path
+                v-else
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M20.618 5.984A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
+            />
+        </svg>
+        <span class="font-medium">
+            {{ protectionStatusText }}
+        </span>
+    </button>
+</template>
+
+<script setup lang="ts">
+import { computed, watch } from 'vue';
+import { useSettingsStore } from '@/stores/settings';
+import { useScreenProtection } from '@/composables/useScreenProtection';
+
+// Store
+const settingsStore = useSettingsStore();
+
+// Screen protection composable
+const screenProtection = useScreenProtection();
+
+// Computed
+const isProtectionSupported = computed(() => screenProtection.isProtectionSupported.value);
+const isProtectionEnabled = computed(() => screenProtection.isProtectionEnabled.value);
+const protectionStatusText = computed(() => {
+    if (!isProtectionSupported.value) return 'N/A';
+    return isProtectionEnabled.value ? 'Protected' : 'Protect';
+});
+
+// Sync protection state with settings store
+watch(screenProtection.isProtectionEnabled, (enabled) => {
+    settingsStore.isProtectionEnabled = enabled;
+});
+
+watch(screenProtection.isProtectionSupported, (supported) => {
+    settingsStore.setProtectionSupported(supported);
+});
+
+// Methods
+const toggleProtection = () => {
+    // Use the actual screen protection composable to toggle
+    screenProtection.toggleProtection();
+};
+</script>
\ No newline at end of file
diff --git a/resources/js/components/RealtimeAgent/Navigation/TitleBar.vue b/resources/js/components/RealtimeAgent/Navigation/TitleBar.vue
new file mode 100644
index 0000000..f06e189
--- /dev/null
+++ b/resources/js/components/RealtimeAgent/Navigation/TitleBar.vue
@@ -0,0 +1,137 @@
+<template>
+    <div
+        class="title-bar flex h-10 flex-shrink-0 items-center border-b border-gray-200 bg-gray-50 px-3 md:px-6 dark:border-gray-700 dark:bg-gray-900"
+        style="-webkit-app-region: drag"
+    >
+        <!-- Left: App Title (with space for macOS controls) -->
+        <div class="flex-1 pl-16 md:pl-20">
+            <span class="text-xs font-semibold text-gray-800 md:text-sm dark:text-gray-200">
+                {{ title }}
+            </span>
+        </div>
+
+        <!-- Mobile Menu Button (visible on small screens) -->
+        <button
+            @click="toggleMobileMenu"
+            class="p-1.5 text-gray-600 transition-colors hover:text-gray-900 md:hidden dark:text-gray-400 dark:hover:text-gray-100"
+            style="-webkit-app-region: no-drag"
+        >
+            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path 
+                    v-if="!showMobileMenu" 
+                    stroke-linecap="round" 
+                    stroke-linejoin="round" 
+                    stroke-width="2" 
+                    d="M4 6h16M4 12h16M4 18h16" 
+                />
+                <path 
+                    v-else 
+                    stroke-linecap="round" 
+                    stroke-linejoin="round" 
+                    stroke-width="2" 
+                    d="M6 18L18 6M6 6l12 12" 
+                />
+            </svg>
+        </button>
+
+        <!-- Right Side: All Controls (hidden on mobile, visible on desktop) -->
+        <div class="hidden items-center gap-4 md:flex lg:gap-6" style="-webkit-app-region: no-drag">
+            <!-- Coach Selector -->
+            <CoachSelector />
+
+            <!-- Connection Status -->
+            <ConnectionStatus />
+
+            <!-- Divider -->
+            <div class="h-4 w-px bg-gray-300 dark:bg-gray-600"></div>
+
+            <!-- Screen Protection Toggle -->
+            <ScreenProtectionToggle />
+
+            <!-- Overlay Mode Toggle -->
+            <OverlayModeToggle v-if="isOverlaySupported" />
+
+            <!-- Actions -->
+            <button
+                @click="handleDashboardClick"
+                :disabled="isActive"
+                class="text-xs font-medium text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"
+                :class="{ 'cursor-not-allowed opacity-50': isActive }"
+            >
+                Call History
+            </button>
+            
+            <button
+                @click="toggleSession"
+                class="rounded-md px-4 py-1.5 text-xs font-medium transition-colors"
+                :class="[
+                    isActive 
+                        ? 'bg-red-500 text-white hover:bg-red-600' 
+                        : 'bg-blue-500 text-white hover:bg-blue-600'
+                ]"
+            >
+                {{ isActive ? 'End Call' : 'Start Call' }}
+            </button>
+        </div>
+
+        <!-- Mobile-visible Start/End Call button -->
+        <button
+            @click="toggleSession"
+            class="ml-2 rounded-md px-3 py-1 text-xs font-medium transition-colors md:hidden"
+            style="-webkit-app-region: no-drag"
+            :class="[
+                isActive 
+                    ? 'bg-red-500 text-white hover:bg-red-600' 
+                    : 'bg-blue-500 text-white hover:bg-blue-600'
+            ]"
+        >
+            {{ isActive ? 'End' : 'Start' }}
+        </button>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRealtimeAgentStore } from '@/stores/realtimeAgent';
+import { useSettingsStore } from '@/stores/settings';
+import CoachSelector from './CoachSelector.vue';
+import ConnectionStatus from './ConnectionStatus.vue';
+import ScreenProtectionToggle from './ScreenProtectionToggle.vue';
+import OverlayModeToggle from './OverlayModeToggle.vue';
+
+// Props
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const props = withDefaults(defineProps<{
+    title?: string;
+}>(), {
+    title: 'Clueless'
+});
+
+// Emit events
+const emit = defineEmits<{
+    dashboardClick: [];
+    toggleSession: [];
+}>();
+
+// Stores
+const realtimeStore = useRealtimeAgentStore();
+const settingsStore = useSettingsStore();
+
+// Computed
+const isActive = computed(() => realtimeStore.isActive);
+const showMobileMenu = computed(() => settingsStore.showMobileMenu);
+const isOverlaySupported = computed(() => settingsStore.isOverlaySupported);
+
+// Methods
+const toggleMobileMenu = () => {
+    settingsStore.toggleMobileMenu();
+};
+
+const handleDashboardClick = () => {
+    emit('dashboardClick');
+};
+
+const toggleSession = () => {
+    emit('toggleSession');
+};
+</script>
\ No newline at end of file
diff --git a/resources/js/composables/useScreenProtection.ts b/resources/js/composables/useScreenProtection.ts
index 0aa6fce..ee2e038 100644
--- a/resources/js/composables/useScreenProtection.ts
+++ b/resources/js/composables/useScreenProtection.ts
@@ -42,6 +42,7 @@ export function useScreenProtection() {
     const checkSupport = () => {
         // Try different methods to access Electron APIs
         try {
+            
             // Method 1: Check if window.remote is available (NativePHP exposes this)
             if (window.remote && typeof window.remote.getCurrentWindow === 'function') {
                 const currentWindow = window.remote.getCurrentWindow();
@@ -60,7 +61,9 @@ export function useScreenProtection() {
             // Method 3: Check if we're in Electron environment
             if (window.electron || (window as any).process?.versions?.electron) {
             }
-        } catch {}
+        } catch (error) {
+            console.error('Error checking screen protection support:', error);
+        }
 
         isProtectionSupported.value = false;
         protectionStatus.value = 'unsupported';
@@ -80,27 +83,40 @@ export function useScreenProtection() {
             // Method 1: Try window.remote first (NativePHP)
             if (window.remote && typeof window.remote.getCurrentWindow === 'function') {
                 const currentWindow = window.remote.getCurrentWindow();
+                
                 if (currentWindow && typeof currentWindow.setContentProtection === 'function') {
-                    currentWindow.setContentProtection(newState);
-
-                    // Additional protection methods for macOS
-                    if (newState && process.platform === 'darwin') {
-                        // Try to set additional privacy settings
-                        try {
-                            // Set window level to be excluded from screen capture
-                            if (typeof currentWindow.setVisibleOnAllWorkspaces === 'function') {
-                                currentWindow.setVisibleOnAllWorkspaces(true, { visibleOnFullScreen: true });
-                                currentWindow.setVisibleOnAllWorkspaces(false);
-                            }
-
-                            // Set window to be excluded from mission control
-                            if (typeof currentWindow.setExcludedFromShownWindowsMenu === 'function') {
-                                currentWindow.setExcludedFromShownWindowsMenu(true);
+                    try {
+                        currentWindow.setContentProtection(newState);
+                        
+                        // Additional protection methods for macOS
+                        if (newState && (window as any).process?.platform === 'darwin') {
+                            // Try to set additional privacy settings
+                            try {
+                                // Set window level to be excluded from screen capture
+                                if (typeof currentWindow.setVisibleOnAllWorkspaces === 'function') {
+                                    currentWindow.setVisibleOnAllWorkspaces(true, { visibleOnFullScreen: true });
+                                    currentWindow.setVisibleOnAllWorkspaces(false);
+                                }
+
+                                // Set window to be excluded from mission control
+                                if (typeof currentWindow.setExcludedFromShownWindowsMenu === 'function') {
+                                    currentWindow.setExcludedFromShownWindowsMenu(true);
+                                }
+                                
+                                // Try sharingType method (newer Electron versions)
+                                if (typeof currentWindow.setSharingType === 'function') {
+                                    currentWindow.setSharingType('none');
+                                }
+                            } catch (e) {
+                                console.error('Error applying additional macOS protection:', e);
                             }
-                        } catch {}
+                        }
+                        
+                        success = true;
+                    } catch {
+                        // Silently ignore errors
                     }
-
-                    success = true;
+                } else {
                 }
             }
 
@@ -149,6 +165,33 @@ export function useScreenProtection() {
         return false;
     };
 
+    // Check if protection is actually active
+    const verifyProtection = () => {
+        if (!isProtectionSupported.value) return false;
+        
+        try {
+            if (window.remote && typeof window.remote.getCurrentWindow === 'function') {
+                const currentWindow = window.remote.getCurrentWindow();
+                
+                // Try to check if content protection is active
+                if (typeof currentWindow.isContentProtectionEnabled === 'function') {
+                    const isEnabled = currentWindow.isContentProtectionEnabled();
+                    return isEnabled;
+                }
+                
+                // For newer Electron versions, check sharingType
+                if (typeof currentWindow.getSharingType === 'function') {
+                    const sharingType = currentWindow.getSharingType();
+                    return sharingType === 'none';
+                }
+            }
+        } catch (error) {
+            console.error('Error verifying protection:', error);
+        }
+        
+        return isProtectionEnabled.value;
+    };
+
     // Initialize on mount
     onMounted(() => {
         // Add a small delay to ensure Electron APIs are loaded
@@ -158,6 +201,10 @@ export function useScreenProtection() {
                 const savedPreference = loadPreference();
                 if (savedPreference) {
                     enableProtection();
+                    // Verify after enabling
+                    setTimeout(() => {
+                        verifyProtection();
+                    }, 500);
                 }
             }
         }, 100);
@@ -188,5 +235,6 @@ export function useScreenProtection() {
         disableProtection,
         enableForCall,
         checkSupport,
+        verifyProtection,
     };
 }
diff --git a/resources/js/nativephp-extension.js b/resources/js/nativephp-extension.js
new file mode 100644
index 0000000..fb8f0d6
--- /dev/null
+++ b/resources/js/nativephp-extension.js
@@ -0,0 +1,192 @@
+// NativePHP Extension for Audio Loopback Support
+// This extension provides system audio capture functionality for Electron apps
+
+import { systemPreferences, app, ipcMain, session, desktopCapturer } from 'electron';
+
+// Store audio loopback state
+const audioLoopbackState = {
+  initialized: false,
+  handlerSet: false
+};
+
+export default {
+  // Hook into Electron lifecycle - called before app is ready
+  beforeReady: async (app) => {
+    console.log('[Extension] beforeReady hook called');
+    
+    // Method 1: Try to use electron-audio-loopback package if available
+    try {
+      const audioLoopbackModule = await import('electron-audio-loopback');
+      const initAudioLoopback = audioLoopbackModule.initMain;
+      
+      if (initAudioLoopback) {
+        console.log('[Extension] Initializing electron-audio-loopback package...');
+        initAudioLoopback();
+        audioLoopbackState.initialized = true;
+        console.log('[Extension] electron-audio-loopback initialized successfully');
+        
+        // The package should register its own IPC handlers, but let's verify
+        setTimeout(() => {
+          const hasEnableHandler = ipcMain.listenerCount('enable-loopback-audio') > 0;
+          const hasDisableHandler = ipcMain.listenerCount('disable-loopback-audio') > 0;
+          console.log('[Extension] IPC handler check:', {
+            'enable-loopback-audio': hasEnableHandler,
+            'disable-loopback-audio': hasDisableHandler
+          });
+        }, 100);
+        
+        return; // Package handles everything, no need for manual implementation
+      }
+    } catch (error) {
+      console.log('[Extension] electron-audio-loopback not available:', error.message);
+      console.log('[Extension] Falling back to manual implementation...');
+    }
+  },
+  
+  // Hook into Electron lifecycle - called after app is ready
+  afterReady: async (app, mainWindow) => {
+    console.log('[Extension Test] afterReady hook called', {
+      hasApp: !!app,
+      hasMainWindow: !!mainWindow
+    });
+    // Add any setup that needs to happen after app is ready
+  },
+  
+  // Hook into Electron lifecycle - called before app quits
+  beforeQuit: async () => {
+    console.log('[Extension Test] beforeQuit hook called');
+    // Add any cleanup that needs to happen before app quits
+  },
+  
+  // Custom IPC handlers for renderer communication
+  ipcHandlers: {
+    // Audio loopback handlers are now provided by the electron-audio-loopback package
+    // We don't need to register them here to avoid conflicts
+    
+    'test:ping': async (event, ...args) => {
+      console.log('[Extension Test] IPC handler test:ping called', { args });
+      return { 
+        success: true, 
+        message: 'Pong! Extension IPC handlers are working!',
+        timestamp: new Date().toISOString(),
+        receivedArgs: args
+      };
+    },
+    
+    'test:echo': async (event, message) => {
+      console.log('[Extension Test] IPC handler test:echo called', { message });
+      return { 
+        success: true, 
+        echo: message,
+        processedAt: new Date().toISOString()
+      };
+    },
+    
+    'test:get-info': async (event) => {
+      console.log('[Extension Test] IPC handler test:get-info called');
+      return {
+        success: true,
+        info: {
+          extensionVersion: '1.0.0',
+          nodeVersion: process.version,
+          platform: process.platform,
+          arch: process.arch
+        }
+      };
+    }
+  },
+
+  // Preload script extensions - APIs to expose to the renderer  
+  // NOTE: The NativePHP preload already exposes window.audioLoopback, so we don't need to do it here
+  // The frontend should use window.Native.ipcRendererInvoke['enable-loopback-audio']() which is already available
+  
+  // Custom API endpoints accessible from Laravel
+  apiRoutes: (router) => {
+    // Screen recording permission check for macOS
+    router.get('/api/system/screen-recording-access', (req, res) => {
+      console.log('[Extension] API route GET /api/system/screen-recording-access called');
+      
+      if (process.platform === 'darwin') {
+        // On macOS, check if we have screen recording permission
+        const status = systemPreferences.getMediaAccessStatus('screen');
+        res.json({ 
+          status,
+          platform: 'darwin',
+          hasAccess: status === 'granted'
+        });
+      } else {
+        // Non-macOS platforms don't need this permission
+        res.json({ 
+          status: 'granted',
+          platform: process.platform,
+          hasAccess: true
+        });
+      }
+    });
+    
+    // Test endpoint - GET
+    router.get('/api/test/status', (req, res) => {
+      console.log('[Extension Test] API route GET /api/test/status called');
+      res.json({ 
+        status: 'ok',
+        message: 'Extension API routes are working!',
+        timestamp: new Date().toISOString()
+      });
+    });
+    
+    // Test endpoint - POST
+    router.post('/api/test/echo', (req, res) => {
+      const { message } = req.body;
+      console.log('[Extension Test] API route POST /api/test/echo called', { message });
+      res.json({ 
+        success: true,
+        echo: message,
+        processedAt: new Date().toISOString()
+      });
+    });
+    
+    // Test endpoint - GET with params
+    router.get('/api/test/info/:param', (req, res) => {
+      const { param } = req.params;
+      console.log('[Extension Test] API route GET /api/test/info/:param called', { param });
+      res.json({
+        success: true,
+        receivedParam: param,
+        query: req.query,
+        headers: req.headers
+      });
+    });
+    
+    // Media access status endpoint
+    router.get('/api/system/media-access-status/:mediaType', (req, res) => {
+      const { mediaType } = req.params;
+      console.log('[Extension Test] API route GET /api/system/media-access-status/:mediaType called', { mediaType });
+      
+      if (process.platform === 'darwin') {
+        const status = systemPreferences.getMediaAccessStatus(mediaType);
+        res.json({ status });
+      } else {
+        res.json({ status: 'granted' }); // Non-macOS platforms don't have this API
+      }
+    });
+    
+    // Ask for media access endpoint
+    router.post('/api/system/ask-for-media-access', async (req, res) => {
+      const { mediaType } = req.body;
+      console.log('[Extension Test] API route POST /api/system/ask-for-media-access called', { mediaType });
+      
+      if (process.platform === 'darwin') {
+        try {
+          const granted = await systemPreferences.askForMediaAccess(mediaType);
+          res.json({ granted });
+        } catch (e) {
+          res.status(400).json({
+            error: e.message,
+          });
+        }
+      } else {
+        res.json({ granted: true }); // Non-macOS platforms don't need this
+      }
+    });
+  }
+};
\ No newline at end of file
diff --git a/resources/js/pages/AudioTest/Index.vue b/resources/js/pages/AudioTest/Index.vue
new file mode 100644
index 0000000..ee155fd
--- /dev/null
+++ b/resources/js/pages/AudioTest/Index.vue
@@ -0,0 +1,313 @@
+<template>
+    <div class="min-h-screen bg-gray-50 dark:bg-gray-900">
+        <!-- Navigation Bar -->
+        <div class="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="flex justify-between items-center h-16">
+                    <h1 class="text-xl font-semibold text-gray-900 dark:text-white">Audio Test</h1>
+                    <nav class="flex space-x-4">
+                        <a
+                            href="/audio-test"
+                            class="text-sm font-medium text-blue-600 dark:text-blue-400"
+                        >
+                            Audio Test
+                        </a>
+                        <a
+                            href="/realtime-agent"
+                            class="text-sm font-medium text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"
+                        >
+                            Agent V1
+                        </a>
+                        <a
+                            href="/realtime-agent-v2"
+                            class="text-sm font-medium text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"
+                        >
+                            Agent V2
+                        </a>
+                    </nav>
+                </div>
+            </div>
+        </div>
+        
+        <div class="max-w-4xl mx-auto p-8">
+            <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-8">Mic & System Audio Test</h2>
+            
+            <!-- Controls -->
+            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-6">
+                <div class="flex gap-4 mb-4">
+                    <button
+                        @click="startStreaming"
+                        :disabled="isStreaming"
+                        class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed"
+                    >
+                        Start Streaming
+                    </button>
+                    <button
+                        @click="stopStreaming"
+                        :disabled="!isStreaming"
+                        class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed"
+                    >
+                        Stop Streaming
+                    </button>
+                    
+                    <select v-model="selectedModel" class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md dark:bg-gray-700 dark:text-white">
+                        <option value="whisper-1">whisper-1</option>
+                        <option value="gpt-4o-transcribe">gpt-4o-transcribe</option>
+                        <option value="gpt-4o-mini-transcribe">gpt-4o-mini-transcribe</option>
+                    </select>
+                </div>
+                
+                <!-- Status Indicators -->
+                <div class="flex gap-4">
+                    <div class="flex items-center">
+                        <div :class="['w-3 h-3 rounded-full mr-2', micStatus ? 'bg-green-500' : 'bg-red-500']"></div>
+                        <span class="text-sm text-gray-700 dark:text-gray-300">Microphone</span>
+                    </div>
+                    <div class="flex items-center">
+                        <div :class="['w-3 h-3 rounded-full mr-2', systemStatus ? 'bg-green-500' : 'bg-red-500']"></div>
+                        <span class="text-sm text-gray-700 dark:text-gray-300">System Audio</span>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Transcription Results -->
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <!-- Microphone Transcription -->
+                <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
+                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Microphone Transcription</h2>
+                    <div class="h-64 overflow-y-auto bg-gray-50 dark:bg-gray-900 rounded p-4">
+                        <pre class="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap">{{ micTranscript || 'Waiting for microphone input...' }}</pre>
+                    </div>
+                </div>
+                
+                <!-- System Audio Transcription -->
+                <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
+                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">System Audio Transcription</h2>
+                    <div class="h-64 overflow-y-auto bg-gray-50 dark:bg-gray-900 rounded p-4">
+                        <pre class="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap">{{ systemTranscript || 'Waiting for system audio...' }}</pre>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onUnmounted } from 'vue'
+
+// State
+const isStreaming = ref(false)
+const micStatus = ref(false)
+const systemStatus = ref(false)
+const selectedModel = ref('gpt-4o-mini-transcribe')
+const micTranscript = ref('')
+const systemTranscript = ref('')
+
+// WebSocket connections
+let micSession: any = null
+let systemSession: any = null
+let micStream: MediaStream | null = null
+let systemStream: MediaStream | null = null
+
+// Get API key from env
+const apiKey = import.meta.env.VITE_OPENAI_API_KEY || ''
+
+// Check if we have an API key
+if (!apiKey) {
+    console.error('No OpenAI API key found. Please set VITE_OPENAI_API_KEY in your .env file')
+}
+
+// Session class (simplified from mic-speaker-streamer)
+class Session {
+    private ws: WebSocket | null = null
+    private pc: RTCPeerConnection | null = null
+    private dc: RTCDataChannel | null = null
+    
+    constructor(
+        private apiKey: string,
+        private streamType: string,
+        private onMessage: (data: any) => void,
+        private onStatusChange: (connected: boolean) => void
+    ) {}
+    
+    async startTranscription(stream: MediaStream, model: string) {
+        this.pc = new RTCPeerConnection()
+        this.pc.addTrack(stream.getTracks()[0])
+        
+        this.pc.onconnectionstatechange = () => {
+            this.onStatusChange(this.pc?.connectionState === 'connected')
+        }
+        
+        this.dc = this.pc.createDataChannel('')
+        this.dc.onmessage = (e) => this.onMessage(JSON.parse(e.data))
+        
+        const offer = await this.pc.createOffer()
+        await this.pc.setLocalDescription(offer)
+        
+        // Get ephemeral token
+        const tokenResponse = await fetch('https://api.openai.com/v1/realtime/transcription_sessions', {
+            method: 'POST',
+            headers: {
+                'Authorization': `Bearer ${this.apiKey}`,
+                'openai-beta': 'realtime-v1',
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                input_audio_transcription: {
+                    model: model,
+                    prompt: ""
+                },
+                turn_detection: {
+                    type: "server_vad",
+                    silence_duration_ms: 10
+                }
+            })
+        })
+        
+        if (!tokenResponse.ok) {
+            throw new Error('Failed to get session token')
+        }
+        
+        const sessionData = await tokenResponse.json()
+        const clientSecret = sessionData.client_secret.value
+        
+        // Exchange SDP
+        const sdpResponse = await fetch('https://api.openai.com/v1/realtime', {
+            method: 'POST',
+            body: offer.sdp,
+            headers: {
+                'Authorization': `Bearer ${clientSecret}`,
+                'Content-Type': 'application/sdp'
+            }
+        })
+        
+        if (!sdpResponse.ok) {
+            throw new Error('Failed to exchange SDP')
+        }
+        
+        const answer = {
+            type: 'answer' as RTCSdpType,
+            sdp: await sdpResponse.text()
+        }
+        
+        await this.pc.setRemoteDescription(answer)
+    }
+    
+    stop() {
+        this.dc?.close()
+        this.pc?.close()
+        this.ws?.close()
+    }
+}
+
+// Start streaming
+const startStreaming = async () => {
+    try {
+        // Check API key first
+        if (!apiKey) {
+            throw new Error('No OpenAI API key configured. Please add VITE_OPENAI_API_KEY to your .env file')
+        }
+        
+        isStreaming.value = true
+        
+        // Get microphone stream
+        micStream = await navigator.mediaDevices.getUserMedia({ audio: true })
+        // Check if audio loopback is available
+        
+        // Enable audio loopback for system audio if available
+        if ((window as any).audioLoopback) {
+            try {
+                await (window as any).audioLoopback.enableLoopback()
+            } catch {
+            }
+        }
+        
+        // Get system audio stream (screen share with audio)
+        const displayStream = await navigator.mediaDevices.getDisplayMedia({
+            audio: true,
+            video: true
+        })
+        
+        // Disable audio loopback if it was enabled
+        if ((window as any).audioLoopback) {
+            try {
+                await (window as any).audioLoopback.disableLoopback()
+            } catch {
+            }
+        }
+        
+        // Remove video tracks, keep only audio
+        const videoTracks = displayStream.getTracks().filter(t => t.kind === 'video')
+        videoTracks.forEach(t => {
+            t.stop()
+            displayStream.removeTrack(t)
+        })
+        
+        systemStream = displayStream
+        
+        // Create sessions
+        micSession = new Session(
+            apiKey,
+            'microphone',
+            (data) => handleMicMessage(data),
+            (connected) => { micStatus.value = connected }
+        )
+        
+        systemSession = new Session(
+            apiKey,
+            'system',
+            (data) => handleSystemMessage(data),
+            (connected) => { systemStatus.value = connected }
+        )
+        
+        // Start transcription
+        await Promise.all([
+            micSession.startTranscription(micStream, selectedModel.value),
+            systemSession.startTranscription(systemStream, selectedModel.value)
+        ])
+        
+    } catch (error) {
+        console.error('Error starting streaming:', error)
+        alert('Error: ' + (error as Error).message)
+        stopStreaming()
+    }
+}
+
+// Stop streaming
+const stopStreaming = () => {
+    isStreaming.value = false
+    micStatus.value = false
+    systemStatus.value = false
+    
+    micSession?.stop()
+    systemSession?.stop()
+    
+    micStream?.getTracks().forEach(t => t.stop())
+    systemStream?.getTracks().forEach(t => t.stop())
+    
+    micSession = null
+    systemSession = null
+    micStream = null
+    systemStream = null
+}
+
+// Handle messages
+const handleMicMessage = (data: any) => {
+    if (data.type === 'conversation.item.input_audio_transcription.completed') {
+        const timestamp = new Date().toLocaleTimeString()
+        micTranscript.value += `[${timestamp}] ${data.transcript}\n`
+    }
+}
+
+const handleSystemMessage = (data: any) => {
+    if (data.type === 'conversation.item.input_audio_transcription.completed') {
+        const timestamp = new Date().toLocaleTimeString()
+        systemTranscript.value += `[${timestamp}] ${data.transcript}\n`
+    }
+}
+
+// Cleanup
+onUnmounted(() => {
+    stopStreaming()
+})
+</script>
\ No newline at end of file
diff --git a/resources/js/pages/Conversations/Index.vue b/resources/js/pages/Conversations/Index.vue
index 8ed9193..a0a16fe 100644
--- a/resources/js/pages/Conversations/Index.vue
+++ b/resources/js/pages/Conversations/Index.vue
@@ -82,7 +82,7 @@ const navigateToConversation = (sessionId: number) => {
 };
 
 const startNewCall = () => {
-    router.visit('/realtime-agent');
+    router.visit('/realtime-agent-v2');
 };
 
 const goToPage = (page: number) => {
diff --git a/resources/js/pages/Dashboard.vue b/resources/js/pages/Dashboard.vue
index bfec344..f6654fb 100644
--- a/resources/js/pages/Dashboard.vue
+++ b/resources/js/pages/Dashboard.vue
@@ -18,7 +18,7 @@ const features = [
         icon: Mic,
         title: 'Realtime Agent',
         description: 'Voice conversations with real-time AI coaching',
-        href: '/realtime-agent',
+        href: '/realtime-agent-v2',
         color: 'text-green-600 dark:text-green-400',
     },
     {
diff --git a/resources/js/pages/Onboarding.vue b/resources/js/pages/Onboarding.vue
index 6287612..d7f1419 100644
--- a/resources/js/pages/Onboarding.vue
+++ b/resources/js/pages/Onboarding.vue
@@ -287,6 +287,6 @@ const openOpenAI = async () => {
 
 const completeOnboarding = () => {
     // Navigate to realtime agent
-    router.visit('/realtime-agent');
+    router.visit('/realtime-agent-v2');
 };
 </script>
diff --git a/resources/js/pages/RealtimeAgent/Main.vue b/resources/js/pages/RealtimeAgent/Main.vue
index 6156719..8c0af02 100644
--- a/resources/js/pages/RealtimeAgent/Main.vue
+++ b/resources/js/pages/RealtimeAgent/Main.vue
@@ -1007,11 +1007,6 @@ const scrollTranscriptToTop = () => {
     nextTick(() => {
         if (transcriptContainer.value) {
             // For flex-col-reverse, scrolling to max height shows the newest messages
-            console.log('🔄 Auto-scrolling transcript:', {
-                scrollHeight: transcriptContainer.value.scrollHeight,
-                clientHeight: transcriptContainer.value.clientHeight,
-                currentScrollTop: transcriptContainer.value.scrollTop,
-            });
             transcriptContainer.value.scrollTop = transcriptContainer.value.scrollHeight;
         }
     });
@@ -1101,7 +1096,6 @@ const skipCustomerInfo = async () => {
 
 const startSession = async () => {
     try {
-        console.log('🚀 Starting Dual-Agent Realtime session...');
         connectionStatus.value = 'connecting';
         callStartTime.value = new Date();
         callDurationSeconds.value = 0;
@@ -1141,16 +1135,13 @@ const startSession = async () => {
         const wsUrl = `wss://api.openai.com/v1/realtime?model=gpt-4o-mini-realtime-preview-2024-12-17`;
 
         // 1. Salesperson Transcriber - Simple transcription only
-        console.log('🎤 Connecting Salesperson Transcriber...');
         wsSalesperson = new WebSocket(wsUrl, ['realtime', `openai-insecure-api-key.${ephemeralKey}`, 'openai-beta.realtime-v1']);
 
         // 2. Customer Coach Agent - System audio + Real-time coaching
-        console.log('🧠 Connecting Customer Coach Agent...');
         wsCustomerCoach = new WebSocket(wsUrl, ['realtime', `openai-insecure-api-key.${ephemeralKey}`, 'openai-beta.realtime-v1']);
 
         // Set up Salesperson Agent (Microphone only)
         wsSalesperson.onopen = () => {
-            console.log('✅ Salesperson Agent connected');
 
             // Add small delay to ensure WebSocket is ready
             setTimeout(() => {
@@ -1183,7 +1174,6 @@ const startSession = async () => {
 
         // Set up Customer Coach Agent (System audio + AI coaching)
         wsCustomerCoach.onopen = () => {
-            console.log('✅ Customer Coach Agent connected');
             connectionStatus.value = 'connected';
 
             // Get coach instructions from template
@@ -1370,7 +1360,6 @@ Be thorough but not intrusive. Extract actionable intelligence to help guide the
         };
 
         wsSalesperson.onclose = () => {
-            console.log('🔌 Salesperson agent disconnected');
             if (isActive.value) {
                 addToTranscript('system', '⚠️ Salesperson connection lost. Please restart the session.', 'error');
             }
@@ -1382,7 +1371,6 @@ Be thorough but not intrusive. Extract actionable intelligence to help guide the
         };
 
         wsCustomerCoach.onclose = () => {
-            console.log('🔌 Customer Coach agent disconnected');
             if (isActive.value) {
                 addToTranscript('system', '⚠️ Customer Coach connection lost. Please restart the session.', 'error');
                 connectionStatus.value = 'disconnected';
@@ -1392,16 +1380,13 @@ Be thorough but not intrusive. Extract actionable intelligence to help guide the
         // Salesperson transcriber message handler
         wsSalesperson.onmessage = (event) => {
             const data = JSON.parse(event.data);
-            console.log('🎤 Salesperson transcriber:', data.type);
 
             switch (data.type) {
                 case 'session.created':
-                    console.log('✅ Salesperson transcriber ready');
                     break;
 
                 case 'conversation.item.input_audio_transcription.completed':
                     if (data.transcript) {
-                        console.log('👔 Salesperson said:', data.transcript);
 
                         // Track speaker transitions
                         const now = Date.now();
@@ -1447,32 +1432,24 @@ Be thorough but not intrusive. Extract actionable intelligence to help guide the
 
             // Enhanced logging for debugging
             if (data.type.includes('function')) {
-                console.log('🎯 Function call:', data.type, data);
             } else if (data.type.includes('transcription')) {
-                console.log('📣 Customer transcription:', data.type);
             } else if (data.type === 'response.function_call_arguments.delta') {
-                console.log('📝 Streaming delta:', data.name, 'chars:', data.arguments?.length);
             } else {
-                console.log('🤖 Customer Coach:', data.type);
             }
 
             switch (data.type) {
                 case 'session.created':
-                    console.log('✅ Customer Coach agent ready');
                     isActive.value = true;
                     break;
 
                 case 'response.created':
-                    console.log('🎬 Response created', data.response);
                     activeResponseId = data.response?.id || null;
-                    console.log('📝 Stored response ID:', activeResponseId);
                     // Reset analyzing flag when response is created
                     isAnalyzing = false;
                     break;
 
                 case 'conversation.item.input_audio_transcription.completed':
                     if (data.transcript) {
-                        console.log('📞 Customer said:', data.transcript);
 
                         // Update UI immediately
                         addToTranscript('customer', data.transcript);
@@ -1512,7 +1489,6 @@ Be thorough but not intrusive. Extract actionable intelligence to help guide the
 
                         if (shouldAnalyzeImmediately) {
                             // Analyze immediately for important content
-                            console.log('⚡ Immediate analysis triggered');
                             analyzeCustomerSpeech();
                         } else {
                             // Otherwise debounce
@@ -1524,7 +1500,6 @@ Be thorough but not intrusive. Extract actionable intelligence to help guide the
                     break;
 
                 case 'response.function_call_arguments.done':
-                    console.log('✅ Function call complete:', data);
 
                     // Get accumulated arguments if available
                     const accumulatedArgs = functionCallAccumulator.get(data.call_id || '') || data.arguments;
@@ -1550,7 +1525,6 @@ Be thorough but not intrusive. Extract actionable intelligence to help guide the
                     if (data.call_id && data.arguments) {
                         const existing = functionCallAccumulator.get(data.call_id) || '';
                         functionCallAccumulator.set(data.call_id, existing + data.arguments);
-                        console.log('📡 Accumulating:', data.name, 'total length:', existing.length + data.arguments.length);
                     }
                     break;
 
@@ -1561,18 +1535,15 @@ Be thorough but not intrusive. Extract actionable intelligence to help guide the
 
                     // Check if it's the "already has active response" error
                     if (data.error?.message?.includes('already has active response')) {
-                        console.log('⚠️ Ignoring duplicate response error');
                     }
                     break;
 
                 case 'response.done':
-                    console.log('✅ Coach response complete');
                     activeResponseId = null;
                     isAnalyzing = false;
                     break;
 
                 case 'response.cancelled':
-                    console.log('🚫 Response cancelled');
                     activeResponseId = null;
                     isAnalyzing = false;
                     break;
@@ -1585,23 +1556,18 @@ Be thorough but not intrusive. Extract actionable intelligence to help guide the
       const data = JSON.parse(event.data)
       
       if (data.type.includes('function')) {
-        console.log('🏆 Coach function:', data.type, data)
       } else {
-        console.log('🏆 Coach agent:', data.type)
       }
       
       switch (data.type) {
         case 'session.created':
-          console.log('✅ Coach agent ready')
           isActive.value = true
           break
           
         case 'session.updated':
-          console.log('🔄 Coach session updated')
           break
           
         case 'response.function_call_arguments.done':
-          console.log('✅ Coach function call complete:', data)
           if (data.name && data.arguments) {
             try {
               const args = JSON.parse(data.arguments)
@@ -1689,7 +1655,6 @@ Be thorough but not intrusive. Extract actionable intelligence to help guide the
           break
           
         case 'response.done':
-          console.log('✅ Coach response complete')
           // Reset flag when response is done
           coachResponsePending = false
           break
@@ -1709,11 +1674,9 @@ Be thorough but not intrusive. Extract actionable intelligence to help guide the
 
         // Close handlers
         wsSalesperson.onclose = () => {
-            console.log('🔌 Salesperson agent disconnected');
         };
 
         wsCustomerCoach.onclose = () => {
-            console.log('🔌 Customer Coach agent disconnected');
             connectionStatus.value = 'disconnected';
             isActive.value = false;
         };
@@ -1742,7 +1705,6 @@ const analyzeCustomerSpeech = async () => {
 
     // Cancel any active response first - but only if we have a valid ID
     if (activeResponseId && activeResponseId !== 'pending') {
-        console.log('🚫 Cancelling previous response:', activeResponseId);
         try {
             wsCustomerCoach.send(
                 JSON.stringify({
@@ -1760,7 +1722,6 @@ const analyzeCustomerSpeech = async () => {
     const combinedSpeech = customerSpeechBuffer.join(' ');
     customerSpeechBuffer = []; // Clear buffer
 
-    console.log('🧠 Analyzing customer speech:', combinedSpeech);
 
     // Create focused instruction for better results
     const instruction = `Analyze this customer statement: "${combinedSpeech}"
@@ -1776,7 +1737,6 @@ IMPORTANT: Use the provided function tools to capture insights:
 Be thorough - capture ALL topics discussed, not just the main one. Each distinct topic should be tracked separately.`;
 
     // Create new response - ID will be assigned by the server
-    console.log('📤 Creating new response for analysis');
 
     wsCustomerCoach.send(
         JSON.stringify({
@@ -1790,11 +1750,9 @@ Be thorough - capture ALL topics discussed, not just the main one. Each distinct
 };
 
 const handleFunctionCall = (name: string, args: any) => {
-    console.log('🔧 Handling function call:', name, args);
 
     switch (name) {
         case 'track_discussion_topic':
-            console.log('📝 Tracking topic:', args.name, 'Sentiment:', args.sentiment);
 
             // Normalize topic name for comparison
             const normalizedName = args.name.trim().toLowerCase();
@@ -1809,7 +1767,6 @@ const handleFunctionCall = (name: string, args: any) => {
                 if (args.sentiment && args.sentiment !== existingTopic.sentiment) {
                     existingTopic.sentiment = 'mixed';
                 }
-                console.log('📈 Updated topic:', existingTopic.name, 'mentions:', existingTopic.mentions);
             } else {
                 // Add new topic
                 const newTopic = {
@@ -1821,7 +1778,6 @@ const handleFunctionCall = (name: string, args: any) => {
                     sentiment: args.sentiment || 'neutral',
                 };
                 topics.value.push(newTopic);
-                console.log('🆕 New topic added:', newTopic.name);
 
                 // Queue insight for saving
                 insightQueue.push({
@@ -1833,8 +1789,6 @@ const handleFunctionCall = (name: string, args: any) => {
 
             // Sort topics by mentions
             topics.value.sort((a, b) => b.mentions - a.mentions);
-            console.log('📊 Total topics:', topics.value.length);
-            console.log('📈 All topics:', topics.value.map((t) => `${t.name} (${t.mentions}x)`).join(', '));
 
             // Also add to transcript for visibility
             if (!existingTopic) {
@@ -1843,7 +1797,6 @@ const handleFunctionCall = (name: string, args: any) => {
             break;
 
         case 'detect_commitment':
-            console.log('🤝 Commitment detected:', args.speaker, args.text);
 
             const newCommitment = {
                 id: `commit-${Date.now()}`,
@@ -1870,7 +1823,6 @@ const handleFunctionCall = (name: string, args: any) => {
             break;
 
         case 'analyze_customer_intent':
-            console.log('🧠 Customer analysis:', args);
 
             // Trigger visual feedback
             intelligenceUpdating.value = true;
@@ -1883,7 +1835,6 @@ const handleFunctionCall = (name: string, args: any) => {
                 buyingStage: args.buyingStage || customerIntelligence.value.buyingStage,
             };
 
-            console.log('📈 Customer intel updated:', customerIntelligence.value);
 
             // Add system message for significant changes
             if (args.intent !== 'unknown' && args.intent !== customerIntelligence.value.intent) {
@@ -1897,7 +1848,6 @@ const handleFunctionCall = (name: string, args: any) => {
             break;
 
         case 'highlight_insight':
-            console.log('💡 Insight captured:', args.type, args.text);
 
             const newInsight = {
                 id: `insight-${Date.now()}`,
@@ -1923,15 +1873,12 @@ const handleFunctionCall = (name: string, args: any) => {
             }
 
             // Log current insights to verify update
-            console.log('📊 Total insights:', insights.value.length);
-            console.log('🔝 Latest insight:', newInsight);
 
             // Add to transcript for visibility
             addToTranscript('system', `💡 ${args.type.replace('_', ' ')}: ${args.text}`, 'info');
             break;
 
         case 'create_action_item':
-            console.log('📝 Action item created:', args.text);
 
             const newActionItem = {
                 id: `action-${Date.now()}`,
@@ -1961,12 +1908,10 @@ const handleFunctionCall = (name: string, args: any) => {
                 transcript.value[lastSpeakerIndex].role = args.speaker;
 
                 // Log identification for debugging
-                console.log(`🎯 Speaker identified: ${args.speaker} (${Math.round(args.confidence * 100)}% confidence)`);
             }
             break;
 
         case 'detect_information_need':
-            console.log('📋 Information need detected:', args.topic, 'Context:', args.context);
 
             // Update the conversation context for the contextual information card
             if (args.context) {
@@ -1983,17 +1928,14 @@ const handleFunctionCall = (name: string, args: any) => {
 
 const setupAudioCapture = async () => {
     try {
-        console.log('🎤 Setting up dual audio capture...');
 
         // First check if we can enumerate devices
         try {
             const devices = await navigator.mediaDevices.enumerateDevices();
             const audioInputs = devices.filter((d) => d.kind === 'audioinput');
-            console.log('🎙️ Available microphones:', audioInputs.length);
 
             // If no devices or all have empty labels, we need permission
             if (audioInputs.length === 0 || audioInputs.every((d) => !d.label)) {
-                console.log('⚠️ Microphone permission needed');
             }
         } catch (enumError) {
             console.error('Error enumerating devices:', enumError);
@@ -2010,28 +1952,22 @@ const setupAudioCapture = async () => {
             },
         });
         microphoneStatus.value = 'active';
-        console.log('✅ Microphone access granted (Salesperson audio)');
 
         // Try to setup system audio capture using Swift helper
         try {
-            console.log('🔍 Checking window.remote:', window.remote ? 'Available' : 'Not available');
-            console.log('🔍 Window object keys:', Object.keys(window));
 
             // Dynamic import to avoid issues in browser
             const { SystemAudioCapture, isSystemAudioAvailable } = await import('@/services/audioCapture');
 
             // Check if system audio capture is available
             const isAvailable = await isSystemAudioAvailable();
-            console.log('🔍 System audio available check result:', isAvailable);
 
             if (isAvailable) {
-                console.log('🔊 System audio capture available, starting...');
 
                 systemAudioCapture.value = new SystemAudioCapture();
 
                 // Check permission first
-                const hasPermission = await systemAudioCapture.value.checkPermission();
-                console.log('🔒 Screen recording permission:', hasPermission ? 'granted' : 'denied');
+                await systemAudioCapture.value.checkPermission();
 
                 // Handle audio data from system
                 systemAudioCapture.value.on('audio', (pcm16: Int16Array) => {
@@ -2042,11 +1978,7 @@ const setupAudioCapture = async () => {
 
                         // Log every 20th packet for debugging
                         if (Math.random() < 0.05) {
-                            console.log('📞 System audio:', {
-                                samples: pcm16.length,
-                                level: systemAudioLevel.value,
-                                source: 'customer',
-                            });
+                            // Removed debug logging
                         }
 
                         // CRITICAL: Send as customer audio - this is from phone/zoom
@@ -2056,7 +1988,6 @@ const setupAudioCapture = async () => {
 
                 // Handle status updates
                 systemAudioCapture.value.on('status', (state: string) => {
-                    console.log('🔊 System audio status:', state);
 
                     // Map status states to our UI states
                     switch (state) {
@@ -2150,11 +2081,7 @@ const setupAudioCapture = async () => {
 
                 // Log occasionally for debugging
                 if (Math.random() < 0.02) {
-                    console.log('🎤 Microphone audio:', {
-                        level: audioLevel.value,
-                        source: audioSource,
-                        mode: systemAudioStatus.value === 'active' ? 'dual' : 'mixed',
-                    });
+                    // Removed debug logging
                 }
 
                 sendAudioWithMetadata(pcm16, audioSource);
@@ -2166,8 +2093,6 @@ const setupAudioCapture = async () => {
 
         // Note: System audio is handled by the Swift helper, not through Web Audio API
 
-        console.log('✅ Audio pipeline setup complete');
-        console.log(`Mode: ${systemAudioStatus.value === 'active' ? 'Dual Audio (Mic + Tab)' : 'Mixed Audio (Mic only)'}`);
     } catch (error) {
         console.error('❌ Failed to setup audio:', error);
         microphoneStatus.value = 'error';
@@ -2210,7 +2135,6 @@ const sendAudioWithMetadata = (pcm16: Int16Array, source: 'salesperson' | 'custo
 
             if (Math.random() < 0.02) {
                 // Log 2% of the time
-                console.log('🎤 Sent audio to salesperson agent');
             }
         } else if (source === 'customer' && wsCustomerCoach && wsCustomerCoach.readyState === WebSocket.OPEN) {
             // Send system audio to customer coach agent (direct to AI)
@@ -2223,7 +2147,6 @@ const sendAudioWithMetadata = (pcm16: Int16Array, source: 'salesperson' | 'custo
 
             if (Math.random() < 0.02) {
                 // Log 2% of the time
-                console.log('📞 Sent audio to customer coach agent for instant AI processing');
             }
         } else if (source === 'mixed') {
             // Mixed audio mode - send to both agents (not ideal but fallback)
@@ -2274,7 +2197,6 @@ const sendAudioWithMetadata = (pcm16: Int16Array, source: 'salesperson' | 'custo
 //   audioRestartAttempts.value++
 //
 //   try {
-//     console.log('🔄 Restarting system audio capture...')
 //     addToTranscript('system', '🔄 Restarting system audio capture...', 'warning')
 //
 //     // Restart the audio capture
@@ -2301,7 +2223,6 @@ const sendAudioWithMetadata = (pcm16: Int16Array, source: 'salesperson' | 'custo
 // }
 
 const stopSession = async () => {
-    console.log('🛑 Stopping session...');
     isEndingCall.value = true; // Mark that we're intentionally ending
 
     // Add call ended message
@@ -2355,7 +2276,6 @@ const stopSession = async () => {
 
     // Stop system audio capture
     if (systemAudioCapture.value) {
-        console.log('🔊 Stopping system audio capture...');
         await systemAudioCapture.value.stop();
         systemAudioCapture.value = null;
     }
@@ -2417,7 +2337,6 @@ const startConversationSession = async () => {
         });
 
         currentSessionId.value = response.data.session_id;
-        console.log('💾 Started conversation session:', currentSessionId.value);
 
         // Start periodic saving
         saveInterval = setInterval(() => {
@@ -2442,7 +2361,6 @@ const endConversationSession = async () => {
             ai_summary: null, // Could generate summary here
         });
 
-        console.log('💾 Ended conversation session:', currentSessionId.value);
         currentSessionId.value = null;
     } catch (error) {
         console.error('❌ Failed to end conversation session:', error);
@@ -2473,7 +2391,6 @@ const saveQueuedData = async (force: boolean = false) => {
                 })),
             });
 
-            console.log('📝 Saved', transcriptsToSave.length, 'transcripts');
         }
 
         // Save insights
@@ -2489,7 +2406,6 @@ const saveQueuedData = async (force: boolean = false) => {
                 })),
             });
 
-            console.log('💡 Saved', insightsToSave.length, 'insights');
         }
     } catch (error) {
         console.error('❌ Failed to save conversation data:', error);
@@ -2503,24 +2419,15 @@ const saveQueuedData = async (force: boolean = false) => {
 // Template Management Methods
 const fetchTemplates = async () => {
     try {
-        console.log('🔄 Fetching templates...');
         const response = await axios.get('/templates');
-        console.log('📋 Templates response:', response.data);
         templates.value = response.data.templates || [];
 
-        console.log(`✅ Loaded ${templates.value.length} templates`);
-        console.log(
-            'Available templates:',
-            templates.value.map((t) => t.name),
-        );
-
         // Load persisted template or select default
         const persistedTemplateId = localStorage.getItem('selectedTemplateId');
         if (persistedTemplateId) {
             const persistedTemplate = templates.value.find((t) => t.id === persistedTemplateId);
             if (persistedTemplate) {
                 selectedTemplate.value = persistedTemplate;
-                console.log('📌 Restored persisted template:', persistedTemplate.name);
             }
         }
 
@@ -2531,7 +2438,6 @@ const fetchTemplates = async () => {
                 const defaultTemplate = templates.value.find((t) => t.name === 'Sales Discovery Call') || templates.value[0];
                 if (defaultTemplate) {
                     selectedTemplate.value = defaultTemplate;
-                    console.log('📌 Selected default template:', defaultTemplate.name);
                 }
             } else {
                 // Handle case when no templates exist
@@ -2546,7 +2452,6 @@ const fetchTemplates = async () => {
 };
 
 const selectTemplateFromDropdown = async (template: Template) => {
-    console.log('🎯 Selecting template:', template.name);
     selectedTemplate.value = template;
     coveredPoints.value = []; // Reset covered points when changing template
 
@@ -2608,8 +2513,6 @@ const updateCoachInstructions = async () => {
         };
 
         wsCustomerCoach.send(JSON.stringify(updateMessage));
-        console.log('🔄 Updated coach instructions with template:', selectedTemplate.value.name);
-        console.log('📊 Variables used:', mergedVariables);
 
         // Add notification to transcript
         transcript.value.push({
@@ -2682,7 +2585,6 @@ onMounted(async () => {
     await Promise.all([fetchTemplates(), loadVariables()]);
 
     // Check environment on mount
-    console.log('🔑 API Key is configured');
 
     // Pre-check microphone permission to trigger prompt early if needed
     try {
@@ -2691,12 +2593,9 @@ onMounted(async () => {
 
         // If we can't see device labels, we don't have permission yet
         if (audioInputs.length > 0 && audioInputs.every((d) => !d.label)) {
-            console.log('🎤 Microphone permission not granted yet');
             // Don't request permission here - wait for user to start call
         } else if (audioInputs.length > 0) {
-            console.log('✅ Microphone already accessible');
         } else {
-            console.log('⚠️ No microphone devices found');
         }
     } catch (error) {
         console.error('Error checking microphone status:', error);
diff --git a/resources/js/pages/RealtimeAgent/MainV2.vue b/resources/js/pages/RealtimeAgent/MainV2.vue
new file mode 100644
index 0000000..bf724ce
--- /dev/null
+++ b/resources/js/pages/RealtimeAgent/MainV2.vue
@@ -0,0 +1,1110 @@
+<template>
+    <div
+        class="bg-dot-pattern flex h-screen flex-col bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-gray-100"
+        :class="{
+            'screen-protection-active': isProtectionEnabled,
+            'screen-protection-filter': isProtectionEnabled,
+            'overlay-mode-active': isOverlayMode,
+        }"
+    >
+
+        <!-- Professional Navigation Title Bar -->
+        <TitleBar 
+            title="Clueless"
+            @dashboard-click="handleDashboardClick"
+            @toggle-session="toggleSession"
+        />
+
+        <!-- Mobile Menu Dropdown -->
+        <MobileMenu @dashboard-click="handleDashboardClick" />
+
+        <!-- Main Container with scrollable layout -->
+        <div class="flex flex-1 flex-col p-4 pb-6 relative min-h-0">
+            <!-- Screen Protection Overlay (content area only) -->
+            <div v-if="isProtectionEnabled" class="screen-protection-content-overlay" aria-hidden="true"></div>
+            
+            <!-- Main Content Area with Responsive Columns -->
+            <!-- Mobile/Tablet: Stack all columns vertically -->
+            <!-- Desktop: 3 columns side by side -->
+            <div class="flex h-full flex-col gap-3 lg:grid lg:grid-cols-3">
+                <!-- Column 1: Live Transcription -->
+                <LiveTranscription class="min-h-[300px] lg:min-h-0" />
+
+                <!-- Column 2: Real-time Intelligence -->
+                <div class="flex flex-col gap-3">
+                    <!-- Customer Intelligence Card -->
+                    <CustomerIntelligence class="flex-shrink-0" />
+
+                    <!-- Key Insights Card -->
+                    <KeyInsights class="min-h-[200px] flex-1 lg:min-h-0" />
+
+                    <!-- Post-Call Actions Card (moved from column 3) -->
+                    <PostCallActions class="min-h-[150px] flex-1 lg:min-h-0" />
+
+                    <!-- Talking Points Card -->
+                    <TalkingPoints class="flex-shrink-0" />
+                </div>
+
+                <!-- Column 3: Contextual & Actions -->
+                <div class="flex flex-col gap-3">
+                    <!-- Contextual Information Card (50%) -->
+                    <ContextualInformation
+                        :prompt="selectedTemplate?.prompt || ''"
+                        :conversation-context="conversationContext"
+                        :last-customer-message="lastCustomerMessage"
+                        class="min-h-[250px] flex-[5] lg:min-h-0"
+                    />
+
+                    <!-- Commitments Made Card (30%) -->
+                    <CommitmentsList class="min-h-[150px] flex-[3] lg:min-h-0" />
+
+                    <!-- Discussion Topics Card (20%) -->
+                    <DiscussionTopics class="min-h-[120px] flex-[2] lg:min-h-0" />
+                </div>
+            </div>
+        </div>
+
+        <!-- Customer Info Modal -->
+        <CustomerInfoModal 
+            @start-with-info="startWithCustomerInfo"
+            @skip="skipCustomerInfo"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, watch } from 'vue';
+import { router } from '@inertiajs/vue3';
+import axios from 'axios';
+import { 
+    RealtimeAgent,
+    RealtimeSession,
+    type RealtimeAgentConfiguration,
+} from '@openai/agents-realtime';
+import { tool } from '@openai/agents-core';
+import { z } from 'zod';
+
+// Components
+import TitleBar from '@/components/RealtimeAgent/Navigation/TitleBar.vue';
+import MobileMenu from '@/components/RealtimeAgent/Navigation/MobileMenu.vue';
+import LiveTranscription from '@/components/RealtimeAgent/Content/LiveTranscription.vue';
+import CustomerIntelligence from '@/components/RealtimeAgent/Content/CustomerIntelligence.vue';
+import KeyInsights from '@/components/RealtimeAgent/Content/KeyInsights.vue';
+import DiscussionTopics from '@/components/RealtimeAgent/Content/DiscussionTopics.vue';
+import TalkingPoints from '@/components/RealtimeAgent/Content/TalkingPoints.vue';
+import CommitmentsList from '@/components/RealtimeAgent/Actions/CommitmentsList.vue';
+import PostCallActions from '@/components/RealtimeAgent/Actions/PostCallActions.vue';
+import CustomerInfoModal from '@/components/RealtimeAgent/Modals/CustomerInfoModal.vue';
+import ContextualInformation from '@/components/ContextualInformation.vue';
+
+// Stores
+import { useRealtimeAgentStore } from '@/stores/realtimeAgent';
+import { useSettingsStore } from '@/stores/settings';
+import { useOpenAIStore } from '@/stores/openai';
+
+// Composables
+import { useOverlayMode } from '@/composables/useOverlayMode';
+import { useScreenProtection } from '@/composables/useScreenProtection';
+
+// Store instances
+const realtimeStore = useRealtimeAgentStore();
+const settingsStore = useSettingsStore();
+const openaiStore = useOpenAIStore();
+
+// Composables
+const overlayMode = useOverlayMode();
+const screenProtection = useScreenProtection();
+
+// Set composable support in settings after they initialize
+onMounted(() => {
+    // Wait for composables to initialize
+    setTimeout(() => {
+        settingsStore.setOverlaySupported(overlayMode.isSupported.value);
+        settingsStore.setProtectionSupported(screenProtection.isProtectionSupported.value);
+        
+        // Sync initial overlay mode state
+        if (overlayMode.isOverlayMode.value !== settingsStore.isOverlayMode) {
+            settingsStore.setOverlayMode(overlayMode.isOverlayMode.value);
+        }
+    }, 200);
+    
+    // Listen for overlay mode changes to keep store in sync
+    const handleOverlayModeChange = (event: CustomEvent) => {
+        if (event.detail && typeof event.detail.enabled === 'boolean') {
+            settingsStore.setOverlayMode(event.detail.enabled);
+        }
+    };
+    
+    window.addEventListener('overlayModeChanged', handleOverlayModeChange as EventListener);
+    
+    // Cleanup on unmount
+    onUnmounted(() => {
+        window.removeEventListener('overlayModeChanged', handleOverlayModeChange as EventListener);
+    });
+});
+
+// Computed
+const selectedTemplate = computed(() => realtimeStore.selectedTemplate);
+const conversationContext = computed(() => realtimeStore.conversationContext);
+const lastCustomerMessage = computed(() => realtimeStore.lastCustomerMessage);
+const isProtectionEnabled = computed(() => screenProtection.isProtectionEnabled.value);
+// Use the overlay mode state from the composable which is the source of truth
+const isOverlayMode = computed(() => overlayMode.isOverlayMode.value);
+
+// Store SDK objects outside of Vue's reactivity to avoid proxy issues
+let salespersonAgent: any = null;
+let coachAgent: any = null;
+let salespersonSession: any = null;
+let coachSession: any = null;
+
+// Audio capture
+let audioContext: AudioContext | null = null;
+let micStream: MediaStream | null = null;
+let systemStream: MediaStream | null = null;
+let sessionsReady = false;
+
+// Tool definitions using SDK
+const coachingTools = [
+    tool({
+        name: 'track_discussion_topic',
+        description: 'Track or update a discussion topic',
+        parameters: z.object({
+            name: z.string().describe('Topic name (e.g., "Pricing", "Integration", "Timeline")'),
+            sentiment: z.enum(['positive', 'negative', 'neutral', 'mixed']).describe('Sentiment of the discussion'),
+            context: z.string().nullable().describe('Brief context about the discussion'),
+        }),
+        execute: async (args: { name: string; sentiment: string; context?: string | null }) => {
+            handleFunctionCall('track_discussion_topic', args);
+            return `Tracked topic: ${args.name} with ${args.sentiment} sentiment`;
+        },
+    }),
+    
+    tool({
+        name: 'detect_commitment',
+        description: 'Log a commitment made by either party',
+        parameters: z.object({
+            speaker: z.enum(['salesperson', 'customer']).describe('Who made the commitment'),
+            text: z.string().describe('What was committed'),
+            type: z.enum(['promise', 'next_step', 'deliverable']).describe('Type of commitment'),
+            deadline: z.string().nullable().describe('When it should be done'),
+            context: z.string().nullable().describe('Additional context'),
+        }),
+        execute: async (args: { speaker: string; text: string; type: string; deadline?: string | null; context?: string | null }) => {
+            handleFunctionCall('detect_commitment', args);
+            return `Captured ${args.speaker}'s commitment: ${args.text}`;
+        },
+    }),
+    
+    tool({
+        name: 'analyze_customer_intent',
+        description: 'Update customer intelligence analysis',
+        parameters: z.object({
+            intent: z.enum(['research', 'evaluation', 'decision', 'implementation', 'unknown']).describe('Customer intent'),
+            buyingStage: z.string().nullable().describe('Current stage in buying process'),
+            sentiment: z.enum(['positive', 'negative', 'neutral']).describe('Overall sentiment'),
+            engagementLevel: z.number().min(0).max(100).describe('Engagement level percentage'),
+        }),
+        execute: async (args: { intent: string; buyingStage?: string | null; sentiment: string; engagementLevel: number }) => {
+            handleFunctionCall('analyze_customer_intent', args);
+            return `Updated customer intelligence`;
+        },
+    }),
+    
+    tool({
+        name: 'highlight_insight',
+        description: 'Capture a key insight from the conversation',
+        parameters: z.object({
+            type: z.enum(['pain_point', 'objection', 'positive_signal', 'concern', 'question']).describe('Type of insight'),
+            text: z.string().describe('The insight text'),
+            importance: z.enum(['high', 'medium', 'low']).describe('Importance level'),
+        }),
+        execute: async (args: { type: string; text: string; importance: string }) => {
+            handleFunctionCall('highlight_insight', args);
+            return `Captured ${args.type}: ${args.text}`;
+        },
+    }),
+    
+    tool({
+        name: 'create_action_item',
+        description: 'Create a post-call action item',
+        parameters: z.object({
+            text: z.string().describe('What needs to be done'),
+            owner: z.enum(['salesperson', 'customer', 'both']).describe('Who owns this action'),
+            type: z.enum(['follow_up', 'send_info', 'schedule', 'internal']).describe('Type of action'),
+            deadline: z.string().nullable().describe('When it should be done'),
+            relatedCommitment: z.string().nullable().describe('ID of related commitment if any'),
+        }),
+        execute: async (args: { text: string; owner: string; type: string; deadline?: string | null; relatedCommitment?: string | null }) => {
+            handleFunctionCall('create_action_item', args);
+            return `Created action item: ${args.text}`;
+        },
+    }),
+    
+    tool({
+        name: 'detect_information_need',
+        description: 'Detect when customer is asking about or discussing topics that require specific information',
+        parameters: z.object({
+            topic: z.string().describe('The main topic being discussed (e.g., "pricing", "features", "integration")'),
+            context: z.string().describe('The specific context or question from the customer'),
+            urgency: z.enum(['high', 'medium', 'low']).describe('How urgently the information is needed'),
+        }),
+        execute: async (args: { topic: string; context: string; urgency: string }) => {
+            handleFunctionCall('detect_information_need', args);
+            return `Detected information need about ${args.topic}`;
+        },
+    }),
+];
+
+// Function call handler (same as original)
+const handleFunctionCall = (name: string, args: any) => {
+    switch (name) {
+        case 'track_discussion_topic':
+            realtimeStore.trackDiscussionTopic(args.name, args.sentiment, args.context);
+            break;
+            
+        case 'analyze_customer_intent':
+            realtimeStore.updateCustomerIntelligence({
+                intent: args.intent,
+                buyingStage: args.buyingStage || realtimeStore.customerIntelligence.buyingStage,
+                sentiment: args.sentiment,
+                engagementLevel: args.engagementLevel,
+            });
+            break;
+            
+        case 'highlight_insight':
+            realtimeStore.addKeyInsight(args.type, args.text, args.importance);
+            break;
+            
+        case 'detect_commitment':
+            realtimeStore.captureCommitment(args.speaker, args.text, args.type, args.deadline);
+            break;
+            
+        case 'create_action_item':
+            realtimeStore.addActionItem(args.text, args.owner, args.type, args.deadline, args.relatedCommitment);
+            break;
+            
+        case 'detect_information_need':
+            // Could update conversation context or trigger specific responses
+            realtimeStore.setConversationContext(`Customer asking about ${args.topic}: ${args.context}`);
+            break;
+    }
+};
+
+// Initialize function
+const initialize = async () => {
+    try {
+        // Fetch templates
+        const response = await axios.get('/templates');
+        // The response has templates wrapped in a templates property
+        const templates = response.data.templates || [];
+        realtimeStore.setTemplates(templates);
+        
+        // Select first template by default
+        if (templates.length > 0 && !realtimeStore.selectedTemplate) {
+            realtimeStore.setSelectedTemplate(templates[0]);
+        }
+    } catch (error) {
+        console.error('Failed to fetch templates:', error);
+        // Set empty array on error to prevent filter issues
+        realtimeStore.setTemplates([]);
+    }
+};
+
+// Session management
+const toggleSession = () => {
+    if (realtimeStore.isActive) {
+        endCall();
+    } else {
+        realtimeStore.setShowCustomerModal(true);
+    }
+};
+
+const startWithCustomerInfo = (info: { name: string; company: string }) => {
+    realtimeStore.setCustomerInfo(info);
+    startCall();
+};
+
+const skipCustomerInfo = () => {
+    startCall();
+};
+
+const startCall = async () => {
+    try {
+        realtimeStore.setConnectionStatus('connecting');
+        
+        // Get ephemeral key
+        const { data } = await axios.post('/api/realtime/ephemeral-key');
+        
+        if (data.status === 'error') {
+            throw new Error(data.message || 'Failed to get ephemeral key');
+        }
+        
+        openaiStore.setEphemeralKey(data.ephemeralKey, 60);
+        
+        // Initialize agents
+        await initializeAgents(data.ephemeralKey);
+        
+        // Start audio capture
+        await startAudioCapture();
+        
+        realtimeStore.setActiveState(true);
+        realtimeStore.setConnectionStatus('connected');
+        
+        // Auto-enable screen protection during calls
+        screenProtection.enableForCall();
+        
+        
+        // Add initial system message
+        realtimeStore.addTranscriptGroup({
+            id: `system-${Date.now()}`,
+            role: 'system',
+            messages: [{ text: 'Call started. Coach is ready to assist.', timestamp: Date.now() }],
+            startTime: Date.now(),
+        });
+        
+    } catch (error) {
+        console.error('Failed to start call:', error);
+        realtimeStore.setConnectionStatus('disconnected');
+    }
+};
+
+const endCall = async () => {
+    try {
+        // Stop microphone stream
+        if (micStream) {
+            micStream.getTracks().forEach(track => track.stop());
+            micStream = null;
+        }
+        
+        // Stop system audio stream
+        if (systemStream) {
+            systemStream.getTracks().forEach(track => track.stop());
+            systemStream = null;
+        }
+        
+        // Disable audio loopback if enabled
+        if ((window as any).Native?.ipcRendererInvoke) {
+            try {
+                await (window as any).Native.ipcRendererInvoke['disable-loopback-audio']();
+            } catch {
+                // Ignore errors on cleanup
+            }
+        }
+        
+        // Close audio context
+        if (audioContext) {
+            await audioContext.close();
+            audioContext = null;
+        }
+        
+        // Disconnect sessions directly to avoid Vue proxy issues
+        if (salespersonSession) {
+            try {
+                salespersonSession.close();
+            } catch (error) {
+                console.error('Error closing salesperson session:', error);
+            }
+            salespersonSession = null;
+        }
+        
+        if (coachSession) {
+            try {
+                coachSession.close();
+            } catch (error) {
+                console.error('Error closing coach session:', error);
+            }
+            coachSession = null;
+        }
+        
+        // Clear agents
+        salespersonAgent = null;
+        coachAgent = null;
+        
+        // Reset sessions ready flag
+        sessionsReady = false;
+        
+        // Clear from store
+        openaiStore.clearAgents();
+        
+        realtimeStore.setActiveState(false);
+        realtimeStore.setConnectionStatus('disconnected');
+        
+        // Add end message
+        realtimeStore.addTranscriptGroup({
+            id: `system-${Date.now()}`,
+            role: 'system',
+            messages: [{ text: 'Call ended.', timestamp: Date.now() }],
+            startTime: Date.now(),
+        });
+        
+    } catch (error) {
+        console.error('Failed to end call:', error);
+    }
+};
+
+const initializeAgents = async (apiKey: string) => {
+    // Create salesperson agent (transcription only)
+    const salespersonConfig: RealtimeAgentConfiguration = {
+        name: 'Salesperson',
+        description: 'Transcribes the salesperson audio',
+        instructions: 'You are a transcription assistant. Your only job is to transcribe what the salesperson says.',
+        tools: [],
+    };
+    
+    salespersonAgent = new RealtimeAgent(salespersonConfig);
+    salespersonSession = new RealtimeSession(salespersonAgent, {
+        transport: 'websocket',
+        model: 'gpt-4o-mini-realtime-preview-2024-12-17',
+        apiKey: apiKey,
+    });
+    
+    // Create coach agent with tools
+    const coachConfig: RealtimeAgentConfiguration = {
+        name: 'Customer Coach',
+        description: 'Analyzes conversations and provides real-time coaching',
+        instructions: selectedTemplate.value?.prompt || 'You are a helpful sales coach.',
+        tools: coachingTools,
+    };
+    
+    coachAgent = new RealtimeAgent(coachConfig);
+    coachSession = new RealtimeSession(coachAgent, {
+        transport: 'websocket',
+        model: 'gpt-4o-mini-realtime-preview-2024-12-17',
+        apiKey: apiKey,
+    });
+    
+    // Set up event handlers
+    setupSessionHandlers();
+    
+    // Connect sessions
+    await salespersonSession.connect({});
+    await coachSession.connect({});
+    
+    // Configure sessions after connection
+    // Configure salesperson session for transcription
+    if (salespersonSession?.transport) {
+        salespersonSession.transport.sendEvent({
+            type: 'session.update',
+            session: {
+                modalities: ['audio', 'text'],
+                instructions: 'You are a transcription assistant. Your only job is to transcribe what you hear.',
+                input_audio_format: 'pcm16',
+                output_audio_format: 'pcm16',
+                input_audio_transcription: {
+                    model: 'whisper-1',
+                },
+                turn_detection: {
+                    type: 'server_vad',
+                    threshold: 0.5,
+                    prefix_padding_ms: 300,
+                    silence_duration_ms: 200,
+                },
+                voice: 'alloy',
+                temperature: 0.8,
+                max_response_output_tokens: 4096,
+            },
+        });
+    }
+    
+    // Configure coach session with tools
+    if (coachSession?.transport) {
+        const basePrompt = selectedTemplate.value?.prompt || 'You are a helpful sales coach.';
+        const coachInstructions = `${basePrompt}
+
+CRITICAL: You must actively and continuously analyze EVERY piece of conversation in real-time:
+
+1. IMMEDIATELY track discussion topics as they are mentioned using track_discussion_topic
+2. INSTANTLY detect any commitments using detect_commitment - even tentative ones
+3. CONTINUOUSLY highlight insights using highlight_insight for any important points
+4. ALWAYS analyze customer intent with analyze_customer_intent after each customer statement
+5. PROACTIVELY detect information needs using detect_information_need
+
+Be EXTREMELY aggressive in calling these functions - it's better to over-analyze than miss something.
+Call multiple functions per statement if relevant. Don't wait for complete thoughts - analyze partial information.`;
+        
+        // Convert tools to the format expected by OpenAI
+        const toolDefinitions = coachingTools.map(tool => ({
+            type: 'function',
+            name: tool.name,
+            description: tool.description,
+            parameters: tool.parameters,
+        }));
+        
+        coachSession.transport.sendEvent({
+            type: 'session.update',
+            session: {
+                modalities: ['audio', 'text'],
+                instructions: coachInstructions,
+                input_audio_format: 'pcm16',
+                output_audio_format: 'pcm16',
+                input_audio_transcription: {
+                    model: 'whisper-1',
+                },
+                turn_detection: {
+                    type: 'server_vad',
+                    threshold: 0.3,              // More sensitive to speech
+                    prefix_padding_ms: 200,      // Less padding before speech
+                    silence_duration_ms: 100,    // Shorter silence to trigger processing
+                },
+                voice: 'alloy',
+                temperature: 0.8,
+                max_response_output_tokens: 4096,
+                tools: toolDefinitions,
+                tool_choice: 'auto',
+            },
+        });
+    }
+    
+    // Mark sessions as ready
+    sessionsReady = true;
+    
+    // Store in OpenAI store
+    openaiStore.setSalespersonAgent(salespersonAgent, salespersonSession);
+    openaiStore.setCoachAgent(coachAgent, coachSession);
+};
+
+const setupSessionHandlers = () => {
+    if (!salespersonSession || !coachSession) return;
+    
+    
+    // Listen for all events on transport layer for debugging
+    if (salespersonSession.transport) {
+        salespersonSession.transport.on('*', () => {
+        });
+    }
+    
+    if (coachSession.transport) {
+        coachSession.transport.on('*', () => {
+        });
+    }
+    
+    // Salesperson session handlers
+    salespersonSession.on('conversation.updated', () => {
+        // Note: Transcript handling moved to conversation.item.input_audio_transcription.completed
+    });
+    
+    // Coach session handlers
+    coachSession.on('conversation.updated', () => {
+        // Note: Transcript handling moved to conversation.item.input_audio_transcription.completed
+    });
+    
+    // Function call handlers for coach analytics
+    coachSession.on('response.function_call_arguments.done', (event: any) => {
+        if (event.name && event.arguments) {
+            try {
+                const args = JSON.parse(event.arguments);
+                handleFunctionCall(event.name, args);
+            } catch (e) {
+                console.error('❌ Failed to parse function arguments:', e);
+            }
+        }
+    });
+    
+    coachSession.on('response.done', () => {
+    });
+    
+    // Handle transcription events - these are the primary events for capturing audio transcripts
+    if (salespersonSession.transport) {
+        salespersonSession.transport.on('conversation.item.input_audio_transcription.completed', (event: any) => {
+            if (event.transcript) {
+                // Try to append to last group if same speaker
+                const appended = realtimeStore.appendToLastTranscriptGroup('salesperson', event.transcript);
+                
+                if (!appended) {
+                    // Create new group if not appended
+                    const groupId = `salesperson-${Date.now()}`;
+                    realtimeStore.addTranscriptGroup({
+                        id: groupId,
+                        role: 'salesperson',
+                        messages: [{ text: event.transcript, timestamp: Date.now() }],
+                        startTime: Date.now(),
+                    });
+                }
+                
+                // Forward to coach for analysis
+                if (coachSession && coachSession.transport) {
+                    coachSession.transport.sendEvent({
+                        type: 'conversation.item.create',
+                        item: {
+                            type: 'message',
+                            role: 'user',
+                            content: [{
+                                type: 'input_text',
+                                text: `Salesperson said: "${event.transcript}"`
+                            }]
+                        }
+                    });
+                }
+            }
+        });
+    }
+    
+    if (coachSession.transport) {
+        coachSession.transport.on('conversation.item.input_audio_transcription.completed', (event: any) => {
+            if (event.transcript) {
+                // Try to append to last group if same speaker
+                const appended = realtimeStore.appendToLastTranscriptGroup('customer', event.transcript);
+                
+                if (!appended) {
+                    // Create new group if not appended
+                    const groupId = `customer-${Date.now()}`;
+                    realtimeStore.addTranscriptGroup({
+                        id: groupId,
+                        role: 'customer',
+                        messages: [{ text: event.transcript, timestamp: Date.now() }],
+                        startTime: Date.now(),
+                    });
+                }
+                
+                // Update last customer message and context
+                realtimeStore.setLastCustomerMessage(event.transcript);
+                
+                // Update conversation context with recent messages
+                const recentTranscripts = realtimeStore.transcriptGroups
+                    .slice(-5)
+                    .map(g => `${g.role}: ${g.messages.map(m => m.text).join(' ')}`)
+                    .join('\n');
+                realtimeStore.setConversationContext(recentTranscripts);
+            }
+        });
+    }
+    
+    
+    // Error handlers
+    salespersonSession.on('error', (error: any) => {
+        console.error('Salesperson session error:', error);
+        realtimeStore.addTranscriptGroup({
+            id: `error-${Date.now()}`,
+            role: 'system',
+            messages: [{ text: `Salesperson connection error: ${error.message || JSON.stringify(error)}`, timestamp: Date.now() }],
+            startTime: Date.now(),
+            systemCategory: 'error',
+        });
+    });
+    
+    coachSession.on('error', (error: any) => {
+        console.error('Coach session error:', error);
+        realtimeStore.addTranscriptGroup({
+            id: `error-${Date.now()}`,
+            role: 'system',
+            messages: [{ text: `Coach connection error: ${error.message || JSON.stringify(error)}`, timestamp: Date.now() }],
+            startTime: Date.now(),
+            systemCategory: 'error',
+        });
+    });
+};
+
+const checkMicrophonePermission = async () => {
+    try {
+        // Check if we're in Electron environment on macOS
+        if (window.location.protocol === 'nativephp:' && navigator.platform.includes('Mac')) {
+            // Check current microphone permission status
+            const statusResponse = await axios.get('/api/system/media-access-status/microphone');
+            
+            if (statusResponse.data.status !== 'granted') {
+                // Request microphone permission
+                const permissionResponse = await axios.post('/api/system/ask-for-media-access', {
+                    mediaType: 'microphone'
+                });
+                
+                if (!permissionResponse.data.granted) {
+                    throw new Error('Microphone permission denied');
+                }
+            }
+        }
+    } catch (error) {
+        console.error('Error checking microphone permission:', error);
+        // Continue anyway - the browser will handle permissions
+    }
+};
+
+const startAudioCapture = async () => {
+    try {
+        
+        // Check microphone permission first on macOS
+        await checkMicrophonePermission();
+        
+        // Setup microphone capture for salesperson's voice
+        micStream = await navigator.mediaDevices.getUserMedia({
+            audio: {
+                sampleRate: 24000,
+                channelCount: 1,
+                echoCancellation: true,
+                noiseSuppression: true,
+                autoGainControl: true,
+            },
+        });
+        realtimeStore.setMicrophoneStatus('active');
+        
+        // Create audio context with 24kHz sample rate (required by OpenAI)
+        audioContext = new AudioContext({ sampleRate: 24000 });
+        
+        // Resume audio context if it's suspended
+        if (audioContext.state === 'suspended') {
+            await audioContext.resume();
+        }
+        
+        // Setup microphone processor
+        const micSource = audioContext.createMediaStreamSource(micStream);
+        const micProcessor = audioContext.createScriptProcessor(4096, 1, 1);
+        
+        micProcessor.onaudioprocess = (event) => {
+            if (realtimeStore.isActive && sessionsReady) {
+                const inputData = event.inputBuffer.getChannelData(0);
+                
+                // Update audio level for visualization
+                const sum = inputData.reduce((acc, val) => acc + Math.abs(val), 0);
+                realtimeStore.setAudioLevel(Math.min(100, (sum / inputData.length) * 500));
+                
+                // Convert to PCM16 and send audio
+                const pcm16 = convertFloat32ToPCM16(inputData);
+                
+                // Send to salesperson session
+                if (salespersonSession && salespersonSession.transport) {
+                    const base64Audio = arrayBufferToBase64(pcm16.buffer);
+                    try {
+                        salespersonSession.transport.sendEvent({
+                            type: 'input_audio_buffer.append',
+                            audio: base64Audio,
+                        });
+                        
+                        // Log occasionally for debugging
+                    } catch (error) {
+                        console.error('Failed to send audio to salesperson:', error);
+                    }
+                }
+            }
+        };
+        
+        micSource.connect(micProcessor);
+        micProcessor.connect(audioContext.destination);
+        
+        // Try to setup system audio capture using electron-audio-loopback
+        try {
+            console.log('[MainV2] Starting system audio capture setup...');
+            
+            // Check if audio loopback is available
+            if (!(window as any).Native?.ipcRendererInvoke) {
+                console.error('[MainV2] Native IPC not available');
+                throw new Error('Native IPC not available');
+            }
+            
+            // Enable audio loopback
+            console.log('[MainV2] Enabling audio loopback...');
+            await (window as any).Native.ipcRendererInvoke['enable-loopback-audio']();
+            console.log('[MainV2] Audio loopback enabled successfully');
+            
+            // Add a small delay to ensure the handler is fully set up
+            await new Promise(resolve => setTimeout(resolve, 500));
+            
+            // Get system audio stream using getDisplayMedia
+            try {
+                console.log('[MainV2] Requesting display media with audio...');
+                const displayStream = await navigator.mediaDevices.getDisplayMedia({
+                    audio: true,
+                    video: true
+                });
+                
+                console.log('[MainV2] Got display stream:', {
+                    tracks: displayStream.getTracks().map(t => ({ kind: t.kind, label: t.label, enabled: t.enabled }))
+                });
+                
+                // Remove video tracks, keep only audio
+                const videoTracks = displayStream.getTracks().filter(t => t.kind === 'video');
+                const audioTracks = displayStream.getTracks().filter(t => t.kind === 'audio');
+                
+                console.log('[MainV2] Track breakdown:', {
+                    video: videoTracks.length,
+                    audio: audioTracks.length
+                });
+                
+                videoTracks.forEach(t => {
+                    t.stop();
+                    displayStream.removeTrack(t);
+                });
+                
+                if (audioTracks.length === 0) {
+                    throw new Error('No audio tracks found in display stream');
+                }
+                
+                systemStream = displayStream;
+                console.log('[MainV2] System stream ready with audio tracks');
+                
+                // Create audio processor for system audio
+                const systemSource = audioContext.createMediaStreamSource(systemStream);
+                const systemProcessor = audioContext.createScriptProcessor(4096, 1, 1);
+                
+                systemProcessor.onaudioprocess = (event) => {
+                    if (realtimeStore.isActive && sessionsReady) {
+                        const inputData = event.inputBuffer.getChannelData(0);
+                        
+                        // Update system audio level for visualization
+                        const sum = inputData.reduce((acc, val) => acc + Math.abs(val), 0);
+                        realtimeStore.setSystemAudioLevel(Math.min(100, (sum / inputData.length) * 500));
+                        
+                        // Convert to PCM16 and send audio
+                        const pcm16 = convertFloat32ToPCM16(inputData);
+                        
+                        // Send to coach session
+                        if (coachSession && coachSession.transport) {
+                            const base64Audio = arrayBufferToBase64(pcm16.buffer);
+                            try {
+                                coachSession.transport.sendEvent({
+                                    type: 'input_audio_buffer.append',
+                                    audio: base64Audio,
+                                });
+                                
+                            } catch (error) {
+                                console.error('Failed to send audio to coach:', error);
+                            }
+                        }
+                    }
+                };
+                
+                systemSource.connect(systemProcessor);
+                systemProcessor.connect(audioContext.destination);
+                
+                // Set system audio as active
+                realtimeStore.setSystemAudioActive(true);
+                
+                // Handle stream end
+                systemStream.getTracks().forEach(track => {
+                    track.addEventListener('ended', () => {
+                        realtimeStore.setSystemAudioActive(false);
+                    });
+                });
+                
+                realtimeStore.addTranscriptGroup({
+                    id: `system-${Date.now()}`,
+                    role: 'system',
+                    messages: [{ text: '✅ Dual audio capture active: Microphone (You) + System Audio (Customer)', timestamp: Date.now() }],
+                    startTime: Date.now(),
+                    systemCategory: 'success',
+                });
+                
+            } catch (error) {
+                // Disable loopback if getDisplayMedia failed
+                try {
+                    await (window as any).Native.ipcRendererInvoke['disable-loopback-audio']();
+                } catch {
+                    // Ignore cleanup errors
+                }
+                throw error;
+            }
+            
+        } catch (error) {
+            realtimeStore.setSystemAudioActive(false);
+            
+            // Check if user cancelled screen share
+            if (error instanceof Error && error.name === 'NotAllowedError') {
+                realtimeStore.addTranscriptGroup({
+                    id: `system-${Date.now()}`,
+                    role: 'system',
+                    messages: [
+                        { text: '⚠️ Screen share cancelled. System audio not captured.', timestamp: Date.now() },
+                        { text: '• Using microphone only mode', timestamp: Date.now() },
+                        { text: '• To enable system audio, restart the call and share your screen', timestamp: Date.now() },
+                    ],
+                    startTime: Date.now(),
+                    systemCategory: 'warning',
+                });
+            } else {
+                // Other errors - fallback to mixed audio mode
+                realtimeStore.addTranscriptGroup({
+                    id: `system-${Date.now()}`,
+                    role: 'system',
+                    messages: [
+                        { text: '⚠️ System audio capture unavailable. Using mixed audio mode.', timestamp: Date.now() },
+                        { text: '• Use headphones to reduce echo', timestamp: Date.now() },
+                        { text: '• AI will identify speakers based on conversation context', timestamp: Date.now() },
+                    ],
+                    startTime: Date.now(),
+                    systemCategory: 'warning',
+                });
+            }
+        }
+        
+    } catch (error) {
+        console.error('❌ Failed to setup audio:', error);
+        realtimeStore.setMicrophoneStatus('error');
+        throw error;
+    }
+};
+
+// Helper function to convert Float32Array to Int16Array
+const convertFloat32ToPCM16 = (float32Array: Float32Array): Int16Array => {
+    const pcm16 = new Int16Array(float32Array.length);
+    for (let i = 0; i < float32Array.length; i++) {
+        const clamped = Math.max(-1, Math.min(1, float32Array[i]));
+        pcm16[i] = Math.floor(clamped * 32767);
+    }
+    return pcm16;
+};
+
+// Helper function to convert ArrayBuffer to base64
+const arrayBufferToBase64 = (buffer: ArrayBuffer): string => {
+    const uint8Array = new Uint8Array(buffer);
+    let base64Audio = '';
+    const chunkSize = 8192; // Process in 8KB chunks
+    
+    for (let i = 0; i < uint8Array.length; i += chunkSize) {
+        const chunk = uint8Array.slice(i, Math.min(i + chunkSize, uint8Array.length));
+        base64Audio += btoa(String.fromCharCode(...chunk));
+    }
+    
+    return base64Audio;
+};
+
+
+const handleDashboardClick = () => {
+    if (!realtimeStore.isActive) {
+        router.visit('/conversations');
+    }
+};
+
+// Watch for template changes
+watch(selectedTemplate, (newTemplate) => {
+    if (newTemplate && coachSession?.transport) {
+        // Update coach instructions via transport
+        coachSession.transport.sendEvent({
+            type: 'session.update',
+            session: {
+                instructions: newTemplate.prompt,
+            },
+        });
+    }
+});
+
+// Developer console methods
+const enableMockMode = () => {
+    realtimeStore.enableMockMode();
+    return 'Mock mode enabled';
+};
+
+const disableMockMode = () => {
+    realtimeStore.disableMockMode();
+    return 'Mock mode disabled';
+};
+
+// Expose to window for console access
+if (typeof window !== 'undefined') {
+    (window as any).clueless = {
+        enableMockMode,
+        disableMockMode,
+    };
+}
+
+// Lifecycle
+onMounted(() => {
+    initialize();
+    
+    // Close dropdowns on outside click
+    document.addEventListener('click', () => {
+        settingsStore.closeAllDropdowns();
+    });
+});
+
+onUnmounted(async () => {
+    if (realtimeStore.isActive) {
+        await endCall();
+    }
+    
+    // Clean up
+    openaiStore.reset();
+    document.removeEventListener('click', settingsStore.closeAllDropdowns);
+});
+</script>
+
+<style>
+/* Apple-style Glassmorphism */
+.glass-card {
+    background: rgba(255, 255, 255, 0.7);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
+}
+
+.glass-card-darker {
+    background: rgba(255, 255, 255, 0.5);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
+}
+
+/* Clean, minimal transitions */
+.glass-card {
+    transition: all 0.3s ease;
+}
+
+.glass-card:hover {
+    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
+    transform: translateY(-1px);
+}
+
+/* Dark mode glass cards */
+:is(.dark *) .glass-card {
+    background: rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
+}
+
+:is(.dark *) .glass-card-darker {
+    background: rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
+}
+
+/* Custom scrollbar styles for better visibility */
+.custom-scrollbar::-webkit-scrollbar {
+    width: 6px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 3px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+    background: rgba(139, 92, 246, 0.3);
+    border-radius: 3px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: rgba(139, 92, 246, 0.5);
+}
+
+/* Dark mode scrollbar */
+:is(.dark *) .custom-scrollbar::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+:is(.dark *) .custom-scrollbar::-webkit-scrollbar-thumb {
+    background: rgba(139, 92, 246, 0.5);
+}
+
+:is(.dark *) .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: rgba(139, 92, 246, 0.7);
+}
+
+/* Subtle animations */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(-5px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.animate-fadeIn {
+    animation: fadeIn 0.2s ease-out;
+}
+</style>
\ No newline at end of file
diff --git a/resources/js/services/audioCapture.ts b/resources/js/services/audioCapture.ts
index 7123aa2..dd2690d 100644
--- a/resources/js/services/audioCapture.ts
+++ b/resources/js/services/audioCapture.ts
@@ -125,7 +125,6 @@ export class SystemAudioCapture extends SimpleEventEmitter {
             // Kill any existing macos-audio-capture processes
             try {
                 execSync('pkill -f macos-audio-capture', { encoding: 'utf8' });
-                console.log('🔄 Killed existing audio capture processes');
                 // Wait a bit for processes to die
                 await new Promise((resolve) => setTimeout(resolve, 500));
             } catch {
@@ -168,8 +167,6 @@ export class SystemAudioCapture extends SimpleEventEmitter {
             execPath = path.join(resourcesDir, 'app.asar.unpacked', 'resources', 'app', 'native', 'macos-audio-capture', 'macos-audio-capture');
         }
 
-        console.log('App path:', appPath);
-        console.log('Starting audio capture from:', execPath);
 
         // Check if executable exists
         const fs = window.remote.require('fs');
@@ -189,7 +186,6 @@ export class SystemAudioCapture extends SimpleEventEmitter {
             throw error;
         }
 
-        console.log('✅ Swift executable found');
 
         // Spawn the Swift process
         this.process = spawn(execPath, [], {
@@ -209,7 +205,6 @@ export class SystemAudioCapture extends SimpleEventEmitter {
 
         // Handle process exit
         this.process.on('exit', (code: number) => {
-            console.log('Audio capture process exited with code:', code);
             this.emit('exit', code);
             this.process = null;
         });
@@ -240,8 +235,7 @@ export class SystemAudioCapture extends SimpleEventEmitter {
 
                     // Attempt to restart if auto-restart is enabled
                     if (this.autoRestartEnabled && !this.isRestarting) {
-                        console.log('🔄 Auto-restarting due to heartbeat timeout');
-                        setTimeout(() => this.restart(), 1000);
+                            setTimeout(() => this.restart(), 1000);
                     }
                 }
             }
@@ -275,7 +269,6 @@ export class SystemAudioCapture extends SimpleEventEmitter {
 
     async restart(): Promise<void> {
         if (this.isRestarting) {
-            console.log('Already restarting audio capture, skipping...');
             return;
         }
 
@@ -360,7 +353,6 @@ export class SystemAudioCapture extends SimpleEventEmitter {
 
                     case 'heartbeat':
                         this.lastHeartbeat = new Date();
-                        console.log('💓 Audio capture heartbeat received');
                         this.emit('heartbeat');
                         break;
 
@@ -396,8 +388,7 @@ export class SystemAudioCapture extends SimpleEventEmitter {
                                 this.errorCount >= 3;
 
                             if (shouldRestart) {
-                                console.log('Auto-restarting audio capture due to error:', packet.message);
-                                setTimeout(() => this.restart(), 1000);
+                                    setTimeout(() => this.restart(), 1000);
                             }
                         }
                         break;
@@ -448,7 +439,6 @@ export async function isSystemAudioAvailable(): Promise<boolean> {
         try {
             fs.accessSync(execPath);
         } catch {
-            console.log('Swift executable not found at:', execPath);
             return false;
         }
 
@@ -457,7 +447,6 @@ export async function isSystemAudioAvailable(): Promise<boolean> {
         const majorVersion = parseInt(release.split('.')[0]);
 
         const isSupported = majorVersion >= 22; // macOS 13.0 corresponds to Darwin 22.x
-        console.log('macOS version check:', release, 'Supported:', isSupported);
 
         return isSupported;
     } catch (error) {
diff --git a/resources/js/services/mockRealtimeData.ts b/resources/js/services/mockRealtimeData.ts
new file mode 100644
index 0000000..4064a63
--- /dev/null
+++ b/resources/js/services/mockRealtimeData.ts
@@ -0,0 +1,354 @@
+import type { TranscriptGroup, CustomerInsight, ContextualCoaching } from '@/types/realtime';
+
+// Mock conversation data
+const mockConversationFlow = [
+    {
+        role: 'system',
+        messages: ['Call connected'],
+        timestamp: Date.now() - 300000, // 5 minutes ago
+    },
+    {
+        role: 'salesperson',
+        messages: ["Hi! Thanks for taking my call. I'm calling from TechSolutions. How are you doing today?"],
+        timestamp: Date.now() - 295000,
+    },
+    {
+        role: 'customer',
+        messages: ["I'm doing well, thanks. What's this about?"],
+        timestamp: Date.now() - 290000,
+    },
+    {
+        role: 'salesperson',
+        messages: ["I noticed your company has been growing rapidly. We help businesses like yours streamline their operations with our automation platform. Are you currently using any automation tools?"],
+        timestamp: Date.now() - 285000,
+    },
+    {
+        role: 'customer',
+        messages: ["We use a few different tools, but honestly, they don't talk to each other very well. It's been a pain point for our team."],
+        timestamp: Date.now() - 280000,
+    },
+    {
+        role: 'salesperson',
+        messages: ["I hear that a lot. Integration issues can really slow things down. What specific challenges are you facing with your current setup?"],
+        timestamp: Date.now() - 275000,
+    },
+    {
+        role: 'customer',
+        messages: [
+            "Well, our sales team uses one CRM, marketing uses a different platform, and our customer service is on another system entirely.",
+            "We spend hours every week just moving data between systems manually."
+        ],
+        timestamp: Date.now() - 270000,
+    },
+    {
+        role: 'salesperson',
+        messages: ["That sounds frustrating and time-consuming. Our platform actually specializes in connecting disparate systems. We've helped companies reduce manual data entry by up to 80%."],
+        timestamp: Date.now() - 265000,
+    },
+    {
+        role: 'customer',
+        messages: ["That's impressive. But we've looked at integration platforms before. They always seem too complex or too expensive for what we need."],
+        timestamp: Date.now() - 260000,
+    },
+    {
+        role: 'salesperson',
+        messages: ["I understand your concern. What's your typical monthly volume for data transfers between systems?"],
+        timestamp: Date.now() - 255000,
+    },
+    {
+        role: 'customer',
+        messages: ["Probably around 10,000 records across all systems. But it varies month to month."],
+        timestamp: Date.now() - 250000,
+    },
+    {
+        role: 'salesperson',
+        messages: ["Based on that volume, you'd fit perfectly into our Growth tier, which is $299/month. That includes all the connectors you'd need plus our visual workflow builder."],
+        timestamp: Date.now() - 245000,
+    },
+    {
+        role: 'customer',
+        messages: ["How long does implementation typically take? We can't afford a long disruption."],
+        timestamp: Date.now() - 240000,
+    },
+    {
+        role: 'salesperson',
+        messages: ["Most clients are up and running within 2 weeks. We provide a dedicated onboarding specialist and can start with just one integration to prove the value."],
+        timestamp: Date.now() - 235000,
+    },
+    {
+        role: 'customer',
+        messages: ["That's better than I expected. Can you send me some more information? I'd need to discuss this with my team."],
+        timestamp: Date.now() - 230000,
+    },
+    {
+        role: 'salesperson',
+        messages: ["Absolutely! I can send you a detailed proposal today. Would it make sense to schedule a 30-minute demo for you and your team later this week?"],
+        timestamp: Date.now() - 225000,
+    },
+    {
+        role: 'customer',
+        messages: ["Yes, that would be helpful. How about Thursday afternoon?"],
+        timestamp: Date.now() - 220000,
+    },
+    {
+        role: 'salesperson',
+        messages: ["Thursday afternoon works great. I have slots at 2 PM or 3:30 PM. Which works better for you?"],
+        timestamp: Date.now() - 215000,
+    },
+    {
+        role: 'customer',
+        messages: ["Let's do 2 PM. Send me the calendar invite."],
+        timestamp: Date.now() - 210000,
+    },
+    {
+        role: 'salesperson',
+        messages: ["Perfect! I'll send that right after our call along with the proposal. Just to confirm, I have your email as john.smith@techcorp.com, correct?"],
+        timestamp: Date.now() - 205000,
+    },
+    {
+        role: 'customer',
+        messages: ["That's correct. Looking forward to the demo."],
+        timestamp: Date.now() - 200000,
+    },
+    {
+        role: 'salesperson',
+        messages: ["Excellent! One last thing - who else from your team should I include in the demo invite?"],
+        timestamp: Date.now() - 195000,
+    },
+    {
+        role: 'customer',
+        messages: ["Include Sarah Chen, our CTO, and Mike Johnson from Operations. They'll need to sign off on any new integrations."],
+        timestamp: Date.now() - 190000,
+    },
+    {
+        role: 'salesperson',
+        messages: ["Got it. I'll include them both. Thanks for your time today, John. I'm excited to show you how we can solve those integration challenges!"],
+        timestamp: Date.now() - 185000,
+    },
+    {
+        role: 'customer',
+        messages: ["Thanks. Talk to you Thursday."],
+        timestamp: Date.now() - 180000,
+    },
+    {
+        role: 'system',
+        messages: ['Call ended'],
+        timestamp: Date.now() - 175000,
+    },
+];
+
+// Mock customer insights
+const mockInsights: CustomerInsight[] = [
+    {
+        id: '1',
+        type: 'pain_point',
+        content: 'Systems don\'t integrate well - manual data transfer between CRM, marketing, and customer service',
+        confidence: 0.95,
+        timestamp: Date.now() - 270000,
+    },
+    {
+        id: '2',
+        type: 'objection',
+        content: 'Concerned about complexity and cost based on previous experiences',
+        confidence: 0.85,
+        timestamp: Date.now() - 260000,
+    },
+    {
+        id: '3',
+        type: 'positive_signal',
+        content: 'Interested in reducing manual work - spending hours weekly on data entry',
+        confidence: 0.9,
+        timestamp: Date.now() - 265000,
+    },
+    {
+        id: '4',
+        type: 'buying_signal',
+        content: 'Agreed to demo and wants to include decision makers (CTO and Operations)',
+        confidence: 0.92,
+        timestamp: Date.now() - 190000,
+    },
+    {
+        id: '5',
+        type: 'concern',
+        content: 'Worried about implementation time and business disruption',
+        confidence: 0.88,
+        timestamp: Date.now() - 240000,
+    },
+];
+
+// Mock coaching suggestions
+const mockCoachingData: ContextualCoaching[] = [
+    {
+        id: '1',
+        type: 'tip',
+        content: 'Great job uncovering the pain point! Now quantify the impact.',
+        priority: 'medium',
+        timestamp: Date.now() - 270000,
+    },
+    {
+        id: '2',
+        type: 'suggestion',
+        content: 'Ask about their budget range to better qualify the opportunity.',
+        priority: 'high',
+        timestamp: Date.now() - 250000,
+    },
+    {
+        id: '3',
+        type: 'warning',
+        content: 'Customer mentioned decision makers - make sure to understand the full buying process.',
+        priority: 'medium',
+        timestamp: Date.now() - 190000,
+    },
+    {
+        id: '4',
+        type: 'positive',
+        content: 'Excellent close! You secured a demo with key stakeholders.',
+        priority: 'low',
+        timestamp: Date.now() - 185000,
+    },
+];
+
+// Customer profile
+const mockCustomerProfile = {
+    name: 'John Smith',
+    company: 'TechCorp Industries',
+    role: 'VP of Technology',
+    industry: 'Manufacturing',
+    employeeCount: '500-1000',
+    annualRevenue: '$50M-$100M',
+};
+
+// Performance metrics
+const mockMetrics = {
+    talkRatio: 45, // Salesperson talked 45% of the time
+    sentiment: 'positive',
+    engagementScore: 78,
+    objectionsHandled: 2,
+    painPointsIdentified: 3,
+    nextStepsSecured: true,
+};
+
+class MockRealtimeDataService {
+    private conversationIndex = 0;
+    private isActive = false;
+    private updateInterval: NodeJS.Timeout | null = null;
+
+    // Get initial state
+    getInitialState() {
+        return {
+            customerProfile: mockCustomerProfile,
+            metrics: mockMetrics,
+            insights: [],
+            coaching: [],
+            transcripts: [],
+        };
+    }
+
+    // Start mock conversation simulation
+    startMockConversation(onUpdate: (data: any) => void) {
+        this.isActive = true;
+        this.conversationIndex = 0;
+
+        // Send initial state
+        onUpdate({
+            type: 'initial',
+            data: this.getInitialState(),
+        });
+
+        // Simulate real-time updates
+        this.updateInterval = setInterval(() => {
+            if (!this.isActive || this.conversationIndex >= mockConversationFlow.length) {
+                this.stopMockConversation();
+                return;
+            }
+
+            const currentMessage = mockConversationFlow[this.conversationIndex];
+            
+            // Send transcript update
+            onUpdate({
+                type: 'transcript',
+                data: {
+                    role: currentMessage.role,
+                    messages: currentMessage.messages,
+                    timestamp: currentMessage.timestamp,
+                },
+            });
+
+            // Send related insights
+            const relatedInsights = mockInsights.filter(
+                insight => Math.abs(insight.timestamp - currentMessage.timestamp) < 10000
+            );
+            
+            relatedInsights.forEach(insight => {
+                setTimeout(() => {
+                    onUpdate({
+                        type: 'insight',
+                        data: insight,
+                    });
+                }, 500);
+            });
+
+            // Send related coaching
+            const relatedCoaching = mockCoachingData.filter(
+                coaching => Math.abs(coaching.timestamp - currentMessage.timestamp) < 10000
+            );
+            
+            relatedCoaching.forEach(coaching => {
+                setTimeout(() => {
+                    onUpdate({
+                        type: 'coaching',
+                        data: coaching,
+                    });
+                }, 1000);
+            });
+
+            // Update metrics periodically
+            if (this.conversationIndex % 5 === 0) {
+                onUpdate({
+                    type: 'metrics',
+                    data: {
+                        ...mockMetrics,
+                        engagementScore: mockMetrics.engagementScore + Math.random() * 10 - 5,
+                        talkRatio: mockMetrics.talkRatio + Math.random() * 10 - 5,
+                    },
+                });
+            }
+
+            this.conversationIndex++;
+        }, 3000); // New message every 3 seconds
+    }
+
+    // Stop mock conversation
+    stopMockConversation() {
+        this.isActive = false;
+        if (this.updateInterval) {
+            clearInterval(this.updateInterval);
+            this.updateInterval = null;
+        }
+    }
+
+    // Get all mock data at once (for testing UI without simulation)
+    getAllMockData() {
+        const transcripts: TranscriptGroup[] = mockConversationFlow.map((flow, index) => ({
+            id: `group-${index}`,
+            role: flow.role as 'salesperson' | 'customer' | 'system',
+            messages: flow.messages.map((text, msgIndex) => ({
+                id: `msg-${index}-${msgIndex}`,
+                text,
+                timestamp: flow.timestamp,
+            })),
+            startTime: flow.timestamp,
+            endTime: flow.timestamp + 1000,
+        }));
+
+        return {
+            customerProfile: mockCustomerProfile,
+            metrics: mockMetrics,
+            insights: mockInsights,
+            coaching: mockCoachingData,
+            transcripts,
+        };
+    }
+}
+
+export const mockRealtimeDataService = new MockRealtimeDataService();
\ No newline at end of file
diff --git a/resources/js/stores/openai.ts b/resources/js/stores/openai.ts
new file mode 100644
index 0000000..9b7a34c
--- /dev/null
+++ b/resources/js/stores/openai.ts
@@ -0,0 +1,162 @@
+import { defineStore } from 'pinia';
+import { 
+    type RealtimeAgent,
+    type RealtimeSession,
+    type RealtimeSessionOptions,
+} from '@openai/agents-realtime';
+
+interface AgentInfo {
+    agent: RealtimeAgent | null;
+    session: RealtimeSession | null;
+    isConnected: boolean;
+}
+
+export const useOpenAIStore = defineStore('openai', {
+    state: () => ({
+        // Agent instances
+        salespersonAgent: null as AgentInfo | null,
+        coachAgent: null as AgentInfo | null,
+        
+        // API key
+        ephemeralKey: null as string | null,
+        keyExpiresAt: null as number | null,
+        
+        // Session configuration
+        sessionConfig: {
+            model: 'gpt-4o-mini-realtime-preview-2024-12-17',
+            instructions: '',
+            voice: 'verse' as const,
+            input_audio_format: 'pcm16' as const,
+            output_audio_format: 'pcm16' as const,
+            input_audio_transcription: {
+                model: 'gpt-4o-mini-transcribe',
+            },
+            turn_detection: null,
+            tools: [] as any[],
+            tool_choice: 'auto' as const,
+            temperature: 0.7,
+            max_response_output_tokens: 4096,
+        } as RealtimeSessionOptions,
+    }),
+    
+    getters: {
+        isSalespersonConnected: (state) => state.salespersonAgent?.isConnected ?? false,
+        isCoachConnected: (state) => state.coachAgent?.isConnected ?? false,
+        isAnyAgentConnected: (state) => {
+            return (state.salespersonAgent?.isConnected ?? false) || 
+                   (state.coachAgent?.isConnected ?? false);
+        },
+        hasValidKey: (state) => {
+            if (!state.ephemeralKey || !state.keyExpiresAt) return false;
+            return Date.now() < state.keyExpiresAt;
+        },
+    },
+    
+    actions: {
+        // Key management
+        setEphemeralKey(key: string, expiresIn: number) {
+            this.ephemeralKey = key;
+            this.keyExpiresAt = Date.now() + (expiresIn * 1000);
+        },
+        
+        clearEphemeralKey() {
+            this.ephemeralKey = null;
+            this.keyExpiresAt = null;
+        },
+        
+        // Agent management
+        setSalespersonAgent(agent: RealtimeAgent, session: RealtimeSession) {
+            this.salespersonAgent = {
+                agent,
+                session,
+                isConnected: false,
+            };
+        },
+        
+        setCoachAgent(agent: RealtimeAgent, session: RealtimeSession) {
+            this.coachAgent = {
+                agent,
+                session,
+                isConnected: false,
+            };
+        },
+        
+        updateAgentConnectionStatus(agentType: 'salesperson' | 'coach', connected: boolean) {
+            const agentInfo = agentType === 'salesperson' ? this.salespersonAgent : this.coachAgent;
+            if (agentInfo) {
+                agentInfo.isConnected = connected;
+            }
+        },
+        
+        // Session configuration
+        updateSessionConfig(updates: Partial<RealtimeSessionOptions>) {
+            Object.assign(this.sessionConfig, updates);
+        },
+        
+        setSessionInstructions(instructions: string) {
+            this.sessionConfig.instructions = instructions;
+        },
+        
+        setSessionTools(tools: any[]) {
+            this.sessionConfig.tools = tools;
+        },
+        
+        // Cleanup
+        disconnectAllAgents() {
+            // Access raw objects to avoid Vue proxy issues
+            const rawSalespersonSession = this.salespersonAgent?.session;
+            const rawCoachSession = this.coachAgent?.session;
+            
+            if (rawSalespersonSession && typeof rawSalespersonSession.close === 'function') {
+                try {
+                    rawSalespersonSession.close();
+                } catch (error) {
+                    console.error('Error closing salesperson session:', error);
+                }
+            }
+            
+            if (rawCoachSession && typeof rawCoachSession.close === 'function') {
+                try {
+                    rawCoachSession.close();
+                } catch (error) {
+                    console.error('Error closing coach session:', error);
+                }
+            }
+            
+            // Update connection status
+            if (this.salespersonAgent) {
+                this.salespersonAgent.isConnected = false;
+            }
+            if (this.coachAgent) {
+                this.coachAgent.isConnected = false;
+            }
+        },
+        
+        clearAgents() {
+            this.salespersonAgent = null;
+            this.coachAgent = null;
+        },
+        
+        reset() {
+            this.disconnectAllAgents();
+            this.clearAgents();
+            this.clearEphemeralKey();
+            // Reset session config to defaults
+            this.sessionConfig = {
+                model: 'gpt-4o-mini-realtime-preview-2024-12-17',
+                instructions: '',
+                voice: 'verse',
+                input_audio_format: 'pcm16',
+                output_audio_format: 'pcm16',
+                input_audio_transcription: {
+                    model: 'gpt-4o-mini-transcribe',
+                },
+                turn_detection: null,
+                tools: [],
+                tool_choice: 'auto',
+                temperature: 0.7,
+                max_response_output_tokens: 4096,
+            };
+        },
+    },
+});
\ No newline at end of file
diff --git a/resources/js/stores/realtimeAgent.ts b/resources/js/stores/realtimeAgent.ts
new file mode 100644
index 0000000..19eb0e7
--- /dev/null
+++ b/resources/js/stores/realtimeAgent.ts
@@ -0,0 +1,424 @@
+import { defineStore } from 'pinia';
+import type { 
+    ActionItem, 
+    Commitment, 
+    CustomerInfo, 
+    CustomerIntelligence, 
+    Insight, 
+    Template, 
+    Topic, 
+    TranscriptGroup 
+} from '@/types/realtimeAgent';
+import { mockRealtimeDataService } from '@/services/mockRealtimeData';
+import type { CustomerInsight, ContextualCoaching } from '@/types/realtime';
+
+export const useRealtimeAgentStore = defineStore('realtimeAgent', {
+    state: () => ({
+        // Connection
+        connectionStatus: 'disconnected' as 'disconnected' | 'connecting' | 'connected',
+        isActive: false,
+        isMockMode: false,
+        mockInterval: null as NodeJS.Timeout | null,
+        
+        // Templates
+        selectedTemplate: null as Template | null,
+        templates: [] as Template[],
+        
+        // Transcript
+        transcriptGroups: [] as TranscriptGroup[],
+        
+        // Intelligence
+        customerIntelligence: {
+            intent: 'unknown',
+            buyingStage: 'Discovery',
+            engagementLevel: 50,
+            sentiment: 'neutral',
+        } as CustomerIntelligence,
+        insights: [] as Insight[],
+        topics: [] as Topic[],
+        
+        // Actions
+        commitments: [] as Commitment[],
+        actionItems: [] as ActionItem[],
+        
+        // Coaching
+        coachingItems: [] as ContextualCoaching[],
+        
+        // UI State
+        coveredPoints: [] as number[],
+        showCustomerModal: false,
+        customerInfo: {
+            name: '',
+            company: '',
+        } as CustomerInfo,
+        
+        // Audio
+        audioLevel: 0,
+        systemAudioLevel: 0,
+        microphoneStatus: 'inactive',
+        isSystemAudioActive: false,
+        
+        // Other
+        conversationContext: '',
+        lastCustomerMessage: '',
+        intelligenceUpdating: false,
+    }),
+    
+    getters: {
+        talkingPointsProgress: (state) => {
+            if (!state.selectedTemplate?.talking_points?.length) return 0;
+            return Math.round((state.coveredPoints.length / state.selectedTemplate.talking_points.length) * 100);
+        },
+        
+        recentInsights: (state) => {
+            return state.insights.slice(0, 5);
+        },
+        
+        hasActiveCall: (state) => {
+            return state.isActive && state.connectionStatus === 'connected';
+        },
+        
+        sortedTopics: (state) => {
+            return [...state.topics].sort((a, b) => b.mentions - a.mentions);
+        },
+    },
+    
+    actions: {
+        // Connection Actions
+        setConnectionStatus(status: 'disconnected' | 'connecting' | 'connected') {
+            this.connectionStatus = status;
+        },
+        
+        setActiveState(active: boolean) {
+            this.isActive = active;
+        },
+        
+        // Template Actions
+        setSelectedTemplate(template: Template | null) {
+            this.selectedTemplate = template;
+            if (template) {
+                this.coveredPoints = [];
+            }
+        },
+        
+        setTemplates(templates: Template[]) {
+            this.templates = templates;
+        },
+        
+        // Transcript Actions
+        addTranscriptGroup(group: TranscriptGroup) {
+            this.transcriptGroups.push(group);
+        },
+        
+        appendToLastTranscriptGroup(role: string, text: string, maxTimeGapMs: number = 5000): boolean {
+            // Check if we have any transcript groups
+            if (this.transcriptGroups.length === 0) {
+                return false;
+            }
+            
+            // Get the last transcript group
+            const lastGroup = this.transcriptGroups[this.transcriptGroups.length - 1];
+            
+            // Check if it's the same speaker and within time window
+            if (lastGroup.role === role) {
+                const now = Date.now();
+                const lastMessageTime = lastGroup.messages[lastGroup.messages.length - 1]?.timestamp || lastGroup.startTime;
+                
+                if (now - lastMessageTime <= maxTimeGapMs) {
+                    // Append to existing group
+                    lastGroup.messages.push({ text, timestamp: now });
+                    lastGroup.endTime = now;
+                    return true;
+                }
+            }
+            
+            return false;
+        },
+        
+        updateTranscriptGroup(groupId: string, updates: Partial<TranscriptGroup>) {
+            const group = this.transcriptGroups.find(g => g.id === groupId);
+            if (group) {
+                Object.assign(group, updates);
+            }
+        },
+        
+        clearTranscript() {
+            this.transcriptGroups = [];
+        },
+        
+        // Topic Actions
+        trackDiscussionTopic(name: string, sentiment: string, context?: string) {
+            const normalizedName = name.trim().toLowerCase();
+            const existingTopic = this.topics.find(t => t.name.toLowerCase() === normalizedName);
+            
+            if (existingTopic) {
+                existingTopic.mentions++;
+                existingTopic.lastMentioned = Date.now();
+                if (sentiment && sentiment !== existingTopic.sentiment) {
+                    existingTopic.sentiment = 'mixed';
+                }
+            } else {
+                this.topics.push({
+                    id: `topic-${Date.now()}`,
+                    name,
+                    sentiment: sentiment as any,
+                    mentions: 1,
+                    lastMentioned: Date.now(),
+                    context,
+                });
+            }
+        },
+        
+        // Customer Intelligence Actions
+        updateCustomerIntelligence(updates: Partial<CustomerIntelligence>) {
+            this.intelligenceUpdating = true;
+            Object.assign(this.customerIntelligence, updates);
+            setTimeout(() => {
+                this.intelligenceUpdating = false;
+            }, 500);
+        },
+        
+        // Insight Actions
+        addKeyInsight(type: string, text: string, importance: string) {
+            this.insights.unshift({
+                id: `insight-${Date.now()}`,
+                type: type as any,
+                text,
+                importance: importance as any,
+                timestamp: Date.now(),
+            });
+            
+            // Keep only last 20 insights
+            if (this.insights.length > 20) {
+                this.insights.pop();
+            }
+        },
+        
+        // Commitment Actions
+        captureCommitment(speaker: string, text: string, type: string, deadline?: string) {
+            this.commitments.push({
+                id: `commitment-${Date.now()}`,
+                speaker: speaker as any,
+                text,
+                type: type as any,
+                deadline,
+                timestamp: Date.now(),
+            });
+        },
+        
+        // Action Item Actions
+        addActionItem(text: string, owner: string, type: string, deadline?: string, relatedCommitment?: string) {
+            this.actionItems.push({
+                id: `action-${Date.now()}`,
+                text,
+                owner: owner as any,
+                type: type as any,
+                completed: false,
+                deadline,
+                relatedCommitment,
+            });
+        },
+        
+        toggleActionItemComplete(id: string) {
+            const item = this.actionItems.find(a => a.id === id);
+            if (item) {
+                item.completed = !item.completed;
+            }
+        },
+        
+        // Talking Points Actions
+        toggleTalkingPoint(index: number) {
+            const idx = this.coveredPoints.indexOf(index);
+            if (idx > -1) {
+                this.coveredPoints.splice(idx, 1);
+            } else {
+                this.coveredPoints.push(index);
+            }
+        },
+        
+        // Audio Actions
+        setAudioLevel(level: number) {
+            this.audioLevel = level;
+        },
+        
+        setSystemAudioLevel(level: number) {
+            this.systemAudioLevel = level;
+        },
+        
+        setMicrophoneStatus(status: string) {
+            this.microphoneStatus = status;
+        },
+        
+        setSystemAudioActive(active: boolean) {
+            this.isSystemAudioActive = active;
+        },
+        
+        // Customer Info Actions
+        setCustomerInfo(info: CustomerInfo) {
+            this.customerInfo = info;
+        },
+        
+        setShowCustomerModal(show: boolean) {
+            this.showCustomerModal = show;
+        },
+        
+        // Context Actions
+        setConversationContext(context: string) {
+            this.conversationContext = context;
+        },
+        
+        setLastCustomerMessage(message: string) {
+            this.lastCustomerMessage = message;
+        },
+        
+        // Coaching Actions
+        addCoachingItem(coaching: ContextualCoaching) {
+            this.coachingItems.unshift(coaching);
+            // Keep only last 10 coaching items
+            if (this.coachingItems.length > 10) {
+                this.coachingItems.pop();
+            }
+        },
+        
+        // Reset Actions
+        resetSession() {
+            // Keep templates and selected template
+            const { templates, selectedTemplate } = this;
+            
+            // Reset everything else
+            this.$reset();
+            
+            // Restore templates
+            this.templates = templates;
+            this.selectedTemplate = selectedTemplate;
+        },
+        
+        resetIntelligence() {
+            this.customerIntelligence = {
+                intent: 'unknown',
+                buyingStage: 'Discovery',
+                engagementLevel: 50,
+                sentiment: 'neutral',
+            };
+            this.insights = [];
+            this.topics = [];
+            this.commitments = [];
+            this.actionItems = [];
+            this.conversationContext = '';
+            this.lastCustomerMessage = '';
+        },
+        
+        // Mock Data Actions
+        enableMockMode() {
+            this.isMockMode = true;
+            this.resetSession();
+            
+            // Load all mock data at once
+            const mockData = mockRealtimeDataService.getAllMockData();
+            
+            // Set connection status
+            this.connectionStatus = 'connected';
+            this.isActive = true;
+            
+            // Set customer info
+            this.customerInfo = {
+                name: mockData.customerProfile.name,
+                company: mockData.customerProfile.company,
+            };
+            
+            // Load transcripts
+            mockData.transcripts.forEach(transcript => {
+                this.addTranscriptGroup(transcript);
+            });
+            
+            // Load insights
+            mockData.insights.forEach(insight => {
+                this.addKeyInsight(
+                    insight.type,
+                    insight.content,
+                    insight.confidence > 0.9 ? 'high' : insight.confidence > 0.7 ? 'medium' : 'low'
+                );
+            });
+            
+            // Update customer intelligence
+            this.updateCustomerIntelligence({
+                intent: 'evaluation',
+                buyingStage: 'Discovery',
+                engagementLevel: mockData.metrics.engagementScore,
+                sentiment: mockData.metrics.sentiment,
+            });
+            
+            // Add some topics
+            this.trackDiscussionTopic('Integration Issues', 'negative', 'Systems don\'t talk to each other');
+            this.trackDiscussionTopic('Manual Data Entry', 'negative', 'Spending hours on manual work');
+            this.trackDiscussionTopic('Automation Platform', 'positive', 'Interested in our solution');
+            this.trackDiscussionTopic('Demo Scheduled', 'positive', 'Thursday 2 PM demo');
+            
+            // Add action items
+            this.addActionItem('Send proposal and demo invite', 'salesperson', 'followup', 'Today');
+            this.addActionItem('Include Sarah Chen (CTO) in demo', 'salesperson', 'meeting');
+            this.addActionItem('Include Mike Johnson (Operations) in demo', 'salesperson', 'meeting');
+            
+            // Add commitments
+            this.captureCommitment('salesperson', 'Send detailed proposal today', 'deadline', 'Today');
+            this.captureCommitment('salesperson', 'Schedule 30-minute demo for Thursday 2 PM', 'meeting', 'Thursday');
+            this.captureCommitment('customer', 'Review proposal with team', 'review');
+            
+            // Add coaching items
+            mockData.coaching.forEach(coaching => {
+                this.addCoachingItem(coaching);
+            });
+        },
+        
+        disableMockMode() {
+            this.isMockMode = false;
+            if (this.mockInterval) {
+                mockRealtimeDataService.stopMockConversation();
+                this.mockInterval = null;
+            }
+            this.resetSession();
+        },
+        
+        startMockSimulation() {
+            if (!this.isMockMode) return;
+            
+            this.resetSession();
+            this.connectionStatus = 'connected';
+            this.isActive = true;
+            
+            mockRealtimeDataService.startMockConversation((update) => {
+                switch (update.type) {
+                    case 'transcript':
+                        const group: TranscriptGroup = {
+                            id: `group-${Date.now()}`,
+                            role: update.data.role,
+                            messages: update.data.messages.map((text: string, index: number) => ({
+                                id: `msg-${Date.now()}-${index}`,
+                                text,
+                                timestamp: update.data.timestamp,
+                            })),
+                            startTime: update.data.timestamp,
+                            endTime: update.data.timestamp + 1000,
+                        };
+                        this.addTranscriptGroup(group);
+                        break;
+                        
+                    case 'insight':
+                        const insight = update.data as CustomerInsight;
+                        this.addKeyInsight(
+                            insight.type,
+                            insight.content,
+                            insight.confidence > 0.9 ? 'high' : 'medium'
+                        );
+                        break;
+                        
+                    case 'metrics':
+                        this.updateCustomerIntelligence({
+                            engagementLevel: Math.max(0, Math.min(100, update.data.engagementScore)),
+                        });
+                        break;
+                }
+            });
+        },
+    },
+});
\ No newline at end of file
diff --git a/resources/js/stores/settings.ts b/resources/js/stores/settings.ts
new file mode 100644
index 0000000..43af370
--- /dev/null
+++ b/resources/js/stores/settings.ts
@@ -0,0 +1,101 @@
+import { defineStore } from 'pinia';
+
+export const useSettingsStore = defineStore('settings', {
+    state: () => ({
+        // Protection & Overlay
+        isProtectionEnabled: false,
+        isProtectionSupported: false,
+        isOverlayMode: false,
+        isOverlaySupported: true,
+        
+        // UI State
+        showCoachDropdown: false,
+        showMobileMenu: false,
+        templateSearchQuery: '',
+        
+        // Feature flags
+        debugMode: false,
+    }),
+    
+    getters: {
+        protectionStatusText: (state) => {
+            if (!state.isProtectionSupported) return 'N/A';
+            return state.isProtectionEnabled ? 'Protected' : 'Protect';
+        },
+        
+        overlayStatusText: (state) => {
+            return state.isOverlayMode ? 'Normal' : 'Overlay';
+        },
+    },
+    
+    actions: {
+        toggleProtection() {
+            if (this.isProtectionSupported) {
+                this.isProtectionEnabled = !this.isProtectionEnabled;
+            }
+        },
+        
+        toggleOverlayMode() {
+            this.isOverlayMode = !this.isOverlayMode;
+            // Add class to body element
+            if (this.isOverlayMode) {
+                document.body.classList.add('overlay-mode-active');
+            } else {
+                document.body.classList.remove('overlay-mode-active');
+            }
+        },
+        
+        setOverlayMode(enabled: boolean) {
+            this.isOverlayMode = enabled;
+            // Add class to body element
+            if (this.isOverlayMode) {
+                document.body.classList.add('overlay-mode-active');
+            } else {
+                document.body.classList.remove('overlay-mode-active');
+            }
+        },
+        
+        setProtectionSupported(supported: boolean) {
+            this.isProtectionSupported = supported;
+        },
+        
+        setOverlaySupported(supported: boolean) {
+            this.isOverlaySupported = supported;
+        },
+        
+        toggleCoachDropdown() {
+            this.showCoachDropdown = !this.showCoachDropdown;
+            // Close mobile menu if open
+            if (this.showCoachDropdown) {
+                this.showMobileMenu = false;
+            }
+        },
+        
+        toggleMobileMenu() {
+            this.showMobileMenu = !this.showMobileMenu;
+            // Close coach dropdown if open
+            if (this.showMobileMenu) {
+                this.showCoachDropdown = false;
+            }
+        },
+        
+        closeAllDropdowns() {
+            this.showCoachDropdown = false;
+            this.showMobileMenu = false;
+        },
+        
+        setTemplateSearchQuery(query: string) {
+            this.templateSearchQuery = query;
+        },
+        
+        resetDropdownStates() {
+            this.showCoachDropdown = false;
+            this.showMobileMenu = false;
+            this.templateSearchQuery = '';
+        },
+        
+        setDebugMode(enabled: boolean) {
+            this.debugMode = enabled;
+        },
+    },
+});
\ No newline at end of file
diff --git a/resources/js/test-audio-loopback.md b/resources/js/test-audio-loopback.md
new file mode 100644
index 0000000..b79a562
--- /dev/null
+++ b/resources/js/test-audio-loopback.md
@@ -0,0 +1,71 @@
+# Testing Audio Loopback Extension
+
+This document explains how to test the audio loopback functionality that's now implemented via the extension system.
+
+## Components Created
+
+### 1. IPC Handlers (in `nativephp-extension.js`)
+- `enable-loopback-audio` - Enables audio loopback for a device
+- `disable-loopback-audio` - Disables audio loopback
+
+### 2. Window APIs (in `nativephp-preload.js`)
+- `window.audioLoopback.enableLoopback(deviceId)` - Enable loopback
+- `window.audioLoopback.disableLoopback()` - Disable loopback
+- `window.extensionTest.ping()` - Test the extension system
+- `window.extensionTest.getInfo()` - Get extension information
+
+## Testing from Browser Console
+
+Once the app is running with `composer native:dev`, open the developer tools in the Electron app and try:
+
+```javascript
+// Test if extension system is working
+await window.extensionTest.ping();
+// Should return: { success: true, message: 'Pong!...', receivedArgs: ['from-preload'] }
+
+// Get extension info
+await window.extensionTest.getInfo();
+// Should return: { success: true, info: { extensionVersion: '1.0.0', ... } }
+
+// Enable audio loopback
+await window.audioLoopback.enableLoopback('default');
+// Should return: { success: true, deviceId: 'default', message: 'Audio loopback enabled (mock implementation)' }
+
+// Disable audio loopback
+await window.audioLoopback.disableLoopback();
+// Should return: { success: true, message: 'Audio loopback disabled (mock implementation)' }
+```
+
+## What to Look For in Console Logs
+
+When testing, you should see these logs:
+
+1. **Extension Loading**:
+   - `[NativePHP] Loading extensions from app path: /path/to/project`
+   - `[NativePHP] Loaded extension from: /path/to/project/resources/js/nativephp-extension.js`
+   - `[NativePHP] Exposed preload API: audioLoopback`
+   - `[NativePHP] Exposed preload API: extensionTest`
+
+2. **IPC Handler Registration**:
+   - `[NativePHP] Registered IPC handler: enable-loopback-audio`
+   - `[NativePHP] Registered IPC handler: disable-loopback-audio`
+
+3. **When Calling Functions**:
+   - `[Preload Extension] Calling enable-loopback-audio`
+   - `[Extension Test] IPC handler enable-loopback-audio called`
+
+## Important Notes
+
+1. **Path Resolution Issue**: Currently, the preload loader uses `process.cwd()` which might not resolve to the correct path. If the preload APIs aren't available, you may need to temporarily copy `nativephp-preload.js` to the package directory.
+
+2. **Mock Implementation**: The current implementation is a mock. The actual audio loopback logic (using electron-audio-loopback) would need to be implemented in the IPC handlers.
+
+3. **Error Handling**: If you see errors about `window.audioLoopback` being undefined, it means the preload extension didn't load properly.
+
+## Next Steps
+
+To implement actual audio loopback functionality:
+1. Import and use electron-audio-loopback methods in the IPC handlers
+2. Handle device selection and audio routing
+3. Add error handling for permission issues
+4. Implement proper cleanup in the disable handler
\ No newline at end of file
diff --git a/resources/js/test-extension.md b/resources/js/test-extension.md
new file mode 100644
index 0000000..f6178e4
--- /dev/null
+++ b/resources/js/test-extension.md
@@ -0,0 +1,59 @@
+# Testing NativePHP Extension
+
+This document shows how to test the extension system.
+
+## Console Logging
+
+When you run `composer native:dev`, you should see the following logs in the console:
+
+1. `[Extension Test] beforeReady hook called` - Before app initialization
+2. `[Extension Test] afterReady hook called` - After app is ready
+3. `[Extension Test] beforeQuit hook called` - When closing the app
+
+## Testing IPC Handlers
+
+From the renderer process (in Vue components or browser console), you can test:
+
+```javascript
+// Test ping
+const result = await window.Native.invoke('test:ping', 'arg1', 'arg2');
+console.log(result); // { success: true, message: 'Pong!...', receivedArgs: ['arg1', 'arg2'] }
+
+// Test echo
+const echoResult = await window.Native.invoke('test:echo', 'Hello Extension!');
+console.log(echoResult); // { success: true, echo: 'Hello Extension!', processedAt: '...' }
+
+// Test get info
+const info = await window.Native.invoke('test:get-info');
+console.log(info); // { success: true, info: { extensionVersion: '1.0.0', ... } }
+```
+
+## Testing API Routes
+
+From Laravel controllers or using curl:
+
+```bash
+# Test GET status
+curl http://127.0.0.1:4000/api/test/status \
+  -H "X-NativePHP-Secret: [secret]"
+
+# Test POST echo
+curl -X POST http://127.0.0.1:4000/api/test/echo \
+  -H "Content-Type: application/json" \
+  -H "X-NativePHP-Secret: [secret]" \
+  -d '{"message": "Hello from Laravel!"}'
+
+# Test GET with params
+curl http://127.0.0.1:4000/api/test/info/myParam?query=value \
+  -H "X-NativePHP-Secret: [secret]"
+```
+
+Note: The API port (4000) and secret will be different for each session. Check the console logs for the actual port.
+
+## Verification Steps
+
+1. Run `composer native:dev`
+2. Check console for extension loading message: `[NativePHP] Loaded extension from: .../resources/js/nativephp-extension.js`
+3. Check for lifecycle hooks being called
+4. Open the app and test IPC handlers from browser console
+5. Test API routes using curl or from Laravel code
\ No newline at end of file
diff --git a/resources/js/types/openai-agents.d.ts b/resources/js/types/openai-agents.d.ts
new file mode 100644
index 0000000..542171c
--- /dev/null
+++ b/resources/js/types/openai-agents.d.ts
@@ -0,0 +1,69 @@
+declare module '@openai/agents' {
+    export interface AgentOptions {
+        name: string;
+        instructions?: string;
+        modalities?: string[];
+        tools?: any[];
+        turnDetection?: TurnDetectionOptions;
+    }
+
+    export interface TurnDetectionOptions {
+        type: 'server_vad' | 'none';
+        threshold?: number;
+        prefix_padding_ms?: number;
+        silence_duration_ms?: number;
+    }
+
+    export interface AgentEvent {
+        type: string;
+        data?: any;
+    }
+
+    export class RealtimeAgent {
+        constructor(options: AgentOptions);
+        
+        connect(transport: any): Promise<void>;
+        disconnect(): Promise<void>;
+        
+        on(event: 'transcription', handler: (transcript: string) => void): void;
+        on(event: 'function_call', handler: (data: { name: string; arguments: any }) => void): void;
+        on(event: 'error', handler: (error: any) => void): void;
+        on(event: string, handler: (data: any) => void): void;
+        
+        off(event: string, handler?: (...args: any[]) => void): void;
+        
+        sendAudio(audio: ArrayBuffer | Int16Array): void;
+    }
+}
+
+declare module '@openai/agents/realtime' {
+    export { RealtimeAgent } from '@openai/agents';
+}
+
+declare module '@openai/agents/realtime/websocket' {
+    export interface WebSocketRealtimeTransportOptions {
+        url: string;
+        model: string;
+        apiKey: string;
+        headers?: Record<string, string>;
+    }
+
+    export class WebSocketRealtimeTransport {
+        constructor(options: WebSocketRealtimeTransportOptions);
+        
+        connect(): Promise<void>;
+        close(): void;
+        
+        isConnected(): boolean;
+        
+        send(data: any): void;
+        
+        on(event: string, handler: (...args: any[]) => void): void;
+        off(event: string, handler?: (...args: any[]) => void): void;
+    }
+}
+
+declare module '@openai/agents-realtime' {
+    export * from '@openai/agents/realtime';
+    export * from '@openai/agents/realtime/websocket';
+}
\ No newline at end of file
diff --git a/resources/js/types/realtime.ts b/resources/js/types/realtime.ts
new file mode 100644
index 0000000..e6c0aa2
--- /dev/null
+++ b/resources/js/types/realtime.ts
@@ -0,0 +1,49 @@
+// Realtime Agent Types
+
+export interface TranscriptMessage {
+    id: string;
+    text: string;
+    timestamp: number;
+}
+
+export interface TranscriptGroup {
+    id: string;
+    role: 'salesperson' | 'customer' | 'system';
+    messages: TranscriptMessage[];
+    startTime: number;
+    endTime: number;
+}
+
+export interface CustomerInsight {
+    id: string;
+    type: 'pain_point' | 'objection' | 'positive_signal' | 'buying_signal' | 'concern';
+    content: string;
+    confidence: number;
+    timestamp: number;
+}
+
+export interface ContextualCoaching {
+    id: string;
+    type: 'tip' | 'suggestion' | 'warning' | 'positive';
+    content: string;
+    priority: 'high' | 'medium' | 'low';
+    timestamp: number;
+}
+
+export interface CustomerProfile {
+    name: string;
+    company: string;
+    role: string;
+    industry: string;
+    employeeCount: string;
+    annualRevenue: string;
+}
+
+export interface PerformanceMetrics {
+    talkRatio: number;
+    sentiment: string;
+    engagementScore: number;
+    objectionsHandled: number;
+    painPointsIdentified: number;
+    nextStepsSecured: boolean;
+}
\ No newline at end of file
diff --git a/resources/js/types/realtimeAgent.ts b/resources/js/types/realtimeAgent.ts
new file mode 100644
index 0000000..ae28bbc
--- /dev/null
+++ b/resources/js/types/realtimeAgent.ts
@@ -0,0 +1,66 @@
+export interface Template {
+    id: string;
+    name: string;
+    prompt: string;
+    created_at: string;
+    is_system?: boolean;
+    icon?: string;
+    talking_points?: string[];
+}
+
+export interface TranscriptGroup {
+    id: string;
+    role: 'salesperson' | 'customer' | 'system';
+    messages: Array<{ text: string; timestamp: number }>;
+    startTime: number;
+    endTime?: number;
+    systemCategory?: 'error' | 'warning' | 'info' | 'success';
+}
+
+export interface CustomerIntelligence {
+    intent: 'research' | 'evaluation' | 'decision' | 'implementation' | 'unknown';
+    buyingStage: string;
+    engagementLevel: number;
+    sentiment: 'positive' | 'negative' | 'neutral';
+}
+
+export interface Insight {
+    id: string;
+    type: 'pain_point' | 'objection' | 'positive_signal' | 'concern' | 'question';
+    text: string;
+    importance: 'high' | 'medium' | 'low';
+    timestamp: number;
+}
+
+export interface Topic {
+    id: string;
+    name: string;
+    sentiment: 'positive' | 'negative' | 'neutral' | 'mixed';
+    mentions: number;
+    lastMentioned: number;
+    context?: string;
+}
+
+export interface Commitment {
+    id: string;
+    speaker: 'salesperson' | 'customer';
+    text: string;
+    type: 'promise' | 'next_step' | 'deliverable';
+    deadline?: string;
+    timestamp: number;
+}
+
+export interface ActionItem {
+    id: string;
+    text: string;
+    owner: 'salesperson' | 'customer' | 'both';
+    type: 'follow_up' | 'send_info' | 'schedule' | 'internal';
+    completed: boolean;
+    deadline?: string;
+    relatedCommitment?: string;
+}
+
+export interface CustomerInfo {
+    name: string;
+    company: string;
+}
\ No newline at end of file
diff --git a/resources/js/utils/electronPermissions.ts b/resources/js/utils/electronPermissions.ts
index fb94393..2a383f5 100644
--- a/resources/js/utils/electronPermissions.ts
+++ b/resources/js/utils/electronPermissions.ts
@@ -32,14 +32,6 @@ export async function checkMicrophoneAvailability(): Promise<{ available: boolea
         const devices = await navigator.mediaDevices.enumerateDevices();
         const audioInputs = devices.filter((device) => device.kind === 'audioinput');
 
-        console.log(
-            'Available audio input devices:',
-            audioInputs.map((d) => ({
-                deviceId: d.deviceId,
-                label: d.label || 'Unnamed Device',
-                groupId: d.groupId,
-            })),
-        );
 
         if (audioInputs.length === 0) {
             return { available: false, message: 'No microphone devices found' };
@@ -67,19 +59,16 @@ export async function selectBestMicrophone(devices: MediaDeviceInfo[]): Promise<
     const externalMic = nonDefaultDevices.find((d) => d.label.toLowerCase().includes('usb') || d.label.toLowerCase().includes('external'));
 
     if (externalMic) {
-        console.log('Selected external microphone:', externalMic.label);
         return externalMic.deviceId;
     }
 
     // Use first non-default device
     if (nonDefaultDevices.length > 0) {
-        console.log('Selected microphone:', nonDefaultDevices[0].label);
         return nonDefaultDevices[0].deviceId;
     }
 
     // Fallback to first available
     if (devices.length > 0) {
-        console.log('Using default microphone:', devices[0].label);
         return devices[0].deviceId;
     }
 
diff --git a/routes/web.php b/routes/web.php
index 83fecc4..fb7d9b3 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -29,6 +29,15 @@
     return Inertia::render('RealtimeAgent/Main');
 })->name('realtime-agent');
 
+// Realtime Agent V2 - OpenAI Agents SDK Implementation
+Route::get('/realtime-agent-v2', function () {
+    return Inertia::render('RealtimeAgent/MainV2');
+})->name('realtime-agent-v2');
+
+// Audio Test Route - Testing electron-audio-loopback
+Route::get('/audio-test', [\App\Http\Controllers\AudioTestController::class, 'index'])
+    ->name('audio-test');
+
 
 // Realtime API Routes
 Route::post('/api/realtime/ephemeral-key', [\App\Http\Controllers\RealtimeController::class, 'generateEphemeralKey'])