├── run.sh
├── muesli.icns
├── .gitattributes
├── .env.example
├── webpack.main.config.js
├── src
    ├── assets
    │   └── avatar.svg
    ├── sdk-logger.js
    ├── server.js
    ├── pages
    │   └── note-editor
    │   │   ├── renderer.js
    │   │   ├── styles.css
    │   │   └── index.html
    ├── preload.js
    ├── index.html
    ├── index.css
    └── main.js
├── webpack.renderer.config.js
├── webpack.rules.js
├── Entitlements.plist
├── LICENSE
├── .gitignore
├── README.md
├── package.json
└── forge.config.js


/run.sh:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 | 
3 | npm start
4 | 


--------------------------------------------------------------------------------
/muesli.icns:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/recallai/muesli-public/HEAD/muesli.icns


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/.env.example:
--------------------------------------------------------------------------------
1 | RECALLAI_API_URL=https://us-west-2.recall.ai
2 | RECALLAI_API_KEY=recall_api_key
3 | 
4 | OPENROUTER_KEY=open_api_key


--------------------------------------------------------------------------------
/webpack.main.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   /**
 3 |    * This is the main entry point for your application, it's the first file
 4 |    * that runs in the main process.
 5 |    */
 6 |   entry: './src/main.js',
 7 |   // Put your normal webpack config below here
 8 |   module: {
 9 |     rules: require('./webpack.rules'),
10 |   },
11 |   externals: {
12 |     '@recallai/desktop-sdk': 'commonjs @recallai/desktop-sdk'
13 |   }
14 | };
15 | 


--------------------------------------------------------------------------------
/src/assets/avatar.svg:
--------------------------------------------------------------------------------
1 | <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
2 |   <rect width="40" height="40" rx="20" fill="#f0f0f0"/>
3 |   <path d="M20 20C22.7614 20 25 17.7614 25 15C25 12.2386 22.7614 10 20 10C17.2386 10 15 12.2386 15 15C15 17.7614 17.2386 20 20 20Z" fill="#a0a0a0"/>
4 |   <path d="M12 31C12 26.0294 15.5817 22 20 22C24.4183 22 28 26.0294 28 31" stroke="#a0a0a0" stroke-width="4"/>
5 | </svg>


--------------------------------------------------------------------------------
/webpack.renderer.config.js:
--------------------------------------------------------------------------------
 1 | const rules = require('./webpack.rules');
 2 | 
 3 | rules.push({
 4 |   test: /\.css$/,
 5 |   use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
 6 | });
 7 | 
 8 | module.exports = {
 9 |   // Put your normal webpack config below here
10 |   module: {
11 |     rules,
12 |   },
13 |   entry: {
14 |     renderer: './src/renderer.js',
15 |     'note-editor/renderer': './src/pages/note-editor/renderer.js',
16 |   },
17 | };
18 | 


--------------------------------------------------------------------------------
/webpack.rules.js:
--------------------------------------------------------------------------------
 1 | module.exports = [
 2 |   // Add support for native node modules
 3 |   {
 4 |     // We're specifying native_modules in the test because the asset relocator loader generates a
 5 |     // "fake" .node file which is really a cjs file.
 6 |     test: /native_modules[/\\].+\.node$/,
 7 |     use: 'node-loader',
 8 |   },
 9 |   // Put your webpack loader rules in this array.  This is where you would put
10 |   // your ts-loader configuration for instance:
11 |   /**
12 |    * Typescript Example:
13 |    *
14 |    * {
15 |    *   test: /\.tsx?$/,
16 |    *   exclude: /(node_modules|.webpack)/,
17 |    *   loaders: [{
18 |    *     loader: 'ts-loader',
19 |    *     options: {
20 |    *       transpileOnly: true
21 |    *     }
22 |    *   }]
23 |    * }
24 |    */
25 | ];
26 | 


--------------------------------------------------------------------------------
/Entitlements.plist:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 3 | <plist version="1.0">
 4 |   <dict>
 5 |     <key>com.apple.security.cs.allow-jit</key>
 6 |     <true/>
 7 |     <key>com.apple.security.device.audio-input</key>
 8 |     <true/>
 9 |     <key>com.apple.security.device.bluetooth</key>
10 |     <true/>
11 |     <key>com.apple.security.device.camera</key>
12 |     <true/>
13 |     <key>com.apple.security.device.print</key>
14 |     <true/>
15 |     <key>com.apple.security.device.usb</key>
16 |     <true/>
17 |     <key>com.apple.security.personal-information.location</key>
18 |     <true/>
19 |     <key>com.apple.security.get-task-allow</key>
20 |     <true/>
21 |   </dict>
22 | </plist>


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright 2025 Recall.ai
2 | 
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4 | 
5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6 | 
7 | THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | lerna-debug.log*
 8 | 
 9 | # Diagnostic reports (https://nodejs.org/api/report.html)
10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
11 | 
12 | # Runtime data
13 | pids
14 | *.pid
15 | *.seed
16 | *.pid.lock
17 | .DS_Store
18 | 
19 | # Directory for instrumented libs generated by jscoverage/JSCover
20 | lib-cov
21 | 
22 | # Coverage directory used by tools like istanbul
23 | coverage
24 | *.lcov
25 | 
26 | # nyc test coverage
27 | .nyc_output
28 | 
29 | # node-waf configuration
30 | .lock-wscript
31 | 
32 | # Compiled binary addons (https://nodejs.org/api/addons.html)
33 | build/Release
34 | 
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 | 
39 | # TypeScript v1 declaration files
40 | typings/
41 | 
42 | # TypeScript cache
43 | *.tsbuildinfo
44 | 
45 | # Optional npm cache directory
46 | .npm
47 | 
48 | # Optional eslint cache
49 | .eslintcache
50 | 
51 | # Optional REPL history
52 | .node_repl_history
53 | 
54 | # Output of 'npm pack'
55 | *.tgz
56 | 
57 | # Yarn Integrity file
58 | .yarn-integrity
59 | 
60 | # dotenv environment variables file
61 | .env
62 | .env.test
63 | 
64 | # parcel-bundler cache (https://parceljs.org/)
65 | .cache
66 | 
67 | # next.js build output
68 | .next
69 | 
70 | # nuxt.js build output
71 | .nuxt
72 | 
73 | # vuepress build output
74 | .vuepress/dist
75 | 
76 | # Serverless directories
77 | .serverless/
78 | 
79 | # FuseBox cache
80 | .fusebox/
81 | 
82 | # DynamoDB Local files
83 | .dynamodb/
84 | 
85 | # Webpack
86 | .webpack/
87 | 
88 | # Vite
89 | .vite/
90 | 
91 | # Electron-Forge
92 | out/
93 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Muesli
 2 | 
 3 | This is a demo application that shows off what you can build with the [Recall.ai Desktop Recording SDK.](https://www.recall.ai/product/desktop-recording-sdk)
 4 | 
 5 | This repo is intended to be a mockup of the kind of experience you can build using the Desktop Recording SDK.
 6 | 
 7 | Need help? Reach out to our support team [support@recall.ai](mailto:support@recall.ai).
 8 | 
 9 | # Setup
10 | 
11 | - Copy the `env.example` file to a `.env` file:
12 |     - `cp .env.example .env`
13 | 
14 | - Replace `RECALLAI_API_URL` with the base URL for the [Recall region](https://docs.recall.ai/docs/regions#/) that you're using that matches your API key, example:
15 |     - `RECALLAI_API_URL=https://us-east-1.recall.ai`
16 | 
17 | - Modify `.env` to include your Recall.ai API key:
18 |     - `RECALLAI_API_KEY=<your key>`
19 | 
20 | This project also tries to use live transcription with Deepgram by default. To enable this, you'll need to configure your own Deepgram credentials on the Recall.ai dashboard. Follow our [Deepgram real-time transcription guide](https://docs.recall.ai/docs/dsdk-realtime-transcription#/deepgram-transcription-setup) to set this up.
21 | 
22 | If you want to enable the AI summary after a recording is finished, you can specify an OpenRouter API key.
23 | 
24 | ```
25 | OPENROUTER_KEY=<your key>
26 | ```
27 | 
28 | To launch the Muesli application, start the server first, then the app:
29 | 
30 | ```sh
31 | npm ci
32 | npm start
33 | ```
34 | 
35 | # Screenshots
36 | 
37 | ![Screenshot 2025-06-16 at 10 10 57 PM](https://github.com/user-attachments/assets/9df12246-b5be-466d-958e-e09ff0b4b3cb)
38 | ![Screenshot 2025-06-16 at 10 22 44 PM](https://github.com/user-attachments/assets/685f13ab-7c02-4f29-a987-830d331c4d36)
39 | ![Screenshot 2025-06-16 at 10 14 38 PM](https://github.com/user-attachments/assets/75817823-084c-46b0-bbe8-e0195a3f9051)
40 | 


--------------------------------------------------------------------------------
/src/sdk-logger.js:
--------------------------------------------------------------------------------
 1 | // SDK Logger for tracking RecallAI SDK operations
 2 | // This module is shared between main and renderer processes
 3 | 
 4 | // Create an event emitter for communication between processes
 5 | const { EventEmitter } = require('events');
 6 | const logger = new EventEmitter();
 7 | 
 8 | // Export the logger
 9 | module.exports = {
10 |   // Log an SDK API call
11 |   logApiCall: function(method, params = {}) {
12 |     const logEntry = {
13 |       type: 'api-call',
14 |       method,
15 |       params,
16 |       timestamp: new Date()
17 |     };
18 | 
19 |     // Emit the log event
20 |     logger.emit('log', logEntry);
21 | 
22 |     // Return a reference to the logger for chaining
23 |     return this;
24 |   },
25 | 
26 |   // Log an SDK event
27 |   logEvent: function(eventType, data = {}) {
28 |     const logEntry = {
29 |       type: 'event',
30 |       eventType,
31 |       data,
32 |       timestamp: new Date()
33 |     };
34 | 
35 |     // Emit the log event
36 |     logger.emit('log', logEntry);
37 | 
38 |     // Return a reference to the logger for chaining
39 |     return this;
40 |   },
41 | 
42 |   // Log an error
43 |   logError: function(errorType, message) {
44 |     const logEntry = {
45 |       type: 'error',
46 |       errorType,
47 |       message,
48 |       timestamp: new Date()
49 |     };
50 | 
51 |     // Emit the log event
52 |     logger.emit('log', logEntry);
53 | 
54 |     // Return a reference to the logger for chaining
55 |     return this;
56 |   },
57 | 
58 |   // Log a generic message
59 |   log: function(message, level = 'info') {
60 |     const logEntry = {
61 |       type: level,
62 |       message,
63 |       timestamp: new Date()
64 |     };
65 | 
66 |     // Emit the log event
67 |     logger.emit('log', logEntry);
68 | 
69 |     // Return a reference to the logger for chaining
70 |     return this;
71 |   },
72 | 
73 |   // Set up a listener for logs
74 |   onLog: function(callback) {
75 |     logger.on('log', callback);
76 |     return this;
77 |   },
78 | 
79 |   // Remove a log listener
80 |   removeLogListener: function(callback) {
81 |     logger.off('log', callback);
82 |     return this;
83 |   }
84 | };
85 | 


--------------------------------------------------------------------------------
/src/server.js:
--------------------------------------------------------------------------------
 1 | const express = require('express');
 2 | const axios = require('axios');
 3 | const app = express();
 4 | 
 5 | require('dotenv').config();
 6 | 
 7 | // API configuration for Recall.ai
 8 | const RECALLAI_API_URL = process.env.RECALLAI_API_URL || 'https://api.recall.ai';
 9 | const RECALLAI_API_KEY = process.env.RECALLAI_API_KEY;
10 | 
11 | app.get('/start-recording', async (req, res) => {
12 |     console.log(`Creating upload token with API key: ${RECALLAI_API_KEY.slice(0,4)}...`);
13 | 
14 |     if (!RECALLAI_API_KEY) {
15 |         console.error("RECALLAI_API_KEY is missing! Set it in .env file");
16 |         return res.json({ status: 'error', message: 'RECALLAI_API_KEY is missing' });
17 |     }
18 | 
19 |     const url = `${RECALLAI_API_URL}/api/v1/sdk_upload/`;
20 | 
21 |     try {
22 |         const response = await axios.post(url, {
23 |             recording_config: {
24 |                 transcript: {
25 |                     provider: {
26 |                         assembly_ai_v3_streaming: {}
27 |                     }
28 |                 },
29 |                 realtime_endpoints: [
30 |                     {
31 |                         type: "desktop_sdk_callback",
32 |                         events: [
33 |                             "participant_events.join",
34 |                             "video_separate_png.data",
35 |                             "transcript.data",
36 |                             "transcript.provider_data"
37 |                         ]
38 |                     },
39 |                 ],
40 |             }
41 |         }, {
42 |             headers: { 'Authorization': `Token ${RECALLAI_API_KEY}` },
43 |             timeout: 9000,
44 |         });
45 | 
46 |         res.json({ status: 'success', upload_token: response.data.upload_token });
47 |     } catch (e) {
48 |         console.error("Error creating upload token:", e.errors || e.response?.data || e.message);
49 |         res.json({ status: 'error', message: e.message });
50 |     }
51 | });
52 | 
53 | if (require.main === module) {
54 |     app.listen(13373, () => {
55 |         console.log(`Server listening on http://localhost:13373`);
56 |     });
57 | }
58 | 
59 | module.exports = app;
60 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "muesli",
 3 |   "productName": "Muesli",
 4 |   "version": "1.0.0",
 5 |   "description": "Muesli meeting recorder",
 6 |   "main": ".webpack/main",
 7 |   "scripts": {
 8 |     "start": "concurrently \"npm run start:server\" \"npm run start:electron\"",
 9 |     "start:electron": "electron-forge start",
10 |     "package": "electron-forge package",
11 |     "make": "electron-forge make",
12 |     "publish": "electron-forge publish",
13 |     "lint": "echo \"No linting configured\"",
14 |     "start:server": "node ./src/server.js"
15 |   },
16 |   "keywords": [],
17 |   "author": {
18 |     "name": "Nick Faro",
19 |     "email": "yux50000@hotmail.com"
20 |   },
21 |   "license": "MIT",
22 |   "devDependencies": {
23 |     "@babel/plugin-proposal-class-properties": "^7.18.6",
24 |     "@electron-forge/cli": "^7.8.0",
25 |     "@electron-forge/maker-deb": "^7.8.0",
26 |     "@electron-forge/maker-dmg": "^7.8.1",
27 |     "@electron-forge/maker-rpm": "^7.8.0",
28 |     "@electron-forge/maker-squirrel": "^7.8.0",
29 |     "@electron-forge/maker-zip": "^7.8.0",
30 |     "@electron-forge/plugin-auto-unpack-natives": "^7.8.0",
31 |     "@electron-forge/plugin-fuses": "^7.8.0",
32 |     "@electron-forge/plugin-webpack": "^7.8.0",
33 |     "@electron/fuses": "^1.8.0",
34 |     "@vercel/webpack-asset-relocator-loader": "^1.7.3",
35 |     "css-loader": "^6.11.0",
36 |     "electron": "36.0.1",
37 |     "node-loader": "^2.1.0",
38 |     "style-loader": "^3.3.4"
39 |   },
40 |   "overrides": {
41 |     "@electron/packager": {
42 |       "@electron/osx-sign": "github:recallai/osx-sign"
43 |     }
44 |   },
45 |   "dependencies": {
46 |     "@anthropic-ai/sdk": "^0.40.1",
47 |     "@recallai/desktop-sdk": "^2.0.0",
48 |     "@timfish/forge-externals-plugin": "^0.2.1",
49 |     "axios": "^1.9.0",
50 |     "codemirror": "^6.0.1",
51 |     "concurrently": "^9.2.1",
52 |     "dotenv": "^16.5.0",
53 |     "easymde": "^2.20.0",
54 |     "electron-squirrel-startup": "^1.0.1",
55 |     "express": "^4.18.2",
56 |     "marked": "^5.0.0",
57 |     "openai": "^4.97.0",
58 |     "react": "^19.1.0",
59 |     "react-dom": "^19.1.0",
60 |     "react-markdown": "^10.1.0",
61 |     "simplemde": "^1.11.2"
62 |   }
63 | }
64 | 


--------------------------------------------------------------------------------
/src/pages/note-editor/renderer.js:
--------------------------------------------------------------------------------
 1 | // Import styles
 2 | import './styles.css';
 3 | 
 4 | // Initialize the markdown editor when the DOM is loaded
 5 | document.addEventListener('DOMContentLoaded', () => {
 6 |   // Initialize SimpleMDE Markdown Editor
 7 |   const editor = new SimpleMDE({
 8 |     element: document.getElementById('editor'),
 9 |     spellChecker: false,
10 |     autofocus: true,
11 |     status: false,
12 |     toolbar: [
13 |       'bold', 'italic', 'heading', '|', 
14 |       'quote', 'unordered-list', 'ordered-list', '|',
15 |       'link', 'image', '|',
16 |       'preview', 'side-by-side', 'fullscreen',
17 |     ],
18 |     placeholder: 'Write your notes here...',
19 |     initialValue: document.getElementById('editor').textContent.trim(),
20 |   });
21 | 
22 |   // Handle sidebar toggle
23 |   const toggleSidebarBtn = document.getElementById('toggleSidebar');
24 |   const sidebar = document.getElementById('sidebar');
25 |   const editorContent = document.querySelector('.editor-content');
26 |   
27 |   toggleSidebarBtn.addEventListener('click', () => {
28 |     sidebar.classList.toggle('hidden');
29 |     editorContent.classList.toggle('full-width');
30 |   });
31 | 
32 |   // Handle back button
33 |   const backButton = document.getElementById('backButton');
34 |   backButton.addEventListener('click', () => {
35 |     window.electronAPI.navigate('home');
36 |   });
37 | 
38 |   // Chat input handling
39 |   const chatInput = document.getElementById('chatInput');
40 |   const sendButton = document.getElementById('sendButton');
41 |   
42 |   // When send button is clicked
43 |   sendButton.addEventListener('click', () => {
44 |     const message = chatInput.value.trim();
45 |     if (message) {
46 |       console.log('Sending message:', message);
47 |       // Here you would handle the AI chat functionality
48 |       // For now, just clear the input
49 |       chatInput.value = '';
50 |     }
51 |   });
52 |   
53 |   // Send message on Enter key
54 |   chatInput.addEventListener('keypress', (e) => {
55 |     if (e.key === 'Enter') {
56 |       sendButton.click();
57 |     }
58 |   });
59 | 
60 |   // Handle share buttons
61 |   const shareButtons = document.querySelectorAll('.share-btn');
62 |   shareButtons.forEach(button => {
63 |     button.addEventListener('click', () => {
64 |       const action = button.textContent.trim();
65 |       console.log(`Share action: ${action}`);
66 |       // Implement actual sharing functionality here
67 |     });
68 |   });
69 | 
70 |   // Handle AI option buttons
71 |   const aiButtons = document.querySelectorAll('.ai-btn');
72 |   aiButtons.forEach(button => {
73 |     button.addEventListener('click', () => {
74 |       const action = button.textContent.trim();
75 |       console.log(`AI action: ${action}`);
76 |       // Implement actual AI functionality here
77 |     });
78 |   });
79 | });


--------------------------------------------------------------------------------
/src/preload.js:
--------------------------------------------------------------------------------
 1 | // See the Electron documentation for details on how to use preload scripts:
 2 | // https://www.electronjs.org/docs/latest/tutorial/process-model#preload-scripts
 3 | 
 4 | const { contextBridge, ipcRenderer } = require('electron');
 5 | 
 6 | // Set up the SDK logger bridge between main and renderer
 7 | contextBridge.exposeInMainWorld('sdkLoggerBridge', {
 8 |   // Receive logs from main process
 9 |   onSdkLog: (callback) => ipcRenderer.on('sdk-log', (_, logEntry) => callback(logEntry)),
10 | 
11 |   // Send logs from renderer to main process
12 |   sendSdkLog: (logEntry) => ipcRenderer.send('sdk-log', logEntry)
13 | });
14 | 
15 | contextBridge.exposeInMainWorld('electronAPI', {
16 |   navigate: (page) => ipcRenderer.send('navigate', page),
17 |   saveMeetingsData: (data) => ipcRenderer.invoke('saveMeetingsData', data),
18 |   loadMeetingsData: () => ipcRenderer.invoke('loadMeetingsData'),
19 |   deleteMeeting: (meetingId) => ipcRenderer.invoke('deleteMeeting', meetingId),
20 |   generateMeetingSummary: (meetingId) => ipcRenderer.invoke('generateMeetingSummary', meetingId),
21 |   generateMeetingSummaryStreaming: (meetingId) => ipcRenderer.invoke('generateMeetingSummaryStreaming', meetingId),
22 |   startManualRecording: (meetingId) => ipcRenderer.invoke('startManualRecording', meetingId),
23 |   stopManualRecording: (recordingId) => ipcRenderer.invoke('stopManualRecording', recordingId),
24 |   debugGetHandlers: () => ipcRenderer.invoke('debugGetHandlers'),
25 |   checkForDetectedMeeting: () => ipcRenderer.invoke('checkForDetectedMeeting'),
26 |   joinDetectedMeeting: () => ipcRenderer.invoke('joinDetectedMeeting'),
27 |   onOpenMeetingNote: (callback) => ipcRenderer.on('open-meeting-note', (_, meetingId) => callback(meetingId)),
28 |   onRecordingCompleted: (callback) => ipcRenderer.on('recording-completed', (_, meetingId) => callback(meetingId)),
29 |   onTranscriptUpdated: (callback) => ipcRenderer.on('transcript-updated', (_, meetingId) => callback(meetingId)),
30 |   onSummaryGenerated: (callback) => ipcRenderer.on('summary-generated', (_, meetingId) => callback(meetingId)),
31 |   onSummaryUpdate: (callback) => ipcRenderer.on('summary-update', (_, data) => callback(data)),
32 |   onRecordingStateChange: (callback) => ipcRenderer.on('recording-state-change', (_, data) => callback(data)),
33 |   onParticipantsUpdated: (callback) => ipcRenderer.on('participants-updated', (_, meetingId) => callback(meetingId)),
34 |   onVideoFrame: (callback) => ipcRenderer.on('video-frame', (_, data) => callback(data)),
35 |   onMeetingDetectionStatus: (callback) => ipcRenderer.on('meeting-detection-status', (_, data) => callback(data)),
36 |   onMeetingTitleUpdated: (callback) => ipcRenderer.on('meeting-title-updated', (_, data) => callback(data)),
37 |   getActiveRecordingId: (noteId) => ipcRenderer.invoke('getActiveRecordingId', noteId)
38 | });
39 | 


--------------------------------------------------------------------------------
/forge.config.js:
--------------------------------------------------------------------------------
 1 | const { FusesPlugin } = require('@electron-forge/plugin-fuses');
 2 | const { FuseV1Options, FuseVersion } = require('@electron/fuses');
 3 | 
 4 | module.exports = {
 5 |   packagerConfig: {
 6 |     asar: {
 7 |       unpackDir: "node_modules/@recallai"
 8 |     },
 9 |     osxSign: {
10 |       continueOnError: false,
11 |       optionsForFile: (_) => {
12 |         // Here, we keep it simple and return a single entitlements.plist file.
13 |         // You can use this callback to map different sets of entitlements
14 |         // to specific files in your packaged app.
15 |         return {
16 |           entitlements: './Entitlements.plist'
17 |         };
18 |       }
19 |     },
20 |     icon: './muesli',
21 |     extendInfo: {
22 |       NSUserNotificationAlertStyle: "alert",
23 |     }
24 |   },
25 |   rebuildConfig: {},
26 |   makers: [
27 |     {
28 |       name: '@electron-forge/maker-dmg'
29 |     },
30 |     // {
31 |     //   name: '@electron-forge/maker-squirrel',
32 |     //   config: {},
33 |     // },
34 |     // {
35 |     //   name: '@electron-forge/maker-zip',
36 |     //   platforms: ['darwin'],
37 |     // },
38 |     // {
39 |     //   name: '@electron-forge/maker-deb',
40 |     //   config: {},
41 |     // },
42 |     // {
43 |     //   name: '@electron-forge/maker-rpm',
44 |     //   config: {},
45 |     // },
46 |   ],
47 |   plugins: [
48 |     {
49 |       name: '@electron-forge/plugin-auto-unpack-natives',
50 |       config: {},
51 |     },
52 |     {
53 |       name: '@electron-forge/plugin-webpack',
54 |       config: {
55 |         devContentSecurityPolicy: "default-src * 'unsafe-inline' 'unsafe-eval' data: blob: filesystem: mediastream: file:;",
56 |         mainConfig: './webpack.main.config.js',
57 |         renderer: {
58 |           config: './webpack.renderer.config.js',
59 |           entryPoints: [
60 |             {
61 |               html: './src/index.html',
62 |               js: './src/renderer.js',
63 |               name: 'main_window',
64 |               preload: {
65 |                 js: './src/preload.js',
66 |               },
67 |             },
68 |           ],
69 |         },
70 |       },
71 |     },
72 |     {
73 |       name: "@timfish/forge-externals-plugin",
74 |       config: {
75 |         externals: ["@recallai/desktop-sdk"],
76 |         includeDeps: true
77 |       }
78 |     },
79 |     // Fuses are used to enable/disable various Electron functionality
80 |     // at package time, before code signing the application
81 |     new FusesPlugin({
82 |       version: FuseVersion.V1,
83 |       [FuseV1Options.RunAsNode]: false,
84 |       [FuseV1Options.EnableCookieEncryption]: true,
85 |       [FuseV1Options.EnableNodeOptionsEnvironmentVariable]: false,
86 |       [FuseV1Options.EnableNodeCliInspectArguments]: false,
87 |       [FuseV1Options.EnableEmbeddedAsarIntegrityValidation]: true,
88 |       [FuseV1Options.OnlyLoadAppFromAsar]: true,
89 |     }),
90 |   ],
91 | };
92 | 


--------------------------------------------------------------------------------
/src/pages/note-editor/styles.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   --primary-bg: #f9f9f9;
  3 |   --card-bg: #fff;
  4 |   --light-purple: #f3e9ff;
  5 |   --light-green: #e8f5e9;
  6 |   --border-color: #e0e0e0;
  7 |   --text-primary: #000;
  8 |   --text-secondary: #666;
  9 |   --sidebar-width: 320px;
 10 | }
 11 | 
 12 | * {
 13 |   box-sizing: border-box;
 14 |   margin: 0;
 15 |   padding: 0;
 16 | }
 17 | 
 18 | body {
 19 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
 20 |   background-color: var(--primary-bg);
 21 |   margin: 0;
 22 |   overflow-x: hidden;
 23 |   color: var(--text-primary);
 24 | }
 25 | 
 26 | .app-container {
 27 |   display: flex;
 28 |   flex-direction: column;
 29 |   min-height: 100vh;
 30 | }
 31 | 
 32 | /* Header Styles */
 33 | .header {
 34 |   display: flex;
 35 |   justify-content: space-between;
 36 |   align-items: center;
 37 |   padding: 10px 20px;
 38 |   background-color: var(--card-bg);
 39 |   border-bottom: 1px solid var(--border-color);
 40 |   position: sticky;
 41 |   top: 0;
 42 |   z-index: 100;
 43 | }
 44 | 
 45 | #drag-region {
 46 |   -webkit-app-region: drag;
 47 | }
 48 | 
 49 | .header-left, .header-right {
 50 |   display: flex;
 51 |   align-items: center;
 52 | }
 53 | 
 54 | .header-center {
 55 |   flex-grow: 1;
 56 |   max-width: 400px;
 57 |   margin: 0 20px;
 58 | }
 59 | 
 60 | .search-container {
 61 |   position: relative;
 62 |   display: flex;
 63 |   align-items: center;
 64 | }
 65 | 
 66 | .search-icon {
 67 |   position: absolute;
 68 |   left: 10px;
 69 |   color: var(--text-secondary);
 70 |   display: flex;
 71 |   align-items: center;
 72 |   justify-content: center;
 73 | }
 74 | 
 75 | .search-input {
 76 |   width: 100%;
 77 |   padding: 8px 8px 8px 35px;
 78 |   border-radius: 5px;
 79 |   border: 1px solid var(--border-color);
 80 |   background-color: #f2f2f2;
 81 |   font-size: 14px;
 82 |   -webkit-app-region: no-drag;
 83 | }
 84 | 
 85 | .btn {
 86 |   padding: 8px 16px;
 87 |   border-radius: 5px;
 88 |   border: none;
 89 |   cursor: pointer;
 90 |   font-weight: 500;
 91 |   -webkit-app-region: no-drag;
 92 |   display: flex;
 93 |   align-items: center;
 94 |   justify-content: center;
 95 | }
 96 | 
 97 | .back-btn {
 98 |   background-color: transparent;
 99 |   color: var(--text-secondary);
100 |   padding: 8px;
101 | }
102 | 
103 | .toggle-sidebar-btn {
104 |   background-color: transparent;
105 |   color: var(--text-secondary);
106 |   padding: 8px;
107 |   margin-right: 10px;
108 |   display: none;
109 | }
110 | 
111 | .user-avatar {
112 |   width: 32px;
113 |   height: 32px;
114 |   border-radius: 50%;
115 |   overflow: hidden;
116 |   background-color: #ddd;
117 |   -webkit-app-region: no-drag;
118 | }
119 | 
120 | /* Note Editor Layout */
121 | .note-container {
122 |   display: flex;
123 |   flex: 1;
124 |   position: relative;
125 | }
126 | 
127 | .editor-content {
128 |   flex: 1;
129 |   padding: 40px;
130 |   background-color: var(--card-bg);
131 |   max-width: calc(100% - var(--sidebar-width));
132 |   transition: max-width 0.3s ease;
133 | }
134 | 
135 | .editor-content.full-width {
136 |   max-width: 100%;
137 | }
138 | 
139 | .note-header {
140 |   margin-bottom: 30px;
141 | }
142 | 
143 | .note-title {
144 |   font-size: 28px;
145 |   font-weight: 600;
146 |   margin-bottom: 10px;
147 | }
148 | 
149 | .note-meta {
150 |   display: flex;
151 |   gap: 15px;
152 |   color: var(--text-secondary);
153 |   font-size: 14px;
154 |   margin-top: 10px;
155 | }
156 | 
157 | .note-date, .note-author {
158 |   display: flex;
159 |   align-items: center;
160 |   gap: 5px;
161 | }
162 | 
163 | /* Editor */
164 | .CodeMirror, .editor-preview {
165 |   font-size: 16px;
166 |   line-height: 1.6;
167 | }
168 | 
169 | .CodeMirror {
170 |   border: none;
171 |   height: calc(100vh - 230px);
172 | }
173 | 
174 | .editor-toolbar {
175 |   border: none;
176 |   opacity: 0.8;
177 | }
178 | 
179 | /* Sidebar */
180 | .sidebar {
181 |   width: var(--sidebar-width);
182 |   background-color: var(--card-bg);
183 |   border-left: 1px solid var(--border-color);
184 |   padding: 20px;
185 |   overflow-y: auto;
186 |   transition: transform 0.3s ease;
187 | }
188 | 
189 | .sidebar.hidden {
190 |   transform: translateX(var(--sidebar-width));
191 | }
192 | 
193 | .sidebar-section {
194 |   margin-bottom: 30px;
195 | }
196 | 
197 | .sidebar-section h3 {
198 |   font-size: 14px;
199 |   color: var(--text-secondary);
200 |   margin-bottom: 15px;
201 |   font-weight: 500;
202 | }
203 | 
204 | .share-options, .share-export {
205 |   display: flex;
206 |   gap: 10px;
207 |   margin-bottom: 15px;
208 | }
209 | 
210 | .share-btn {
211 |   display: flex;
212 |   align-items: center;
213 |   gap: 8px;
214 |   padding: 8px 16px;
215 |   border-radius: 5px;
216 |   border: 1px solid var(--border-color);
217 |   background-color: var(--card-bg);
218 |   color: var(--text-primary);
219 |   font-size: 14px;
220 |   cursor: pointer;
221 |   flex: 1;
222 |   justify-content: center;
223 | }
224 | 
225 | .share-btn.wide {
226 |   flex: 1;
227 | }
228 | 
229 | .ai-options {
230 |   display: flex;
231 |   flex-direction: column;
232 |   gap: 10px;
233 | }
234 | 
235 | .ai-btn {
236 |   padding: 10px 16px;
237 |   border-radius: 5px;
238 |   border: 1px solid var(--border-color);
239 |   background-color: var(--card-bg);
240 |   color: var(--text-primary);
241 |   font-size: 14px;
242 |   cursor: pointer;
243 |   text-align: left;
244 | }
245 | 
246 | /* Chat Input */
247 | .chat-input {
248 |   display: flex;
249 |   margin: 20px auto;
250 |   width: 90%;
251 |   max-width: 800px;
252 |   position: relative;
253 |   bottom: 20px;
254 | }
255 | 
256 | #chatInput {
257 |   flex: 1;
258 |   padding: 12px 20px;
259 |   border-radius: 20px;
260 |   border: 1px solid var(--border-color);
261 |   font-size: 14px;
262 |   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
263 | }
264 | 
265 | #sendButton {
266 |   position: absolute;
267 |   right: 10px;
268 |   top: 50%;
269 |   transform: translateY(-50%);
270 |   background: transparent;
271 |   border: none;
272 |   cursor: pointer;
273 | }
274 | 
275 | /* SimpleMDE customizations */
276 | .CodeMirror-fullscreen, .editor-preview-side {
277 |   z-index: 999;
278 | }
279 | 
280 | .editor-toolbar.fullscreen {
281 |   z-index: 1000;
282 | }
283 | 
284 | /* Custom markdown rendering */
285 | .editor-preview h1, .editor-preview-side h1 {
286 |   font-size: 22px;
287 |   color: #333;
288 |   margin: 25px 0 15px 0;
289 | }
290 | 
291 | .editor-preview h2, .editor-preview-side h2 {
292 |   font-size: 18px;
293 |   color: #444;
294 |   margin: 20px 0 10px 0;
295 | }
296 | 
297 | .editor-preview ul, .editor-preview-side ul {
298 |   padding-left: 20px;
299 |   margin: 10px 0;
300 | }
301 | 
302 | .editor-preview a, .editor-preview-side a {
303 |   color: #0077ff;
304 |   text-decoration: none;
305 | }
306 | 
307 | .editor-preview a:hover, .editor-preview-side a:hover {
308 |   text-decoration: underline;
309 | }
310 | 
311 | /* Make code look nice */
312 | .editor-preview code, .editor-preview-side code {
313 |   background-color: #f4f4f4;
314 |   padding: 2px 4px;
315 |   border-radius: 3px;
316 |   font-family: monospace;
317 | }
318 | 
319 | /* Mobile adjustments */
320 | @media (max-width: 768px) {
321 |   .editor-content {
322 |     padding: 20px;
323 |   }
324 | 
325 |   .sidebar {
326 |     width: 100%;
327 |     position: fixed;
328 |     top: 0;
329 |     right: 0;
330 |     bottom: 0;
331 |     z-index: 200;
332 |     transform: translateX(100%);
333 |   }
334 | 
335 |   .sidebar.hidden {
336 |     transform: translateX(0);
337 |   }
338 | 
339 |   .editor-content {
340 |     max-width: 100%;
341 |   }
342 | }
343 | 


--------------------------------------------------------------------------------
/src/pages/note-editor/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <title>Muesli - Note Editor</title>
  6 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
  7 |     <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
  8 |   </head>
  9 |   <body>
 10 |     <div class="app-container">
 11 |       <header class="header" id="drag-region">
 12 |         <div class="header-left">
 13 |           <button class="btn back-btn" id="backButton">
 14 |             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 15 |               <path d="M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z" fill="currentColor"/>
 16 |             </svg>
 17 |           </button>
 18 |         </div>
 19 |         <div class="header-center">
 20 |           <div class="search-container">
 21 |             <span class="search-icon">
 22 |               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 23 |                 <path d="M15.5 14H14.71L14.43 13.73C15.41 12.59 16 11.11 16 9.5C16 5.91 13.09 3 9.5 3C5.91 3 3 5.91 3 9.5C3 13.09 5.91 16 9.5 16C11.11 16 12.59 15.41 13.73 14.43L14 14.71V15.5L19 20.49L20.49 19L15.5 14ZM9.5 14C7.01 14 5 11.99 5 9.5C5 7.01 7.01 5 9.5 5C11.99 5 14 7.01 14 9.5C14 11.99 11.99 14 9.5 14Z" fill="#666666"/>
 24 |               </svg>
 25 |             </span>
 26 |             <input type="text" class="search-input" placeholder="Search">
 27 |           </div>
 28 |         </div>
 29 |         <div class="header-right">
 30 |           <button id="toggleSidebar" class="btn toggle-sidebar-btn">
 31 |             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 32 |               <path d="M3 18H21V16H3V18ZM3 13H21V11H3V13ZM3 6V8H21V6H3Z" fill="#666666"/>
 33 |             </svg>
 34 |           </button>
 35 |           <div class="user-avatar">
 36 |             <svg width="32" height="32" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
 37 |               <rect width="40" height="40" rx="20" fill="#f0f0f0"/>
 38 |               <path d="M20 20C22.7614 20 25 17.7614 25 15C25 12.2386 22.7614 10 20 10C17.2386 10 15 12.2386 15 15C15 17.7614 17.2386 20 20 20Z" fill="#a0a0a0"/>
 39 |               <path d="M12 31C12 26.0294 15.5817 22 20 22C24.4183 22 28 26.0294 28 31" stroke="#a0a0a0" stroke-width="4"/>
 40 |             </svg>
 41 |           </div>
 42 |         </div>
 43 |       </header>
 44 |       
 45 |       <div class="note-container">
 46 |         <main class="editor-content">
 47 |           <div class="note-header">
 48 |             <h1 id="noteTitle">Paint shopping plan</h1>
 49 |             <div class="note-meta">
 50 |               <span class="note-date">
 51 |                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 52 |                   <path d="M19 4H18V2H16V4H8V2H6V4H5C3.89 4 3.01 4.9 3.01 6L3 20C3 21.1 3.89 22 5 22H19C20.1 22 21 21.1 21 20V6C21 4.9 20.1 4 19 4ZM19 20H5V10H19V20ZM19 8H5V6H19V8ZM9 14H7V12H9V14ZM13 14H11V12H13V14ZM17 14H15V12H17V14ZM9 18H7V16H9V18ZM13 18H11V16H13V18ZM17 18H15V16H17V18Z" fill="#6947BD"/>
 53 |                 </svg>
 54 |                 Apr 24
 55 |               </span>
 56 |               <span class="note-author">
 57 |                 <svg width="14" height="14" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
 58 |                   <rect width="40" height="40" rx="20" fill="#f0f0f0"/>
 59 |                   <path d="M20 20C22.7614 20 25 17.7614 25 15C25 12.2386 22.7614 10 20 10C17.2386 10 15 12.2386 15 15C15 17.7614 17.2386 20 20 20Z" fill="#a0a0a0"/>
 60 |                   <path d="M12 31C12 26.0294 15.5817 22 20 22C24.4183 22 28 26.0294 28 31" stroke="#a0a0a0" stroke-width="4"/>
 61 |                 </svg>
 62 |                 Me
 63 |               </span>
 64 |             </div>
 65 |           </div>
 66 |           <div id="editor">
 67 | # Meeting Title
 68 | * Paint shopping plan
 69 | 
 70 | # Meeting Date and Time
 71 | * April 24, 2025, 22:36:12
 72 | 
 73 | # Participants
 74 | * Nick Faro
 75 | 
 76 | # Description
 77 | * The meeting involved Nick Faro discussing plans to purchase a can of paint. The conversation was brief and included a humorous remark about going to Mars. There were no specific action items or further details discussed during the meeting.
 78 | 
 79 | Chat with meeting transcript: https://notes.granola.ai/d/393a95cf-4788-4a47-9deb-3952c665a56b
 80 | </div>
 81 |         </main>
 82 |         
 83 |         <aside class="sidebar" id="sidebar">
 84 |           <div class="sidebar-content">
 85 |             <section class="sidebar-section">
 86 |               <h3>SHARE NOTES</h3>
 87 |               <div class="share-options">
 88 |                 <button class="share-btn">
 89 |                   <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 90 |                     <path d="M3.9 12C3.9 10.29 5.29 8.9 7 8.9H11V7H7C4.24 7 2 9.24 2 12C2 14.76 4.24 17 7 17H11V15.1H7C5.29 15.1 3.9 13.71 3.9 12ZM8 13H16V11H8V13ZM17 7H13V8.9H17C18.71 8.9 20.1 10.29 20.1 12C20.1 13.71 18.71 15.1 17 15.1H13V17H17C19.76 17 22 14.76 22 12C22 9.24 19.76 7 17 7Z" fill="#666666"/>
 91 |                   </svg>
 92 |                   Copy link
 93 |                 </button>
 94 |                 <button class="share-btn">
 95 |                   <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 96 |                     <path d="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM19 19H5V5H19V19ZM7 10H9V17H7V10ZM11 7H13V17H11V7ZM15 13H17V17H15V13Z" fill="#666666"/>
 97 |                   </svg>
 98 |                   Copy text
 99 |                 </button>
100 |               </div>
101 |               
102 |               <div class="share-export">
103 |                 <button class="share-btn wide">
104 |                   <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
105 |                     <path d="M20 4H4C2.9 4 2.01 4.9 2.01 6L2 18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6C22 4.9 21.1 4 20 4ZM20 18H4V8L12 13L20 8V18ZM12 11L4 6H20L12 11Z" fill="#666666"/>
106 |                   </svg>
107 |                   Email
108 |                 </button>
109 |                 <button class="share-btn wide">
110 |                   <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
111 |                     <path d="M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6ZM20 6L12 11L4 6H20ZM20 18H4V8L12 13L20 8V18Z" fill="#4285F4"/>
112 |                   </svg>
113 |                   Slack
114 |                 </button>
115 |               </div>
116 |             </section>
117 |             
118 |             <section class="sidebar-section">
119 |               <h3>ASK MUESLI</h3>
120 |               <div class="ai-options">
121 |                 <button class="ai-btn">List action items</button>
122 |                 <button class="ai-btn">Write follow-up email</button>
123 |                 <button class="ai-btn">List Q&A</button>
124 |               </div>
125 |             </section>
126 |           </div>
127 |         </aside>
128 |       </div>
129 |       
130 |       <div class="chat-input">
131 |         <input type="text" id="chatInput" placeholder="Ask about the meeting..." />
132 |         <button id="sendButton">
133 |           <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
134 |             <path d="M2.01 21L23 12L2.01 3L2 10L17 12L2 14L2.01 21Z" fill="#0077FF"/>
135 |           </svg>
136 |         </button>
137 |       </div>
138 |     </div>
139 |     
140 |     <script src="renderer.js"></script>
141 |   </body>
142 | </html>


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <title>Muesli - Debug Notes</title>
  6 |   </head>
  7 |   <body>
  8 |     <div class="app-container">
  9 |       <header class="header" id="drag-region">
 10 |         <div class="header-left">
 11 |           <button class="btn back-btn" id="backButton" style="display: none;">
 12 |             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 13 |               <path d="M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z" fill="currentColor"/>
 14 |             </svg>
 15 |           </button>
 16 |         </div>
 17 |         <div class="header-center">
 18 |           <div class="search-container">
 19 |             <span class="search-icon">
 20 |               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 21 |                 <path d="M15.5 14H14.71L14.43 13.73C15.41 12.59 16 11.11 16 9.5C16 5.91 13.09 3 9.5 3C5.91 3 3 5.91 3 9.5C3 13.09 5.91 16 9.5 16C11.11 16 12.59 15.41 13.73 14.43L14 14.71V15.5L19 20.49L20.49 19L15.5 14ZM9.5 14C7.01 14 5 11.99 5 9.5C5 7.01 7.01 5 9.5 5C11.99 5 14 7.01 14 9.5C14 11.99 11.99 14 9.5 14Z" fill="#666666"/>
 22 |               </svg>
 23 |             </span>
 24 |             <input type="text" class="search-input" placeholder="Search notes">
 25 |           </div>
 26 |         </div>
 27 |         <div class="header-right">
 28 |           <button class="btn new-note-btn" id="newNoteBtn">Record In-person Meeting</button>
 29 |           <button class="btn join-meeting-btn" id="joinMeetingBtn">Record Meeting</button>
 30 |           <button id="toggleSidebar" class="btn toggle-sidebar-btn" style="display: none;">
 31 |             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 32 |               <path d="M3 18H21V16H3V18ZM3 13H21V11H3V13ZM3 6V8H21V6H3Z" fill="#666666"/>
 33 |             </svg>
 34 |           </button>
 35 |           <div class="user-avatar">
 36 |             <svg width="32" height="32" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
 37 |               <rect width="40" height="40" rx="20" fill="#f0f0f0"/>
 38 |               <path d="M20 20C22.7614 20 25 17.7614 25 15C25 12.2386 22.7614 10 20 10C17.2386 10 15 12.2386 15 15C15 17.7614 17.2386 20 20 20Z" fill="#a0a0a0"/>
 39 |               <path d="M12 31C12 26.0294 15.5817 22 20 22C24.4183 22 28 26.0294 28 31" stroke="#a0a0a0" stroke-width="4"/>
 40 |             </svg>
 41 |           </div>
 42 |         </div>
 43 |       </header>
 44 | 
 45 |       <!-- Home Screen View -->
 46 |       <div id="homeView">
 47 |         <main class="main-content">
 48 |           <div class="content-container">
 49 |             <!-- Only showing notes section, calendar hidden -->
 50 |             <section class="meetings-section">
 51 |               <h2 class="section-title">Notes</h2>
 52 |               <div class="meetings-list" id="notes-list">
 53 |                 <!-- Meeting cards will be inserted here by JavaScript -->
 54 |               </div>
 55 |             </section>
 56 |           </div>
 57 |         </main>
 58 |       </div>
 59 | 
 60 |       <!-- Note Editor View -->
 61 |       <div id="editorView" style="display: none;">
 62 |         <div class="note-container">
 63 |           <main class="editor-content">
 64 |             <div class="note-header">
 65 |               <div class="title-container">
 66 |                 <h1 id="noteTitle" contenteditable="true">Paint shopping plan</h1>
 67 |                 <div class="edit-icon">
 68 |                   <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 69 |                     <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" fill="#a0a0a0"/>
 70 |                   </svg>
 71 |                 </div>
 72 |               </div>
 73 |               <div class="note-meta">
 74 |                 <span class="note-date">
 75 |                   <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 76 |                     <path d="M19 4H18V2H16V4H8V2H6V4H5C3.89 4 3.01 4.9 3.01 6L3 20C3 21.1 3.89 22 5 22H19C20.1 22 21 21.1 21 20V6C21 4.9 20.1 4 19 4ZM19 20H5V10H19V20ZM19 8H5V6H19V8ZM9 14H7V12H9V14ZM13 14H11V12H13V14ZM17 14H15V12H17V14ZM9 18H7V16H9V18ZM13 18H11V16H13V18ZM17 18H15V16H17V18Z" fill="#6947BD"/>
 77 |                   </svg>
 78 |                   <span id="noteDate">Apr 24</span>
 79 |                 </span>
 80 |                 <span class="note-author">
 81 |                   <svg width="14" height="14" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
 82 |                     <rect width="40" height="40" rx="20" fill="#f0f0f0"/>
 83 |                     <path d="M20 20C22.7614 20 25 17.7614 25 15C25 12.2386 22.7614 10 20 10C17.2386 10 15 12.2386 15 15C15 17.7614 17.2386 20 20 20Z" fill="#a0a0a0"/>
 84 |                     <path d="M12 31C12 26.0294 15.5817 22 20 22C24.4183 22 28 26.0294 28 31" stroke="#a0a0a0" stroke-width="4"/>
 85 |                   </svg>
 86 |                   Me
 87 |                 </span>
 88 |               </div>
 89 |             </div>
 90 |             <textarea id="simple-editor"># Meeting Title
 91 | • Paint shopping plan
 92 | 
 93 | # Meeting Date and Time
 94 | • April 24, 2025, 22:36:12
 95 | 
 96 | # Participants
 97 | • Nick Faro
 98 | 
 99 | # Description
100 | • The meeting involved Nick Faro discussing plans to purchase a can of paint. The conversation was brief and included a humorous remark about going to Mars. There were no specific action items or further details discussed during the meeting.
101 | 
102 | Chat with meeting transcript: https://notes.granola.ai/d/393a95cf-4788-4a47-9deb-3952c665a56b</textarea>
103 |           </main>
104 | 
105 |           <aside class="sidebar" id="sidebar" style="display:none;">
106 |             <div class="sidebar-content">
107 |               <section class="sidebar-section">
108 |                 <h3>SHARE NOTES</h3>
109 |                 <div class="share-options">
110 |                   <button class="share-btn">
111 |                     <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
112 |                       <path d="M3.9 12C3.9 10.29 5.29 8.9 7 8.9H11V7H7C4.24 7 2 9.24 2 12C2 14.76 4.24 17 7 17H11V15.1H7C5.29 15.1 3.9 13.71 3.9 12ZM8 13H16V11H8V13ZM17 7H13V8.9H17C18.71 8.9 20.1 10.29 20.1 12C20.1 13.71 18.71 15.1 17 15.1H13V17H17C19.76 17 22 14.76 22 12C22 9.24 19.76 7 17 7Z" fill="#666666"/>
113 |                     </svg>
114 |                     Copy link
115 |                   </button>
116 |                   <button class="share-btn">
117 |                     <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
118 |                       <path d="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM19 19H5V5H19V19ZM7 10H9V17H7V10ZM11 7H13V17H11V7ZM15 13H17V17H15V13Z" fill="#666666"/>
119 |                     </svg>
120 |                     Copy text
121 |                   </button>
122 |                 </div>
123 | 
124 |                 <div class="share-export">
125 |                   <button class="share-btn wide">
126 |                     <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
127 |                       <path d="M20 4H4C2.9 4 2.01 4.9 2.01 6L2 18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6C22 4.9 21.1 4 20 4ZM20 18H4V8L12 13L20 8V18ZM12 11L4 6H20L12 11Z" fill="#666666"/>
128 |                     </svg>
129 |                     Email
130 |                   </button>
131 |                   <button class="share-btn wide">
132 |                     <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
133 |                       <path d="M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6ZM20 6L12 11L4 6H20ZM20 18H4V8L12 13L20 8V18Z" fill="#4285F4"/>
134 |                     </svg>
135 |                     Slack
136 |                   </button>
137 |                 </div>
138 |               </section>
139 | 
140 |               <section class="sidebar-section">
141 |                 <h3>ASK MUESLI</h3>
142 |                 <div class="ai-options">
143 |                   <button class="ai-btn">Generate meeting summary</button>
144 |                   <button class="ai-btn">List action items</button>
145 |                   <button class="ai-btn">Write follow-up email</button>
146 |                   <button class="ai-btn">List Q&A</button>
147 |                 </div>
148 |               </section>
149 |             </div>
150 |           </aside>
151 |         </div>
152 | 
153 |         <div class="floating-controls">
154 |           <div class="control-buttons">
155 |             <button class="control-btn record-btn" id="recordButton">
156 |               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="record-icon">
157 |                 <path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z" fill="currentColor"/>
158 |                 <path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z" fill="currentColor"/>
159 |               </svg>
160 |               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="stop-icon" style="display: none;">
161 |                 <path d="M6 6h12v12H6V6z" fill="currentColor"/>
162 |               </svg>
163 |             </button>
164 |             <button class="control-btn generate-btn">
165 |               <svg width="16" height="16" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-right: 4px;">
166 |                 <path d="M208,512a24.84,24.84,0,0,1-23.34-16l-39.84-103.6a16.06,16.06,0,0,0-9.19-9.19L32,343.34a25,25,0,0,1,0-46.68l103.6-39.84a16.06,16.06,0,0,0,9.19-9.19L184.66,144a25,25,0,0,1,46.68,0l39.84,103.6a16.06,16.06,0,0,0,9.19,9.19l103,39.63A25.49,25.49,0,0,1,400,320.52a24.82,24.82,0,0,1-16,22.82l-103.6,39.84a16.06,16.06,0,0,0-9.19,9.19L231.34,496A24.84,24.84,0,0,1,208,512Z" fill="currentColor"/>
167 |                 <path d="M88,176a14.67,14.67,0,0,1-13.69-9.4L57.45,122.76a7.28,7.28,0,0,0-4.21-4.21L9.4,101.69a14.67,14.67,0,0,1,0-27.38L53.24,57.45a7.31,7.31,0,0,0,4.21-4.21L74.16,9.79A15,15,0,0,1,86.23.11,14.67,14.67,0,0,1,101.69,9.4l16.86,43.84a7.31,7.31,0,0,0,4.21,4.21L166.6,74.31a14.67,14.67,0,0,1,0,27.38l-43.84,16.86a7.28,7.28,0,0,0-4.21,4.21L101.69,166.6A14.67,14.67,0,0,1,88,176Z" fill="currentColor"/>
168 |                 <path d="M400,256a16,16,0,0,1-14.93-10.26l-22.84-59.37a8,8,0,0,0-4.6-4.6l-59.37-22.84a16,16,0,0,1,0-29.86l59.37-22.84a8,8,0,0,0,4.6-4.6L384.9,42.68a16.45,16.45,0,0,1,13.17-10.57,16,16,0,0,1,16.86,10.15l22.84,59.37a8,8,0,0,0,4.6,4.6l59.37,22.84a16,16,0,0,1,0,29.86l-59.37,22.84a8,8,0,0,0-4.6,4.6l-22.84,59.37A16,16,0,0,1,400,256Z" fill="currentColor"/>
169 |               </svg>
170 |               Auto
171 |             </button>
172 |           </div>
173 |         </div>
174 | 
175 |         <div class="chat-input-container">
176 |           <div class="chat-input">
177 |             <input type="text" id="chatInput" placeholder="Ask about the meeting..." style="display: none;" />
178 |             <button id="sendButton" style="display: none;">
179 |               <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
180 |                 <path d="M2.01 21L23 12L2.01 3L2 10L17 12L2 14L2.01 21Z" fill="#0077FF"/>
181 |               </svg>
182 |             </button>
183 |           </div>
184 |         </div>
185 |       </div>
186 |     </div>
187 | 
188 |     <!-- Debug Panel -->
189 |     <div class="debug-panel hidden" id="debugPanel">
190 |       <div class="debug-panel-header" id="debug-drag-region">
191 |         <h3>Debugging Tools</h3>
192 |         <button class="debug-panel-close" id="closeDebugPanelBtn">
193 |           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
194 |             <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="currentColor"/>
195 |           </svg>
196 |         </button>
197 |       </div>
198 | 
199 |       <div class="debug-panel-content">
200 |         <!-- SDK Logger Section -->
201 |         <div class="debug-section" id="loggerSection">
202 |           <div class="debug-section-header">
203 |             <h4>RecallAI SDK Logger</h4>
204 |             <button class="debug-section-action" id="clearLoggerBtn">Clear</button>
205 |           </div>
206 |           <div class="debug-section-content" id="sdkLoggerContent">
207 |             <!-- Log entries will be added here dynamically -->
208 |           </div>
209 |         </div>
210 | 
211 |         <!-- Transcript Section -->
212 |         <div class="debug-section" id="transcriptSection">
213 |           <div class="debug-section-header">
214 |             <h4>Transcript</h4>
215 |           </div>
216 |           <div class="debug-section-content" id="transcriptContent">
217 |             <div class="placeholder-content">
218 |               <p>Live transcript will appear here during recording</p>
219 |             </div>
220 |           </div>
221 |         </div>
222 | 
223 |         <!-- Participants Section -->
224 |         <div class="debug-section" id="participantsSection">
225 |           <div class="debug-section-header">
226 |             <h4>Meeting Participants</h4>
227 |           </div>
228 |           <div class="debug-section-content" id="participantsContent">
229 |             <div class="placeholder-content">
230 |               <p>Detected participants will appear here</p>
231 |             </div>
232 |           </div>
233 |         </div>
234 | 
235 |         <!-- Participant Video Debug Section -->
236 |         <div class="debug-section" id="videoSection">
237 |           <div class="debug-section-header">
238 |             <h4>Participant Video</h4>
239 |           </div>
240 |           <div class="debug-section-content" id="videoContent">
241 |             <div class="placeholder-content video-placeholder">
242 |               <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
243 |                 <path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z" fill="#999"/>
244 |               </svg>
245 |               <p>Participant video will appear here</p>
246 |             </div>
247 |           </div>
248 |         </div>
249 | 
250 |         <!-- Screenshare Video Debug Section -->
251 |         <div class="debug-section" id="screenshareSection">
252 |           <div class="debug-section-header">
253 |             <h4>Screenshare</h4>
254 |           </div>
255 |           <div class="debug-section-content" id="screenshareContent">
256 |             <div class="placeholder-content video-placeholder">
257 |               <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
258 |                 <path d="M20 18c1.1 0 1.99-.9 1.99-2L22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6z" fill="#999"/>
259 |               </svg>
260 |               <p>Screenshare will appear here</p>
261 |             </div>
262 |           </div>
263 |         </div>
264 |       </div>
265 |     </div>
266 | 
267 |     <button class="debug-panel-toggle panel-hidden" id="debugPanelToggle">
268 |       <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
269 |         <path d="M20 8h-2.81c-.45-.78-1.07-1.45-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5c-.49 0-.96.06-1.41.17L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6 8h-4v-2h4v2zm0-4h-4v-2h4v2z" fill="currentColor"/>
270 |       </svg>
271 |     </button>
272 |   </body>
273 | </html>
274 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
   1 | :root {
   2 |   --primary-bg: #f9f9f9;
   3 |   --card-bg: #fff;
   4 |   --light-purple: #f3e9ff;
   5 |   --light-green: #e8f5e9;
   6 |   --border-color: #e0e0e0;
   7 |   --text-primary: #000;
   8 |   --text-secondary: #666;
   9 |   --sidebar-width: 320px;
  10 | }
  11 | 
  12 | * {
  13 |   box-sizing: border-box;
  14 |   margin: 0;
  15 |   padding: 0;
  16 | }
  17 | 
  18 | body {
  19 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  20 |   background-color: var(--primary-bg);
  21 |   margin: 0;
  22 |   overflow-x: hidden;
  23 |   color: var(--text-primary);
  24 |   min-height: 100vh;
  25 |   display: flex;
  26 | }
  27 | 
  28 | .app-container {
  29 |   display: flex;
  30 |   flex-direction: column;
  31 |   min-height: 100vh;
  32 |   width: 100%;
  33 |   transition: width 0.3s ease, margin-right 0.3s ease;
  34 |   flex: 1;
  35 | }
  36 | 
  37 | .app-container.debug-panel-open {
  38 |   width: 50%;
  39 |   max-width: 50%;
  40 | }
  41 | 
  42 | /* Header Styles */
  43 | .header {
  44 |   display: flex;
  45 |   justify-content: space-between;
  46 |   align-items: center;
  47 |   padding: 10px 20px;
  48 |   background-color: var(--card-bg);
  49 |   border-bottom: 1px solid var(--border-color);
  50 |   position: sticky;
  51 |   top: 0;
  52 |   z-index: 100;
  53 | }
  54 | 
  55 | #drag-region, #debug-drag-region {
  56 |   -webkit-app-region: drag;
  57 | }
  58 | 
  59 | .header-left, .header-right {
  60 |   display: flex;
  61 |   align-items: center;
  62 | }
  63 | 
  64 | .header-left {
  65 |   margin-left: 60px; /* Add space to avoid overlapping with macOS window controls */
  66 | }
  67 | 
  68 | .header-center {
  69 |   flex-grow: 1;
  70 |   max-width: 400px;
  71 |   margin: 0 20px;
  72 | }
  73 | 
  74 | .search-container {
  75 |   position: relative;
  76 |   display: flex;
  77 |   align-items: center;
  78 | }
  79 | 
  80 | .search-icon {
  81 |   position: absolute;
  82 |   left: 10px;
  83 |   color: var(--text-secondary);
  84 |   display: flex;
  85 |   align-items: center;
  86 |   justify-content: center;
  87 | }
  88 | 
  89 | .search-input {
  90 |   width: 100%;
  91 |   padding: 8px 8px 8px 35px;
  92 |   border-radius: 5px;
  93 |   border: 1px solid var(--border-color);
  94 |   background-color: #f2f2f2;
  95 |   font-size: 14px;
  96 |   -webkit-app-region: no-drag; /* Make input not draggable to allow text selection */
  97 | }
  98 | 
  99 | .btn {
 100 |   padding: 8px 16px;
 101 |   border-radius: 5px;
 102 |   border: none;
 103 |   cursor: pointer;
 104 |   font-weight: 500;
 105 |   -webkit-app-region: no-drag; /* Make button clickable */
 106 |   display: flex;
 107 |   align-items: center;
 108 |   justify-content: center;
 109 | }
 110 | 
 111 | .back-btn {
 112 |   background-color: transparent;
 113 |   color: var(--text-secondary);
 114 |   padding: 8px;
 115 | }
 116 | 
 117 | .toggle-sidebar-btn {
 118 |   background-color: transparent;
 119 |   color: var(--text-secondary);
 120 |   padding: 8px;
 121 |   margin-right: 10px;
 122 |   display: none;
 123 | }
 124 | 
 125 | .new-note-btn, .join-meeting-btn {
 126 |   background-color: var(--card-bg);
 127 |   border: 1px solid var(--border-color);
 128 |   margin-right: 10px;
 129 |   -webkit-app-region: no-drag; /* Make button clickable */
 130 | }
 131 | 
 132 | .join-meeting-btn {
 133 |   background-color: #007aff;
 134 |   color: white;
 135 | }
 136 | 
 137 | .join-meeting-btn:disabled {
 138 |   background-color: #ccc;
 139 |   color: #666;
 140 |   cursor: not-allowed;
 141 |   opacity: 0.6;
 142 | }
 143 | 
 144 | .user-avatar {
 145 |   width: 32px;
 146 |   height: 32px;
 147 |   border-radius: 50%;
 148 |   overflow: hidden;
 149 |   background-color: #ddd;
 150 |   -webkit-app-region: no-drag; /* Make avatar clickable */
 151 | }
 152 | 
 153 | .avatar-img {
 154 |   width: 100%;
 155 |   height: 100%;
 156 |   object-fit: cover;
 157 | }
 158 | 
 159 | /* Main Content Styles */
 160 | .main-content {
 161 |   padding: 20px;
 162 |   flex-grow: 1;
 163 |   width: 100%;
 164 | }
 165 | 
 166 | .content-container {
 167 |   max-width: 800px;
 168 |   margin: 0 auto;
 169 |   width: 100%;
 170 | }
 171 | 
 172 | .section-title {
 173 |   font-size: 18px;
 174 |   font-weight: 600;
 175 |   margin-bottom: 15px;
 176 |   margin-top: 25px;
 177 |   width: 100%;
 178 | }
 179 | 
 180 | .meetings-list {
 181 |   display: flex;
 182 |   flex-direction: column;
 183 |   gap: 10px;
 184 |   width: 100%;
 185 | }
 186 | 
 187 | .meeting-card {
 188 |   display: flex;
 189 |   align-items: center;
 190 |   padding: 15px;
 191 |   background-color: var(--card-bg);
 192 |   border-radius: 8px;
 193 |   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 194 |   cursor: pointer;
 195 |   transition: background-color 0.2s;
 196 | }
 197 | 
 198 | .meeting-card:hover {
 199 |   background-color: #f5f5f5;
 200 | }
 201 | 
 202 | .meeting-icon {
 203 |   margin-right: 15px;
 204 |   width: 40px;
 205 |   height: 40px;
 206 |   border-radius: 4px;
 207 |   display: flex;
 208 |   align-items: center;
 209 |   justify-content: center;
 210 |   font-size: 20px;
 211 | }
 212 | 
 213 | .meeting-content {
 214 |   flex-grow: 1;
 215 | }
 216 | 
 217 | .meeting-title {
 218 |   font-weight: 500;
 219 |   margin-bottom: 4px;
 220 | }
 221 | 
 222 | .meeting-time {
 223 |   font-size: 14px;
 224 |   color: var(--text-secondary);
 225 | }
 226 | 
 227 | .meeting-demo-link {
 228 |   color: #0077ff;
 229 |   text-decoration: none;
 230 |   cursor: pointer;
 231 | }
 232 | 
 233 | .meeting-actions {
 234 |   margin-left: auto;
 235 |   display: flex;
 236 |   align-items: center;
 237 |   opacity: 0; /* Hidden by default */
 238 |   transition: opacity 0.2s ease;
 239 | }
 240 | 
 241 | .meeting-card:hover .meeting-actions {
 242 |   opacity: 1; /* Show on hover */
 243 | }
 244 | 
 245 | .delete-meeting-btn {
 246 |   background: none;
 247 |   border: none;
 248 |   padding: 6px;
 249 |   cursor: pointer;
 250 |   color: #999;
 251 |   border-radius: 50%;
 252 |   display: flex;
 253 |   align-items: center;
 254 |   justify-content: center;
 255 |   transition: all 0.2s ease;
 256 | }
 257 | 
 258 | .delete-meeting-btn:hover {
 259 |   background-color: rgba(255, 0, 0, 0.1);
 260 |   color: #ff3b30;
 261 | }
 262 | 
 263 | .delete-meeting-btn:disabled {
 264 |   opacity: 0.5;
 265 |   cursor: not-allowed;
 266 | }
 267 | 
 268 | /* Spinner animation for loading states */
 269 | .spinner {
 270 |   animation: spin 1s linear infinite;
 271 | }
 272 | 
 273 | @keyframes spin {
 274 |   from {
 275 |     transform: rotate(0deg);
 276 |   }
 277 |   to {
 278 |     transform: rotate(360deg);
 279 |   }
 280 | }
 281 | 
 282 | .meeting-icon.calendar {
 283 |   background-color: var(--light-purple);
 284 | }
 285 | 
 286 | .meeting-icon.document {
 287 |   background-color: var(--light-green);
 288 | }
 289 | 
 290 | .profile-pic {
 291 |   width: 40px;
 292 |   height: 40px;
 293 |   border-radius: 4px;
 294 |   overflow: hidden;
 295 | }
 296 | 
 297 | .profile-pic img {
 298 |   width: 100%;
 299 |   height: 100%;
 300 |   object-fit: cover;
 301 | }
 302 | 
 303 | /* Note Editor Styles */
 304 | .note-container {
 305 |   display: flex;
 306 |   flex: 1;
 307 |   position: relative;
 308 |   height: calc(100vh - 120px);
 309 | }
 310 | 
 311 | .editor-content {
 312 |   flex: 1;
 313 |   padding: 40px;
 314 |   background-color: var(--card-bg);
 315 |   width: calc(100% - var(--sidebar-width));
 316 |   transition: width 0.3s ease, padding 0.3s ease;
 317 | }
 318 | 
 319 | .editor-content.full-width {
 320 |   width: 100%;
 321 | }
 322 | 
 323 | /* Adjust editor padding when debug panel is open */
 324 | .app-container.debug-panel-open .editor-content {
 325 |   padding: 20px;
 326 | }
 327 | 
 328 | /* Ensure content fits when both sidebar and debug panel are open */
 329 | .app-container.debug-panel-open .editor-content:not(.full-width) {
 330 |   padding: 15px;
 331 |   width: 100%;
 332 | }
 333 | 
 334 | .note-header {
 335 |   margin-bottom: 30px;
 336 | }
 337 | 
 338 | .title-container {
 339 |   display: flex;
 340 |   align-items: center;
 341 |   position: relative;
 342 | }
 343 | 
 344 | #noteTitle {
 345 |   outline: none;
 346 |   padding: 5px;
 347 |   border-radius: 4px;
 348 |   transition: background-color 0.2s;
 349 | }
 350 | 
 351 | #noteTitle:hover {
 352 |   background-color: rgba(0, 0, 0, 0.03);
 353 | }
 354 | 
 355 | #noteTitle:focus {
 356 |   background-color: rgba(0, 0, 0, 0.05);
 357 | }
 358 | 
 359 | .edit-icon {
 360 |   opacity: 0;
 361 |   margin-left: 8px;
 362 |   transition: opacity 0.2s;
 363 | }
 364 | 
 365 | .title-container:hover .edit-icon {
 366 |   opacity: 0.5;
 367 | }
 368 | 
 369 | .note-meta {
 370 |   display: flex;
 371 |   gap: 15px;
 372 |   color: var(--text-secondary);
 373 |   font-size: 14px;
 374 |   margin-top: 10px;
 375 | }
 376 | 
 377 | .note-date, .note-author {
 378 |   display: flex;
 379 |   align-items: center;
 380 |   gap: 5px;
 381 | }
 382 | 
 383 | /* Simple text editor styles */
 384 | #simple-editor {
 385 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
 386 |   font-size: 16px;
 387 |   line-height: 1.6;
 388 |   color: #333;
 389 |   background-color: white;
 390 |   padding: 20px;
 391 |   border: none;
 392 |   border-radius: 4px;
 393 |   width: 100%;
 394 |   height: calc(100vh - 250px);
 395 |   resize: none;
 396 |   outline: none;
 397 |   transition: font-size 0.3s ease, padding 0.3s ease;
 398 | }
 399 | 
 400 | /* Adjust editor content when debug panel is open */
 401 | .app-container.debug-panel-open #simple-editor {
 402 |   padding: 15px;
 403 |   font-size: 14px;
 404 | }
 405 | 
 406 | /* Sidebar */
 407 | .sidebar {
 408 |   width: var(--sidebar-width);
 409 |   position: absolute;
 410 |   top: 0;
 411 |   right: 0;
 412 |   bottom: 0;
 413 |   background-color: var(--card-bg);
 414 |   border-left: 1px solid var(--border-color);
 415 |   padding: 20px;
 416 |   overflow-y: auto;
 417 |   transition: transform 0.3s ease;
 418 | }
 419 | 
 420 | .sidebar.hidden {
 421 |   transform: translateX(100%);
 422 | }
 423 | 
 424 | .sidebar-section {
 425 |   margin-bottom: 30px;
 426 | }
 427 | 
 428 | .sidebar-section h3 {
 429 |   font-size: 14px;
 430 |   color: var(--text-secondary);
 431 |   margin-bottom: 15px;
 432 |   font-weight: 500;
 433 | }
 434 | 
 435 | .share-options, .share-export {
 436 |   display: flex;
 437 |   gap: 10px;
 438 |   margin-bottom: 15px;
 439 | }
 440 | 
 441 | .share-btn {
 442 |   display: flex;
 443 |   align-items: center;
 444 |   gap: 8px;
 445 |   padding: 8px 16px;
 446 |   border-radius: 5px;
 447 |   border: 1px solid var(--border-color);
 448 |   background-color: var(--card-bg);
 449 |   color: var(--text-primary);
 450 |   font-size: 14px;
 451 |   cursor: pointer;
 452 |   flex: 1;
 453 |   justify-content: center;
 454 | }
 455 | 
 456 | .share-btn.wide {
 457 |   flex: 1;
 458 | }
 459 | 
 460 | .ai-options {
 461 |   display: flex;
 462 |   flex-direction: column;
 463 |   gap: 10px;
 464 | }
 465 | 
 466 | .ai-btn {
 467 |   padding: 10px 16px;
 468 |   border-radius: 5px;
 469 |   border: 1px solid var(--border-color);
 470 |   background-color: var(--card-bg);
 471 |   color: var(--text-primary);
 472 |   font-size: 14px;
 473 |   cursor: pointer;
 474 |   text-align: left;
 475 | }
 476 | 
 477 | /* Floating Controls */
 478 | .floating-controls {
 479 |   position: fixed;
 480 |   bottom: 20px;
 481 |   left: 50%;
 482 |   transform: translateX(-50%);
 483 |   z-index: 50;
 484 |   display: flex;
 485 |   justify-content: center;
 486 | }
 487 | 
 488 | .control-buttons {
 489 |   display: flex;
 490 |   align-items: center;
 491 |   gap: 8px;
 492 |   padding: 5px;
 493 |   background-color: white;
 494 |   border-radius: 25px;
 495 |   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
 496 | }
 497 | 
 498 | .control-btn {
 499 |   display: flex;
 500 |   align-items: center;
 501 |   justify-content: center;
 502 |   background: #f5f5f5;
 503 |   border: none;
 504 |   border-radius: 20px;
 505 |   min-width: 36px;
 506 |   height: 36px;
 507 |   cursor: pointer;
 508 |   transition: background-color 0.2s, color 0.2s;
 509 |   color: #666;
 510 |   padding: 0 15px;
 511 |   font-size: 13px;
 512 |   font-weight: 500;
 513 | }
 514 | 
 515 | .control-btn:hover {
 516 |   background-color: #eaeaea;
 517 | }
 518 | 
 519 | .record-btn {
 520 |   color: #666;
 521 |   background: #f5f5f5;
 522 |   border-radius: 50%;
 523 |   padding: 0;
 524 |   width: 36px;
 525 |   height: 36px;
 526 | }
 527 | 
 528 | .record-btn:hover {
 529 |   background-color: #eaeaea;
 530 | }
 531 | 
 532 | .record-btn.recording {
 533 |   color: #fff;
 534 |   background-color: #ff3b30;
 535 | }
 536 | 
 537 | .record-btn.recording:hover {
 538 |   background-color: #d93129;
 539 | }
 540 | 
 541 | .generate-btn {
 542 |   color: #00957B;
 543 |   background: #E3F3F1;
 544 |   font-weight: 500;
 545 |   font-size: 13px;
 546 |   display: flex;
 547 |   align-items: center;
 548 |   padding: 0 12px 0 10px;
 549 | }
 550 | 
 551 | .generate-btn:hover {
 552 |   background-color: #d1eae7;
 553 | }
 554 | 
 555 | .generate-btn:disabled {
 556 |   opacity: 0.6;
 557 |   cursor: not-allowed;
 558 | }
 559 | 
 560 | .btn-text {
 561 |   margin-left: 4px;
 562 | }
 563 | 
 564 | /* Toast notification */
 565 | .toast {
 566 |   position: fixed;
 567 |   bottom: 80px;
 568 |   left: 50%;
 569 |   transform: translateX(-50%);
 570 |   padding: 10px 20px;
 571 |   background-color: rgba(0,0,0,0.7);
 572 |   color: white;
 573 |   border-radius: 20px;
 574 |   font-size: 14px;
 575 |   font-weight: 500;
 576 |   z-index: 1000;
 577 |   opacity: 1;
 578 |   transition: opacity 0.3s ease;
 579 | }
 580 | 
 581 | /* Debug Panel */
 582 | .debug-panel {
 583 |   position: fixed;
 584 |   top: 0;
 585 |   right: 0;
 586 |   width: 50%; /* Takes up half the screen */
 587 |   height: 100vh;
 588 |   background-color: #1e1e1e;
 589 |   color: #e0e0e0;
 590 |   z-index: 999; /* Ensure it's above everything */
 591 |   display: flex;
 592 |   flex-direction: column;
 593 |   transition: transform 0.3s ease, width 0.3s ease;
 594 |   box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
 595 |   overflow-x: hidden;
 596 | }
 597 | 
 598 | .debug-panel.hidden {
 599 |   transform: translateX(100%);
 600 | }
 601 | 
 602 | .debug-panel-header {
 603 |   display: flex;
 604 |   justify-content: space-between;
 605 |   align-items: center;
 606 |   padding: 10px 15px;
 607 |   background-color: #333;
 608 |   border-bottom: 1px solid #444;
 609 | }
 610 | 
 611 | .debug-panel-header h3 {
 612 |   margin: 0;
 613 |   font-size: 16px;
 614 |   font-weight: 500;
 615 |   color: #fff;
 616 | }
 617 | 
 618 | .debug-panel-close {
 619 |   background: transparent;
 620 |   border: none;
 621 |   color: #e0e0e0;
 622 |   padding: 5px;
 623 |   cursor: pointer;
 624 |   border-radius: 50%;
 625 |   display: flex;
 626 |   align-items: center;
 627 |   justify-content: center;
 628 |   -webkit-app-region: no-drag; /* Make button clickable */
 629 | }
 630 | 
 631 | .debug-panel-close:hover {
 632 |   background-color: rgba(255, 255, 255, 0.1);
 633 | }
 634 | 
 635 | .debug-panel-toggle {
 636 |   position: fixed;
 637 |   top: 70px;
 638 |   right: 0;
 639 |   width: 40px;
 640 |   height: 40px;
 641 |   background: #333;
 642 |   color: #fff;
 643 |   border: none;
 644 |   border-radius: 4px 0 0 4px;
 645 |   cursor: pointer;
 646 |   z-index: 1000;  /* Above everything */
 647 |   display: flex;
 648 |   align-items: center;
 649 |   justify-content: center;
 650 |   transition: right 0.3s ease;
 651 |   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 652 | }
 653 | 
 654 | .debug-panel-toggle:hover {
 655 |   background: #444;
 656 | }
 657 | 
 658 | .debug-panel-toggle:before {
 659 |   content: 'Debug';
 660 |   position: absolute;
 661 |   bottom: -20px;
 662 |   left: 0;
 663 |   width: 100%;
 664 |   text-align: center;
 665 |   font-size: 10px;
 666 |   font-weight: 500;
 667 | }
 668 | 
 669 | /* Notification that new content is available */
 670 | .debug-panel-toggle.has-new-content {
 671 |   animation: pulse 2s infinite;
 672 | }
 673 | 
 674 | .debug-panel-toggle.has-new-content:before {
 675 |   content: 'New Data';
 676 |   color: #4CAF50;
 677 |   font-weight: 600;
 678 | }
 679 | 
 680 | @keyframes pulse {
 681 |   0% {
 682 |     box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
 683 |   }
 684 |   70% {
 685 |     box-shadow: 0 0 0 6px rgba(76, 175, 80, 0);
 686 |   }
 687 |   100% {
 688 |     box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
 689 |   }
 690 | }
 691 | 
 692 | /* Debug notification */
 693 | .debug-notification {
 694 |   position: fixed;
 695 |   bottom: 100px;
 696 |   right: 20px;
 697 |   max-width: 300px;
 698 |   background-color: rgba(30, 30, 30, 0.9);
 699 |   color: #fff;
 700 |   padding: 12px 16px;
 701 |   border-radius: 8px;
 702 |   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
 703 |   z-index: 1001;
 704 |   transition: opacity 0.5s, transform 0.5s;
 705 |   animation: slide-in 0.3s ease-out;
 706 | }
 707 | 
 708 | .debug-notification.fade-out {
 709 |   opacity: 0;
 710 |   transform: translateX(30px);
 711 | }
 712 | 
 713 | .debug-notification-speaker {
 714 |   font-weight: bold;
 715 |   color: #0077FF;
 716 | }
 717 | 
 718 | .debug-notification-text {
 719 |   margin-left: 4px;
 720 | }
 721 | 
 722 | /* Specific notification styles */
 723 | .debug-notification.transcript-notification {
 724 |   border-left: 3px solid #0077FF;
 725 | }
 726 | 
 727 | .debug-notification.participant-notification {
 728 |   border-left: 3px solid #4CAF50;
 729 | }
 730 | 
 731 | .debug-notification-title {
 732 |   font-weight: bold;
 733 |   color: #4CAF50;
 734 | }
 735 | 
 736 | .debug-notification-name {
 737 |   font-weight: 500;
 738 |   margin-left: 4px;
 739 | }
 740 | 
 741 | @keyframes slide-in {
 742 |   from {
 743 |     transform: translateX(30px);
 744 |     opacity: 0;
 745 |   }
 746 |   to {
 747 |     transform: translateX(0);
 748 |     opacity: 1;
 749 |   }
 750 | }
 751 | 
 752 | .debug-panel-content {
 753 |   flex: 1;
 754 |   overflow-y: auto;
 755 |   display: flex;
 756 |   flex-direction: column;
 757 |   gap: 15px;
 758 |   padding: 15px;
 759 |   height: calc(100vh - 40px);
 760 | }
 761 | 
 762 | .debug-section {
 763 |   background-color: #252525;
 764 |   border-radius: 6px;
 765 |   overflow: hidden;
 766 |   display: flex;
 767 |   flex-direction: column;
 768 |   flex: 1;
 769 |   min-height: 150px;
 770 |   max-height: 300px;
 771 | }
 772 | 
 773 | .debug-section-header {
 774 |   display: flex;
 775 |   justify-content: space-between;
 776 |   align-items: center;
 777 |   padding: 8px 15px;
 778 |   background-color: #333;
 779 |   border-bottom: 1px solid #444;
 780 | }
 781 | 
 782 | .debug-section-header h4 {
 783 |   margin: 0;
 784 |   font-size: 14px;
 785 |   font-weight: 500;
 786 |   color: #fff;
 787 | }
 788 | 
 789 | .debug-section-action {
 790 |   background: transparent;
 791 |   border: none;
 792 |   color: #e0e0e0;
 793 |   cursor: pointer;
 794 |   font-size: 12px;
 795 |   border-radius: 3px;
 796 |   padding: 3px 8px;
 797 | }
 798 | 
 799 | .debug-section-action:hover {
 800 |   background-color: rgba(255, 255, 255, 0.1);
 801 | }
 802 | 
 803 | .debug-section-content {
 804 |   flex: 1;
 805 |   overflow-y: auto;
 806 |   padding: 10px;
 807 |   font-family: monospace;
 808 |   font-size: 12px;
 809 |   line-height: 1.5;
 810 | }
 811 | 
 812 | /* Placeholder content styling */
 813 | .placeholder-content {
 814 |   display: flex;
 815 |   flex-direction: column;
 816 |   align-items: center;
 817 |   justify-content: center;
 818 |   height: 100%;
 819 |   color: #666;
 820 |   text-align: center;
 821 |   padding: 20px;
 822 | }
 823 | 
 824 | .video-placeholder {
 825 |   background-color: #1a1a1a;
 826 |   border-radius: 4px;
 827 |   min-height: 120px;
 828 | }
 829 | 
 830 | /* Transcript styling */
 831 | .transcript-entries {
 832 |   display: flex;
 833 |   flex-direction: column;
 834 |   gap: 12px;
 835 |   padding: 5px 0;
 836 | }
 837 | 
 838 | .transcript-entry {
 839 |   padding: 8px;
 840 |   border-radius: 4px;
 841 |   background-color: #2a2a2a;
 842 |   position: relative;
 843 | }
 844 | 
 845 | .transcript-entry.newest-entry {
 846 |   background-color: #2d3b4a;
 847 |   border-left: 3px solid #0077FF;
 848 | }
 849 | 
 850 | .transcript-speaker {
 851 |   font-weight: bold;
 852 |   color: #0077FF;
 853 |   margin-bottom: 4px;
 854 | }
 855 | 
 856 | .transcript-text {
 857 |   color: #e0e0e0;
 858 |   margin-bottom: 4px;
 859 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
 860 | }
 861 | 
 862 | .transcript-timestamp {
 863 |   font-size: 10px;
 864 |   color: #888;
 865 |   text-align: right;
 866 | }
 867 | 
 868 | /* Participants styling */
 869 | .participants-list {
 870 |   display: flex;
 871 |   flex-direction: column;
 872 |   gap: 10px;
 873 |   padding: 5px 0;
 874 | }
 875 | 
 876 | .participant-entry {
 877 |   display: flex;
 878 |   align-items: center;
 879 |   gap: 10px;
 880 |   padding: 8px;
 881 |   border-radius: 4px;
 882 |   background-color: #2a2a2a;
 883 | }
 884 | 
 885 | .participant-avatar {
 886 |   width: 24px;
 887 |   height: 24px;
 888 |   border-radius: 50%;
 889 |   overflow: hidden;
 890 |   flex-shrink: 0;
 891 | }
 892 | 
 893 | .participant-name {
 894 |   flex-grow: 1;
 895 |   color: #e0e0e0;
 896 |   font-weight: 500;
 897 | }
 898 | 
 899 | .participant-status {
 900 |   font-size: 12px;
 901 |   color: #4CAF50;
 902 |   padding: 2px 6px;
 903 |   background-color: rgba(76, 175, 80, 0.1);
 904 |   border-radius: 10px;
 905 | }
 906 | 
 907 | /* Video preview styling */
 908 | .video-participant-container {
 909 |   margin-bottom: 15px;
 910 |   background-color: #1a1a1a;
 911 |   border-radius: 4px;
 912 |   overflow: hidden;
 913 |   position: relative;
 914 | }
 915 | 
 916 | .video-frame {
 917 |   width: 100%;
 918 |   display: block;
 919 |   max-height: 200px;
 920 |   object-fit: contain;
 921 | }
 922 | 
 923 | .video-participant-name {
 924 |   position: absolute;
 925 |   top: 8px;
 926 |   left: 8px;
 927 |   background-color: rgba(0, 0, 0, 0.6);
 928 |   color: white;
 929 |   padding: 2px 6px;
 930 |   border-radius: 4px;
 931 |   font-size: 12px;
 932 |   z-index: 10;
 933 | }
 934 | 
 935 | .video-frame-type {
 936 |   position: absolute;
 937 |   bottom: 8px;
 938 |   right: 8px;
 939 |   background-color: rgba(0, 0, 0, 0.6);
 940 |   color: white;
 941 |   padding: 2px 6px;
 942 |   border-radius: 4px;
 943 |   font-size: 12px;
 944 |   z-index: 10;
 945 | }
 946 | 
 947 | /* SDK Logger styling */
 948 | #sdkLoggerContent {
 949 |   font-family: monospace;
 950 |   font-size: 12px;
 951 |   line-height: 1.5;
 952 | }
 953 | 
 954 | .sdk-log-entry {
 955 |   margin-bottom: 10px;
 956 |   padding: 8px;
 957 |   border-radius: 4px;
 958 |   background-color: #2a2a2a;
 959 |   border-left: 3px solid #555;
 960 |   word-break: break-word;
 961 | }
 962 | 
 963 | .sdk-log-entry.api-call {
 964 |   border-left-color: #0077FF;
 965 | }
 966 | 
 967 | .sdk-log-entry.event {
 968 |   border-left-color: #4CAF50;
 969 | }
 970 | 
 971 | .sdk-log-entry.error {
 972 |   border-left-color: #FF3B30;
 973 |   background-color: rgba(255, 59, 48, 0.1);
 974 | }
 975 | 
 976 | .sdk-log-entry .timestamp {
 977 |   color: #999;
 978 |   font-size: 10px;
 979 |   margin-bottom: 4px;
 980 | }
 981 | 
 982 | .sdk-log-entry .method {
 983 |   font-weight: bold;
 984 |   color: #0077FF;
 985 | }
 986 | 
 987 | .sdk-log-entry .event-type {
 988 |   font-weight: bold;
 989 |   color: #4CAF50;
 990 | }
 991 | 
 992 | .sdk-log-entry .error-type {
 993 |   font-weight: bold;
 994 |   color: #FF3B30;
 995 | }
 996 | 
 997 | .sdk-log-entry .params {
 998 |   color: #e0e0e0;
 999 |   margin-top: 5px;
1000 | }
1001 | 
1002 | /* Chat Input */
1003 | .chat-input-container {
1004 |   position: fixed;
1005 |   bottom: 20px;
1006 |   right: 20px;
1007 |   z-index: 100;
1008 |   width: calc(var(--sidebar-width) - 40px);
1009 | }
1010 | 
1011 | .chat-input {
1012 |   display: flex;
1013 |   width: 100%;
1014 |   position: relative;
1015 | }
1016 | 
1017 | #chatInput {
1018 |   flex: 1;
1019 |   padding: 12px 40px 12px 20px;
1020 |   border-radius: 20px;
1021 |   border: 1px solid var(--border-color);
1022 |   font-size: 14px;
1023 |   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
1024 |   width: 100%;
1025 | }
1026 | 
1027 | #sendButton {
1028 |   position: absolute;
1029 |   right: 10px;
1030 |   top: 50%;
1031 |   transform: translateY(-50%);
1032 |   background: transparent;
1033 |   border: none;
1034 |   cursor: pointer;
1035 |   padding: 5px;
1036 | }
1037 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
   1 | const { app, BrowserWindow, ipcMain, protocol, Notification } = require('electron');
   2 | const path = require('node:path');
   3 | const url = require('url');
   4 | const fs = require('fs');
   5 | const RecallAiSdk = require('@recallai/desktop-sdk');
   6 | const axios = require('axios');
   7 | const OpenAI = require('openai');
   8 | const sdkLogger = require('./sdk-logger');
   9 | require('dotenv').config();
  10 | 
  11 | // Function to get the OpenRouter headers
  12 | function getHeaderLines() {
  13 |   return [
  14 |     "HTTP-Referer: https://recall.ai", // Replace with your actual app's URL
  15 |     "X-Title: Muesli AI Notetaker"
  16 |   ];
  17 | }
  18 | 
  19 | // Initialize OpenAI client with OpenRouter as the base URL
  20 | const openai = new OpenAI({
  21 |   baseURL: "https://openrouter.ai/api/v1",
  22 |   apiKey: process.env.OPENROUTER_KEY,
  23 |   defaultHeaders: {
  24 |     "HTTP-Referer": "https://recall.ai",
  25 |     "X-Title": "Muesli AI Notetaker"
  26 |   }
  27 | });
  28 | 
  29 | // Define available models with their capabilities
  30 | const MODELS = {
  31 |   // Primary models
  32 |   PRIMARY: "anthropic/claude-3.7-sonnet",
  33 |   FALLBACKS: []
  34 | };
  35 | 
  36 | // Handle creating/removing shortcuts on Windows when installing/uninstalling.
  37 | if (require('electron-squirrel-startup')) {
  38 |   app.quit();
  39 | }
  40 | 
  41 | // Store detected meeting information
  42 | let detectedMeeting = null;
  43 | 
  44 | let mainWindow;
  45 | 
  46 | const createWindow = () => {
  47 |   // Create the browser window.
  48 |   mainWindow = new BrowserWindow({
  49 |     width: 1024,
  50 |     height: 768,
  51 |     webPreferences: {
  52 |       preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
  53 |       contextIsolation: true,
  54 |       nodeIntegration: false,
  55 |     },
  56 |     titleBarStyle: 'hiddenInset',
  57 |     backgroundColor: '#f9f9f9',
  58 |   });
  59 | 
  60 |   // Allow the debug panel header to act as a drag region
  61 |   mainWindow.on('ready-to-show', () => {
  62 |     try {
  63 |       // Set regions that can be used to drag the window
  64 |       if (process.platform === 'darwin') {
  65 |         // Only needed on macOS
  66 |         mainWindow.setWindowButtonVisibility(true);
  67 |       }
  68 |     } catch (error) {
  69 |       console.error('Error setting drag regions:', error);
  70 |     }
  71 |   });
  72 | 
  73 |   // and load the index.html of the app.
  74 |   mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
  75 | 
  76 |   // Open the DevTools in development
  77 |   if (process.env.NODE_ENV === 'development') {
  78 |     // mainWindow.webContents.openDevTools();
  79 |   }
  80 | 
  81 |   // Listen for navigation events
  82 |   ipcMain.on('navigate', (event, page) => {
  83 |     if (page === 'note-editor') {
  84 |       mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY + '/../note-editor/index.html');
  85 |     } else if (page === 'home') {
  86 |       mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
  87 |     }
  88 |   });
  89 | };
  90 | 
  91 | // This method will be called when Electron has finished
  92 | // initialization and is ready to create browser windows.
  93 | // Some APIs can only be used after this event occurs.
  94 | app.whenReady().then(() => {
  95 |   console.log("Registering IPC handlers...");
  96 |   // Log all registered IPC handlers
  97 |   console.log("IPC handlers:", Object.keys(ipcMain._invokeHandlers));
  98 | 
  99 |   // Set up SDK logger IPC handlers
 100 |   ipcMain.on('sdk-log', (event, logEntry) => {
 101 |     // Forward logs from renderer to any open windows
 102 |     if (mainWindow && !mainWindow.isDestroyed()) {
 103 |       mainWindow.webContents.send('sdk-log', logEntry);
 104 |     }
 105 |   });
 106 | 
 107 |   // Set up logger event listener to send logs from main to renderer
 108 |   sdkLogger.onLog((logEntry) => {
 109 |     if (mainWindow && !mainWindow.isDestroyed()) {
 110 |       mainWindow.webContents.send('sdk-log', logEntry);
 111 |     }
 112 |   });
 113 | 
 114 |   // Create recordings directory if it doesn't exist
 115 |   try {
 116 |     if (!fs.existsSync(RECORDING_PATH)) {
 117 |       fs.mkdirSync(RECORDING_PATH, { recursive: true });
 118 |     }
 119 |   } catch (e) {
 120 |     console.error("Couldn't create the recording path:", e);
 121 |   }
 122 | 
 123 |   // Create meetings file if it doesn't exist
 124 |   try {
 125 |     if (!fs.existsSync(meetingsFilePath)) {
 126 |       const initialData = { upcomingMeetings: [], pastMeetings: [] };
 127 |       fs.writeFileSync(meetingsFilePath, JSON.stringify(initialData, null, 2));
 128 |     }
 129 |   } catch (e) {
 130 |     console.error("Couldn't create the meetings file:", e);
 131 |   }
 132 | 
 133 |   // Initialize the Recall.ai SDK
 134 |   initSDK();
 135 | 
 136 |   createWindow();
 137 | 
 138 |   // When the window is ready, send the initial meeting detection status
 139 |   mainWindow.webContents.on('did-finish-load', () => {
 140 |     // Send the initial meeting detection status
 141 |     mainWindow.webContents.send('meeting-detection-status', { detected: detectedMeeting !== null });
 142 |   });
 143 | 
 144 |   // On OS X it's common to re-create a window in the app when the
 145 |   // dock icon is clicked and there are no other windows open.
 146 |   app.on('activate', () => {
 147 |     if (BrowserWindow.getAllWindows().length === 0) {
 148 |       createWindow();
 149 |     }
 150 |   });
 151 | });
 152 | 
 153 | // Quit when all windows are closed, except on macOS. There, it's common
 154 | // for applications and their menu bar to stay active until the user quits
 155 | // explicitly with Cmd + Q.
 156 | app.on('window-all-closed', () => {
 157 |   if (process.platform !== 'darwin') {
 158 |     app.quit();
 159 |   }
 160 | });
 161 | 
 162 | // In this file you can include the rest of your app's specific main process
 163 | // code. You can also put them in separate files and import them here.
 164 | 
 165 | // Path to meetings data file in the user's Application Support directory
 166 | const meetingsFilePath = path.join(app.getPath('userData'), 'meetings.json');
 167 | 
 168 | // Path for RecallAI SDK recordings
 169 | const RECORDING_PATH = path.join(app.getPath("userData"), 'recordings');
 170 | 
 171 | // Global state to track active recordings
 172 | const activeRecordings = {
 173 |   // Map of recordingId -> {noteId, platform, state}
 174 |   recordings: {},
 175 | 
 176 |   // Register a new recording
 177 |   addRecording: function (recordingId, noteId, platform = 'unknown') {
 178 |     this.recordings[recordingId] = {
 179 |       noteId,
 180 |       platform,
 181 |       state: 'recording',
 182 |       startTime: new Date()
 183 |     };
 184 |     console.log(`Recording registered in global state: ${recordingId} for note ${noteId}`);
 185 |   },
 186 | 
 187 |   // Update a recording's state
 188 |   updateState: function (recordingId, state) {
 189 |     if (this.recordings[recordingId]) {
 190 |       this.recordings[recordingId].state = state;
 191 |       console.log(`Recording ${recordingId} state updated to: ${state}`);
 192 |       return true;
 193 |     }
 194 |     return false;
 195 |   },
 196 | 
 197 |   // Remove a recording
 198 |   removeRecording: function (recordingId) {
 199 |     if (this.recordings[recordingId]) {
 200 |       delete this.recordings[recordingId];
 201 |       console.log(`Recording ${recordingId} removed from global state`);
 202 |       return true;
 203 |     }
 204 |     return false;
 205 |   },
 206 | 
 207 |   // Get active recording for a note
 208 |   getForNote: function (noteId) {
 209 |     for (const [recordingId, info] of Object.entries(this.recordings)) {
 210 |       if (info.noteId === noteId) {
 211 |         return { recordingId, ...info };
 212 |       }
 213 |     }
 214 |     return null;
 215 |   },
 216 | 
 217 |   // Get all active recordings
 218 |   getAll: function () {
 219 |     return { ...this.recordings };
 220 |   }
 221 | };
 222 | 
 223 | // File operation manager to prevent race conditions on both reads and writes
 224 | const fileOperationManager = {
 225 |   isProcessing: false,
 226 |   pendingOperations: [],
 227 |   cachedData: null,
 228 |   lastReadTime: 0,
 229 | 
 230 |   // Read the meetings data with caching to reduce file I/O
 231 |   readMeetingsData: async function () {
 232 |     // If we have cached data that's recent (less than 500ms old), use it
 233 |     const now = Date.now();
 234 |     if (this.cachedData && (now - this.lastReadTime < 500)) {
 235 |       return JSON.parse(JSON.stringify(this.cachedData)); // Deep clone
 236 |     }
 237 | 
 238 |     try {
 239 |       // Read from file
 240 |       const fileData = await fs.promises.readFile(meetingsFilePath, 'utf8');
 241 |       const data = JSON.parse(fileData);
 242 | 
 243 |       // Update cache
 244 |       this.cachedData = data;
 245 |       this.lastReadTime = now;
 246 | 
 247 |       return data;
 248 |     } catch (error) {
 249 |       console.error('Error reading meetings data:', error);
 250 |       // If file doesn't exist or is invalid, return empty structure
 251 |       return { upcomingMeetings: [], pastMeetings: [] };
 252 |     }
 253 |   },
 254 | 
 255 |   // Schedule an operation that needs to update the meetings data
 256 |   scheduleOperation: async function (operationFn) {
 257 |     return new Promise((resolve, reject) => {
 258 |       // Add this operation to the queue
 259 |       this.pendingOperations.push({
 260 |         operationFn, // This function will receive the current data and return updated data
 261 |         resolve,
 262 |         reject
 263 |       });
 264 | 
 265 |       // Process the queue if not already processing
 266 |       if (!this.isProcessing) {
 267 |         this.processQueue();
 268 |       }
 269 |     });
 270 |   },
 271 | 
 272 |   // Process the operation queue sequentially
 273 |   processQueue: async function () {
 274 |     if (this.pendingOperations.length === 0 || this.isProcessing) {
 275 |       return;
 276 |     }
 277 | 
 278 |     this.isProcessing = true;
 279 | 
 280 |     try {
 281 |       // Get the next operation
 282 |       const nextOp = this.pendingOperations.shift();
 283 | 
 284 |       // Read the latest data
 285 |       const currentData = await this.readMeetingsData();
 286 | 
 287 |       try {
 288 |         // Execute the operation function with the current data
 289 |         const updatedData = await nextOp.operationFn(currentData);
 290 | 
 291 |         // If the operation returned data, write it
 292 |         if (updatedData) {
 293 |           // Update cache immediately
 294 |           this.cachedData = updatedData;
 295 |           this.lastReadTime = Date.now();
 296 | 
 297 |           // Write to file
 298 |           await fs.promises.writeFile(meetingsFilePath, JSON.stringify(updatedData, null, 2));
 299 |         }
 300 | 
 301 |         // Resolve the operation's promise
 302 |         nextOp.resolve({ success: true });
 303 |       } catch (opError) {
 304 |         console.error('Error in file operation:', opError);
 305 |         nextOp.reject(opError);
 306 |       }
 307 |     } catch (error) {
 308 |       console.error('Error in file operation manager:', error);
 309 | 
 310 |       // If there was an operation that failed, reject its promise
 311 |       if (this.pendingOperations.length > 0) {
 312 |         const failedOp = this.pendingOperations.shift();
 313 |         failedOp.reject(error);
 314 |       }
 315 |     } finally {
 316 |       this.isProcessing = false;
 317 | 
 318 |       // Check if more operations were added while we were processing
 319 |       if (this.pendingOperations.length > 0) {
 320 |         setImmediate(() => this.processQueue());
 321 |       }
 322 |     }
 323 |   },
 324 | 
 325 |   // Helper to write data directly - internally uses scheduleOperation
 326 |   writeData: async function (data) {
 327 |     return this.scheduleOperation(() => data); // Simply return the data to write
 328 |   }
 329 | };
 330 | 
 331 | // Create a desktop SDK upload token
 332 | async function createDesktopSdkUpload() {
 333 |   try {
 334 |     const response = await axios.get("http://localhost:13373/start-recording", { timeout: 10000 });
 335 | 
 336 |     if (response.data.status !== 'success') {
 337 |       console.error("Failed to create upload token:", response.data.message);
 338 |       return null;
 339 |     } else {
 340 |       console.log("Upload token created successfully:", response.data.upload_token);
 341 |       return response.data;
 342 |     }
 343 |   } catch (error) {
 344 |     console.error("Error creating upload token:", error.errors || error.message || error);
 345 |     if (error.response) {
 346 |       console.error("Response data:", error.response.data);
 347 |       console.error("Response status:", error.response.status);
 348 |     }
 349 |     return null;
 350 |   }
 351 | }
 352 | 
 353 | // Initialize the Recall.ai SDK
 354 | function initSDK() {
 355 |   console.log("Initializing Recall.ai SDK");
 356 | 
 357 |   // Log the SDK initialization
 358 |   sdkLogger.logApiCall('init', {
 359 |     dev: process.env.NODE_ENV === 'development',
 360 |     api_url: process.env.RECALLAI_API_URL,
 361 |     config: {
 362 |       recording_path: RECORDING_PATH
 363 |     }
 364 |   });
 365 | 
 366 |   RecallAiSdk.init({
 367 |     // dev: true,
 368 |     api_url: process.env.RECALLAI_API_URL,
 369 |     config: {
 370 |       recording_path: RECORDING_PATH
 371 |     }
 372 |   });
 373 | 
 374 |   // Listen for meeting detected events
 375 |   RecallAiSdk.addEventListener('meeting-detected', (evt) => {
 376 |     console.log("Meeting detected:", evt);
 377 | 
 378 |     // Log the meeting detected event
 379 |     sdkLogger.logEvent('meeting-detected', {
 380 |       platform: evt.window.platform,
 381 |       windowId: evt.window.id
 382 |     });
 383 | 
 384 |     detectedMeeting = evt;
 385 | 
 386 |     // Map platform codes to readable names
 387 |     const platformNames = {
 388 |       'zoom': 'Zoom',
 389 |       'google-meet': 'Google Meet',
 390 |       'slack': 'Slack',
 391 |       'teams': 'Microsoft Teams'
 392 |     };
 393 | 
 394 |     // Get a user-friendly platform name, or use the raw platform name if not in our map
 395 |     const platformName = platformNames[evt.window.platform] || evt.window.platform;
 396 | 
 397 |     // Send a notification
 398 |     let notification = new Notification({
 399 |       title: `${platformName} Meeting Detected`,
 400 |       body: platformName
 401 |     });
 402 | 
 403 |     // Handle notification click
 404 |     notification.on('click', () => {
 405 |       console.log("Notification clicked for platform:", platformName);
 406 |       joinDetectedMeeting();
 407 |     });
 408 | 
 409 |     notification.show();
 410 | 
 411 |     // Send the meeting detected status to the renderer process
 412 |     if (mainWindow && !mainWindow.isDestroyed()) {
 413 |       mainWindow.webContents.send('meeting-detection-status', { detected: true });
 414 |     }
 415 |   });
 416 | 
 417 |   // Listen for meeting updated events (to capture title and URL)
 418 |   // NOTE: meeting-detected events do NOT guarantee title and URL will be populated.
 419 |   // The meeting title and URL are only reliably available in meeting-updated events,
 420 |   // which fire as the meeting metadata becomes available after initial detection.
 421 |   RecallAiSdk.addEventListener('meeting-updated', async (evt) => {
 422 |     console.log("Meeting updated:", evt);
 423 | 
 424 |     const { window } = evt;
 425 | 
 426 |     // Log the meeting updated event with the URL for tracking purposes
 427 |     sdkLogger.logEvent('meeting-updated', {
 428 |       platform: window.platform,
 429 |       windowId: window.id,
 430 |       title: window.title,
 431 |       url: window.url
 432 |     });
 433 | 
 434 |     // Update the detectedMeeting object with the new information
 435 |     if (detectedMeeting && detectedMeeting.window.id === window.id) {
 436 |       detectedMeeting = {
 437 |         ...detectedMeeting,
 438 |         window: {
 439 |           ...detectedMeeting.window,
 440 |           title: window.title,
 441 |           url: window.url
 442 |         }
 443 |       };
 444 | 
 445 |       console.log("Updated meeting title:", window.title);
 446 | 
 447 |       // If a note has already been created for this meeting, update its title retroactively
 448 |       if (window.title && global.activeMeetingIds && global.activeMeetingIds[window.id]) {
 449 |         const noteId = global.activeMeetingIds[window.id].noteId;
 450 |         
 451 |         if (noteId) {
 452 |           console.log("Updating existing note title for:", noteId);
 453 |           
 454 |           try {
 455 |             // Read the current meetings data
 456 |             const meetingsData = await fileOperationManager.readMeetingsData();
 457 |             
 458 |             // Find the meeting in pastMeetings
 459 |             const meeting = meetingsData.pastMeetings.find(m => m.id === noteId);
 460 |             
 461 |             if (meeting) {
 462 |               const oldTitle = meeting.title;
 463 |               
 464 |               // Update the title
 465 |               meeting.title = window.title;
 466 |               
 467 |               // Save the updated data
 468 |               await fileOperationManager.writeData(meetingsData);
 469 |               console.log(`Successfully updated meeting title from "${oldTitle}" to "${window.title}"`);
 470 |               
 471 |               // Notify the renderer to update the UI
 472 |               if (mainWindow && !mainWindow.isDestroyed()) {
 473 |                 mainWindow.webContents.send('meeting-title-updated', {
 474 |                   meetingId: noteId,
 475 |                   newTitle: window.title
 476 |                 });
 477 |               }
 478 |             } else {
 479 |               console.error("Meeting not found in pastMeetings with ID:", noteId);
 480 |             }
 481 |           } catch (error) {
 482 |             console.error("Error updating meeting title:", error);
 483 |           }
 484 |         }
 485 |       }
 486 |     }
 487 |   });
 488 | 
 489 |   // Listen for meeting closed events
 490 |   RecallAiSdk.addEventListener('meeting-closed', (evt) => {
 491 |     console.log("Meeting closed:", evt);
 492 | 
 493 |     // Log the SDK meeting-closed event
 494 |     sdkLogger.logEvent('meeting-closed', {
 495 |       windowId: evt.window.id
 496 |     });
 497 | 
 498 |     // Clean up the global tracking when a meeting ends
 499 |     if (evt.window && evt.window.id && global.activeMeetingIds && global.activeMeetingIds[evt.window.id]) {
 500 |       console.log(`Cleaning up meeting tracking for: ${evt.window.id}`);
 501 |       delete global.activeMeetingIds[evt.window.id];
 502 |     }
 503 | 
 504 |     detectedMeeting = null;
 505 | 
 506 |     // Send the meeting closed status to the renderer process
 507 |     if (mainWindow && !mainWindow.isDestroyed()) {
 508 |       mainWindow.webContents.send('meeting-detection-status', { detected: false });
 509 |     }
 510 |   });
 511 | 
 512 |   // Listen for recording ended events
 513 |   RecallAiSdk.addEventListener('recording-ended', async (evt) => {
 514 |     console.log("Recording ended:", evt);
 515 | 
 516 |     // Log the SDK recording-ended event
 517 |     sdkLogger.logEvent('recording-ended', {
 518 |       windowId: evt.window.id
 519 |     });
 520 | 
 521 |     try {
 522 |       // Update the note with recording information
 523 |       await updateNoteWithRecordingInfo(evt.window.id);
 524 | 
 525 |       // Add a small delay before uploading (good practice for file system operations)
 526 |       setTimeout(async () => {
 527 |         try {
 528 |           // Try to get a new upload token for the upload if needed
 529 |           const uploadData = await createDesktopSdkUpload();
 530 | 
 531 |           if (uploadData && uploadData.upload_token) {
 532 |             console.log('Uploading recording with new upload token:', uploadData.upload_token);
 533 | 
 534 |             // Log the uploadRecording API call
 535 |             sdkLogger.logApiCall('uploadRecording', {
 536 |               windowId: evt.window.id,
 537 |               uploadToken: `${uploadData.upload_token.substring(0, 8)}...` // Log truncated token for security
 538 |             });
 539 | 
 540 |             RecallAiSdk.uploadRecording({
 541 |               windowId: evt.window.id,
 542 |               uploadToken: uploadData.upload_token
 543 |             });
 544 |           } else {
 545 |             // Fallback to regular upload
 546 |             console.log('Uploading recording without new token');
 547 | 
 548 |             // Log the uploadRecording API call (fallback)
 549 |             sdkLogger.logApiCall('uploadRecording', {
 550 |               windowId: evt.window.id
 551 |             });
 552 | 
 553 |             RecallAiSdk.uploadRecording({ windowId: evt.window.id });
 554 |           }
 555 |         } catch (uploadError) {
 556 |           console.error('Error during upload:', uploadError);
 557 |           // Fallback to regular upload
 558 | 
 559 |           // Log the uploadRecording API call (error fallback)
 560 |           sdkLogger.logApiCall('uploadRecording', {
 561 |             windowId: evt.window.id,
 562 |             error: 'Fallback after error'
 563 |           });
 564 | 
 565 |           RecallAiSdk.uploadRecording({ windowId: evt.window.id });
 566 |         }
 567 |       }, 3000); // Wait 3 seconds before uploading
 568 |     } catch (error) {
 569 |       console.error("Error handling recording ended:", error);
 570 |     }
 571 |   });
 572 | 
 573 |   RecallAiSdk.addEventListener('permissions-granted', async (evt) => {
 574 |     console.log("PERMISSIONS GRANTED");
 575 |   });
 576 | 
 577 |   // Track upload progress
 578 |   RecallAiSdk.addEventListener('upload-progress', async (evt) => {
 579 |     const { progress, window } = evt;
 580 |     console.log(`Upload progress: ${progress}%`);
 581 | 
 582 |     // Log the SDK upload-progress event
 583 |     // sdkLogger.logEvent('upload-progress', {
 584 |     //   windowId: window.id,
 585 |     //   progress
 586 |     // });
 587 | 
 588 |     // Update the note with upload progress if needed
 589 |     if (progress === 100) {
 590 |       console.log(`Upload completed for recording: ${window.id}`);
 591 |       // Could update the note here with upload completion status
 592 |     }
 593 |   });
 594 | 
 595 |   // Track SDK state changes
 596 |   RecallAiSdk.addEventListener('sdk-state-change', async (evt) => {
 597 |     const { sdk: { state: { code } }, window } = evt;
 598 |     console.log("Recording state changed:", code, "for window:", window?.id);
 599 | 
 600 |     // Log the SDK sdk-state-change event
 601 |     sdkLogger.logEvent('sdk-state-change', {
 602 |       state: code,
 603 |       windowId: window?.id
 604 |     });
 605 | 
 606 |     // Update recording state in our global tracker
 607 |     if (window && window.id) {
 608 |       // Get the meeting note ID associated with this window
 609 |       let noteId = null;
 610 |       if (global.activeMeetingIds && global.activeMeetingIds[window.id]) {
 611 |         noteId = global.activeMeetingIds[window.id].noteId;
 612 |       }
 613 | 
 614 |       // Update the recording state in our tracker
 615 |       if (code === 'recording') {
 616 |         console.log('Recording in progress...');
 617 |         if (noteId) {
 618 |           // If recording started, add it to our active recordings
 619 |           activeRecordings.addRecording(window.id, noteId, window.platform || 'unknown');
 620 |         }
 621 |       } else if (code === 'paused') {
 622 |         console.log('Recording paused');
 623 |         activeRecordings.updateState(window.id, 'paused');
 624 |       } else if (code === 'idle') {
 625 |         console.log('Recording stopped');
 626 |         activeRecordings.removeRecording(window.id);
 627 |       }
 628 | 
 629 |       // Notify renderer process about recording state change
 630 |       if (mainWindow && !mainWindow.isDestroyed()) {
 631 |         mainWindow.webContents.send('recording-state-change', {
 632 |           recordingId: window.id,
 633 |           state: code,
 634 |           noteId
 635 |         });
 636 |       }
 637 |     }
 638 |   });
 639 | 
 640 |   // Listen for real-time transcript events
 641 |   RecallAiSdk.addEventListener('realtime-event', async (evt) => {
 642 |     // Only log non-video frame events to prevent flooding the logger
 643 |     if (evt.event !== 'video_separate_png.data') {
 644 |       console.log("Received realtime event:", evt.event);
 645 | 
 646 |       // Log the SDK realtime-event event
 647 |       sdkLogger.logEvent('realtime-event', {
 648 |         eventType: evt.event,
 649 |         windowId: evt.window?.id
 650 |       });
 651 |     }
 652 | 
 653 |     // Handle different event types
 654 |     if (evt.event === 'transcript.data' && evt.data && evt.data.data) {
 655 |       await processTranscriptData(evt);
 656 |     }
 657 |     else if (evt.event === 'transcript.provider_data' && evt.data && evt.data.data) {
 658 |       await processTranscriptProviderData(evt);
 659 |     }
 660 |     else if (evt.event === 'participant_events.join' && evt.data && evt.data.data) {
 661 |       await processParticipantJoin(evt);
 662 |     }
 663 |     else if (evt.event === 'video_separate_png.data' && evt.data && evt.data.data) {
 664 |       await processVideoFrame(evt);
 665 |     }
 666 |   });
 667 | 
 668 |   // Handle errors
 669 |   RecallAiSdk.addEventListener('error', async (evt) => {
 670 |     console.error("RecallAI SDK Error:", evt);
 671 |     const { type, message } = evt;
 672 | 
 673 |     // Log the SDK error event
 674 |     sdkLogger.logEvent('error', {
 675 |       errorType: type,
 676 |       errorMessage: message
 677 |     });
 678 | 
 679 |     // Show notification for errors
 680 |     let notification = new Notification({
 681 |       title: 'Recording Error',
 682 |       body: `Error: ${type} - ${message}`
 683 |     });
 684 |     notification.show();
 685 |   });
 686 | }
 687 | 
 688 | // Handle saving meetings data
 689 | ipcMain.handle('saveMeetingsData', async (event, data) => {
 690 |   try {
 691 |     // Use the file operation manager to safely write the file
 692 |     await fileOperationManager.writeData(data);
 693 |     return { success: true };
 694 |   } catch (error) {
 695 |     console.error('Failed to save meetings data:', error);
 696 |     return { success: false, error: error.message };
 697 |   }
 698 | });
 699 | 
 700 | // Debug handler to check if IPC handlers are registered
 701 | ipcMain.handle('debugGetHandlers', async () => {
 702 |   console.log("Checking registered IPC handlers...");
 703 |   const handlers = Object.keys(ipcMain._invokeHandlers);
 704 |   console.log("Registered handlers:", handlers);
 705 |   return handlers;
 706 | });
 707 | 
 708 | // Handler to get active recording ID for a note
 709 | ipcMain.handle('getActiveRecordingId', async (event, noteId) => {
 710 |   console.log(`getActiveRecordingId called for note: ${noteId}`);
 711 | 
 712 |   try {
 713 |     // If noteId is provided, get recording for that specific note
 714 |     if (noteId) {
 715 |       const recordingInfo = activeRecordings.getForNote(noteId);
 716 |       return {
 717 |         success: true,
 718 |         data: recordingInfo
 719 |       };
 720 |     }
 721 | 
 722 |     // Otherwise return all active recordings
 723 |     return {
 724 |       success: true,
 725 |       data: activeRecordings.getAll()
 726 |     };
 727 |   } catch (error) {
 728 |     console.error('Error getting active recording ID:', error);
 729 |     return { success: false, error: error.message };
 730 |   }
 731 | });
 732 | 
 733 | // Handle deleting a meeting
 734 | ipcMain.handle('deleteMeeting', async (event, meetingId) => {
 735 |   try {
 736 |     console.log(`Deleting meeting with ID: ${meetingId}`);
 737 | 
 738 |     // Read current data
 739 |     const fileData = await fs.promises.readFile(meetingsFilePath, 'utf8');
 740 |     const meetingsData = JSON.parse(fileData);
 741 | 
 742 |     // Find the meeting
 743 |     const pastMeetingIndex = meetingsData.pastMeetings.findIndex(meeting => meeting.id === meetingId);
 744 |     const upcomingMeetingIndex = meetingsData.upcomingMeetings.findIndex(meeting => meeting.id === meetingId);
 745 | 
 746 |     let meetingDeleted = false;
 747 |     let recordingId = null;
 748 | 
 749 |     // Remove from past meetings if found
 750 |     if (pastMeetingIndex !== -1) {
 751 |       // Store the recording ID for later cleanup if needed
 752 |       recordingId = meetingsData.pastMeetings[pastMeetingIndex].recordingId;
 753 | 
 754 |       // Remove the meeting
 755 |       meetingsData.pastMeetings.splice(pastMeetingIndex, 1);
 756 |       meetingDeleted = true;
 757 |     }
 758 | 
 759 |     // Remove from upcoming meetings if found
 760 |     if (upcomingMeetingIndex !== -1) {
 761 |       // Store the recording ID for later cleanup if needed
 762 |       recordingId = meetingsData.upcomingMeetings[upcomingMeetingIndex].recordingId;
 763 | 
 764 |       // Remove the meeting
 765 |       meetingsData.upcomingMeetings.splice(upcomingMeetingIndex, 1);
 766 |       meetingDeleted = true;
 767 |     }
 768 | 
 769 |     if (!meetingDeleted) {
 770 |       return { success: false, error: 'Meeting not found' };
 771 |     }
 772 | 
 773 |     // Save the updated data
 774 |     await fileOperationManager.writeData(meetingsData);
 775 | 
 776 |     // If the meeting had a recording, cleanup the reference in the global tracking
 777 |     if (recordingId && global.activeMeetingIds && global.activeMeetingIds[recordingId]) {
 778 |       console.log(`Cleaning up tracking for deleted meeting with recording ID: ${recordingId}`);
 779 |       delete global.activeMeetingIds[recordingId];
 780 |     }
 781 | 
 782 |     console.log(`Successfully deleted meeting: ${meetingId}`);
 783 |     return { success: true };
 784 |   } catch (error) {
 785 |     console.error('Error deleting meeting:', error);
 786 |     return { success: false, error: error.message };
 787 |   }
 788 | });
 789 | 
 790 | // Handle generating AI summary for a meeting (non-streaming)
 791 | ipcMain.handle('generateMeetingSummary', async (event, meetingId) => {
 792 |   try {
 793 |     console.log(`Manual summary generation requested for meeting: ${meetingId}`);
 794 | 
 795 |     // Read current data
 796 |     const fileData = await fs.promises.readFile(meetingsFilePath, 'utf8');
 797 |     const meetingsData = JSON.parse(fileData);
 798 | 
 799 |     // Find the meeting
 800 |     const pastMeetingIndex = meetingsData.pastMeetings.findIndex(meeting => meeting.id === meetingId);
 801 | 
 802 |     if (pastMeetingIndex === -1) {
 803 |       return { success: false, error: 'Meeting not found' };
 804 |     }
 805 | 
 806 |     const meeting = meetingsData.pastMeetings[pastMeetingIndex];
 807 | 
 808 |     // Check if there's a transcript to summarize
 809 |     if (!meeting.transcript || meeting.transcript.length === 0) {
 810 |       return {
 811 |         success: false,
 812 |         error: 'No transcript available for this meeting'
 813 |       };
 814 |     }
 815 | 
 816 |     // Log summary generation to console instead of showing a notification
 817 |     console.log('Generating AI summary for meeting: ' + meetingId);
 818 | 
 819 |     // Generate the summary
 820 |     const summary = await generateMeetingSummary(meeting);
 821 | 
 822 |     // Get meeting title for use in the new content
 823 |     const meetingTitle = meeting.title || "Meeting Notes";
 824 | 
 825 |     // Get recording ID
 826 |     const recordingId = meeting.recordingId;
 827 | 
 828 |     // Check for different possible video file patterns
 829 |     const possibleFilePaths = recordingId ? [
 830 |       path.join(RECORDING_PATH, `${recordingId}.mp4`),
 831 |       path.join(RECORDING_PATH, `macos-desktop-${recordingId}.mp4`),
 832 |       path.join(RECORDING_PATH, `macos-desktop${recordingId}.mp4`),
 833 |       path.join(RECORDING_PATH, `desktop-${recordingId}.mp4`)
 834 |     ] : [];
 835 | 
 836 |     // Find the first video file that exists
 837 |     let videoExists = false;
 838 |     let videoFilePath = null;
 839 | 
 840 |     try {
 841 |       for (const filePath of possibleFilePaths) {
 842 |         if (fs.existsSync(filePath)) {
 843 |           videoExists = true;
 844 |           videoFilePath = filePath;
 845 |           console.log(`Found video file at: ${videoFilePath}`);
 846 |           break;
 847 |         }
 848 |       }
 849 |     } catch (err) {
 850 |       console.error('Error checking for video files:', err);
 851 |     }
 852 | 
 853 |     // Create content with the AI-generated summary
 854 |     meeting.content = `# ${meetingTitle}\n\n${summary}`;
 855 | 
 856 |     // If video exists, store the path separately but don't add it to the content
 857 |     if (videoExists) {
 858 |       meeting.videoPath = videoFilePath; // Store the path for future reference
 859 |       console.log(`Stored video path in meeting object: ${videoFilePath}`);
 860 |     } else {
 861 |       console.log('Video file not found or no recording ID');
 862 |     }
 863 | 
 864 |     meeting.hasSummary = true;
 865 | 
 866 |     // Save the updated data with summary
 867 |     await fileOperationManager.writeData(meetingsData);
 868 | 
 869 |     console.log('Updated meeting note with AI summary');
 870 | 
 871 |     // Notify the renderer to refresh the note if it's open
 872 |     if (mainWindow && !mainWindow.isDestroyed()) {
 873 |       mainWindow.webContents.send('summary-generated', meetingId);
 874 |     }
 875 | 
 876 |     return {
 877 |       success: true,
 878 |       summary
 879 |     };
 880 |   } catch (error) {
 881 |     console.error('Error generating meeting summary:', error);
 882 |     return { success: false, error: error.message };
 883 |   }
 884 | });
 885 | 
 886 | // Handle starting a manual desktop recording
 887 | ipcMain.handle('startManualRecording', async (event, meetingId) => {
 888 |   try {
 889 |     console.log(`Starting manual desktop recording for meeting: ${meetingId}`);
 890 | 
 891 |     // Read current data
 892 |     const fileData = await fs.promises.readFile(meetingsFilePath, 'utf8');
 893 |     const meetingsData = JSON.parse(fileData);
 894 | 
 895 |     // Find the meeting
 896 |     const pastMeetingIndex = meetingsData.pastMeetings.findIndex(meeting => meeting.id === meetingId);
 897 | 
 898 |     if (pastMeetingIndex === -1) {
 899 |       return { success: false, error: 'Meeting not found' };
 900 |     }
 901 | 
 902 |     const meeting = meetingsData.pastMeetings[pastMeetingIndex];
 903 | 
 904 |     try {
 905 |       // Prepare desktop audio recording - this is the key difference from our previous implementation
 906 |       // It returns a key that we use as the window ID
 907 | 
 908 |       // Log the prepareDesktopAudioRecording API call
 909 |       sdkLogger.logApiCall('prepareDesktopAudioRecording');
 910 | 
 911 |       const key = await RecallAiSdk.prepareDesktopAudioRecording();
 912 |       console.log('Prepared desktop audio recording with key:', key);
 913 | 
 914 |       // Create a recording token
 915 |       const uploadData = await createDesktopSdkUpload();
 916 |       if (!uploadData || !uploadData.upload_token) {
 917 |         return { success: false, error: 'Failed to create recording token' };
 918 |       }
 919 | 
 920 |       // Store the recording ID in the meeting
 921 |       meeting.recordingId = key;
 922 | 
 923 |       // Initialize transcript array if not present
 924 |       if (!meeting.transcript) {
 925 |         meeting.transcript = [];
 926 |       }
 927 | 
 928 |       // Store tracking info for the recording
 929 |       global.activeMeetingIds = global.activeMeetingIds || {};
 930 |       global.activeMeetingIds[key] = {
 931 |         platformName: 'Desktop Recording',
 932 |         noteId: meetingId
 933 |       };
 934 | 
 935 |       // Register the recording in our active recordings tracker
 936 |       activeRecordings.addRecording(key, meetingId, 'Desktop Recording');
 937 | 
 938 |       // Save the updated data
 939 |       await fileOperationManager.writeData(meetingsData);
 940 | 
 941 |       // Start recording with the key from prepareDesktopAudioRecording
 942 |       console.log('Starting desktop recording with key:', key);
 943 | 
 944 |       // Log the startRecording API call
 945 |       sdkLogger.logApiCall('startRecording', {
 946 |         windowId: key,
 947 |         uploadToken: `${uploadData.upload_token.substring(0, 8)}...` // Log truncated token for security
 948 |       });
 949 | 
 950 |       RecallAiSdk.startRecording({
 951 |         windowId: key,
 952 |         uploadToken: uploadData.upload_token
 953 |       });
 954 | 
 955 |       return {
 956 |         success: true,
 957 |         recordingId: key
 958 |       };
 959 |     } catch (sdkError) {
 960 |       console.error('RecallAI SDK error:', sdkError);
 961 |       return { success: false, error: 'Failed to prepare desktop recording: ' + sdkError.message };
 962 |     }
 963 |   } catch (error) {
 964 |     console.error('Error starting manual recording:', error);
 965 |     return { success: false, error: error.message };
 966 |   }
 967 | });
 968 | 
 969 | // Handle stopping a manual desktop recording
 970 | ipcMain.handle('stopManualRecording', async (event, recordingId) => {
 971 |   try {
 972 |     console.log(`Stopping manual desktop recording: ${recordingId}`);
 973 | 
 974 |     // Stop the recording - using the windowId property as shown in the reference
 975 | 
 976 |     // Log the stopRecording API call
 977 |     sdkLogger.logApiCall('stopRecording', {
 978 |       windowId: recordingId
 979 |     });
 980 | 
 981 |     // Update our active recordings tracker
 982 |     activeRecordings.updateState(recordingId, 'stopping');
 983 | 
 984 |     RecallAiSdk.stopRecording({
 985 |       windowId: recordingId
 986 |     });
 987 | 
 988 |     // The recording-ended event will be triggered automatically,
 989 |     // which will handle uploading and generating the summary
 990 | 
 991 |     return { success: true };
 992 |   } catch (error) {
 993 |     console.error('Error stopping manual recording:', error);
 994 |     return { success: false, error: error.message };
 995 |   }
 996 | });
 997 | 
 998 | // Handle generating AI summary with streaming
 999 | ipcMain.handle('generateMeetingSummaryStreaming', async (event, meetingId) => {
1000 |   try {
1001 |     console.log(`Streaming summary generation requested for meeting: ${meetingId}`);
1002 | 
1003 |     // Read current data
1004 |     const fileData = await fs.promises.readFile(meetingsFilePath, 'utf8');
1005 |     const meetingsData = JSON.parse(fileData);
1006 | 
1007 |     // Find the meeting
1008 |     const pastMeetingIndex = meetingsData.pastMeetings.findIndex(meeting => meeting.id === meetingId);
1009 | 
1010 |     if (pastMeetingIndex === -1) {
1011 |       return { success: false, error: 'Meeting not found' };
1012 |     }
1013 | 
1014 |     const meeting = meetingsData.pastMeetings[pastMeetingIndex];
1015 | 
1016 |     // Check if there's a transcript to summarize
1017 |     if (!meeting.transcript || meeting.transcript.length === 0) {
1018 |       return {
1019 |         success: false,
1020 |         error: 'No transcript available for this meeting'
1021 |       };
1022 |     }
1023 | 
1024 |     // Log summary generation to console instead of showing a notification
1025 |     console.log('Generating streaming summary for meeting: ' + meetingId);
1026 | 
1027 |     // Get meeting title for use in the new content
1028 |     const meetingTitle = meeting.title || "Meeting Notes";
1029 | 
1030 |     // Initial content with placeholders
1031 |     meeting.content = `# ${meetingTitle}\n\nGenerating summary...`;
1032 | 
1033 |     // Update the note on the frontend right away
1034 |     mainWindow.webContents.send('summary-update', {
1035 |       meetingId,
1036 |       content: meeting.content
1037 |     });
1038 | 
1039 |     // Create progress callback for streaming updates
1040 |     const streamProgress = (currentText) => {
1041 |       // Update content with current streaming text
1042 |       meeting.content = `# ${meetingTitle}\n\n## AI-Generated Meeting Summary\n${currentText}`;
1043 | 
1044 |       // Send immediate update to renderer - don't debounce or delay this
1045 |       if (mainWindow && !mainWindow.isDestroyed()) {
1046 |         try {
1047 |           // Force immediate send of the update
1048 |           mainWindow.webContents.send('summary-update', {
1049 |             meetingId,
1050 |             content: meeting.content,
1051 |             timestamp: Date.now() // Add timestamp to ensure uniqueness
1052 |           });
1053 |         } catch (err) {
1054 |           console.error('Error sending streaming update to renderer:', err);
1055 |         }
1056 |       }
1057 |     };
1058 | 
1059 |     // Generate summary with streaming
1060 |     const summary = await generateMeetingSummary(meeting, streamProgress);
1061 | 
1062 |     // Make sure the final content is set correctly
1063 |     meeting.content = `# ${meetingTitle}\n\n${summary}`;
1064 |     meeting.hasSummary = true;
1065 | 
1066 |     // Save the updated data with summary
1067 |     await fileOperationManager.writeData(meetingsData);
1068 | 
1069 |     console.log('Updated meeting note with AI summary (streaming)');
1070 | 
1071 |     // Final notification to renderer
1072 |     mainWindow.webContents.send('summary-generated', meetingId);
1073 | 
1074 |     return {
1075 |       success: true,
1076 |       summary
1077 |     };
1078 |   } catch (error) {
1079 |     console.error('Error generating streaming summary:', error);
1080 |     return { success: false, error: error.message };
1081 |   }
1082 | });
1083 | 
1084 | // Handle loading meetings data
1085 | ipcMain.handle('loadMeetingsData', async () => {
1086 |   try {
1087 |     // Use our file operation manager to safely read the data
1088 |     const data = await fileOperationManager.readMeetingsData();
1089 | 
1090 |     // Return the data
1091 |     return {
1092 |       success: true,
1093 |       data: data
1094 |     };
1095 |   } catch (error) {
1096 |     console.error('Failed to load meetings data:', error);
1097 |     return { success: false, error: error.message };
1098 |   }
1099 | });
1100 | 
1101 | // Function to create a new meeting note and start recording
1102 | async function createMeetingNoteAndRecord(platformName) {
1103 |   console.log("Creating meeting note for platform:", platformName);
1104 |   try {
1105 |     if (!detectedMeeting) {
1106 |       console.error('No active meeting detected');
1107 |       return;
1108 |     }
1109 |     console.log("Detected meeting info:", detectedMeeting.window.id, detectedMeeting.window.platform);
1110 | 
1111 |     // Store the meeting window ID for later reference with transcript events
1112 |     global.activeMeetingIds = global.activeMeetingIds || {};
1113 |     global.activeMeetingIds[detectedMeeting.window.id] = { platformName };
1114 | 
1115 |     // Read the current meetings data
1116 |     let meetingsData;
1117 |     try {
1118 |       const fileData = await fs.promises.readFile(meetingsFilePath, 'utf8');
1119 |       meetingsData = JSON.parse(fileData);
1120 |     } catch (error) {
1121 |       console.error('Error reading meetings data:', error);
1122 |       meetingsData = { upcomingMeetings: [], pastMeetings: [] };
1123 |     }
1124 | 
1125 |     // Generate a unique ID for the new meeting
1126 |     const id = 'meeting-' + Date.now();
1127 | 
1128 |     // Current date and time
1129 |     const now = new Date();
1130 | 
1131 |     // Use the actual meeting title if available, otherwise fall back to platform name + time
1132 |     // NOTE: meeting-updated may fire after the user clicks to join, so this might not be
1133 |     // populated yet. The meeting-updated handler will update the title retroactively if needed.
1134 |     const meetingTitle = detectedMeeting.window.title 
1135 |       ? detectedMeeting.window.title 
1136 |       : `${platformName} Meeting - ${now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`;
1137 | 
1138 |     // Create a template for the note content
1139 |     const template = `# ${meetingTitle}\nRecording: In Progress...`;
1140 | 
1141 |     // Create a new meeting object
1142 |     const newMeeting = {
1143 |       id: id,
1144 |       type: 'document',
1145 |       title: meetingTitle,
1146 |       subtitle: now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
1147 |       hasDemo: false,
1148 |       date: now.toISOString(),
1149 |       participants: [],
1150 |       content: template,
1151 |       recordingId: detectedMeeting.window.id,
1152 |       platform: platformName,
1153 |       transcript: [] // Initialize an empty array for transcript data
1154 |     };
1155 | 
1156 |     // Update the active meeting tracking with the note ID
1157 |     if (global.activeMeetingIds && global.activeMeetingIds[detectedMeeting.window.id]) {
1158 |       global.activeMeetingIds[detectedMeeting.window.id].noteId = id;
1159 |     }
1160 | 
1161 |     // Register this meeting in our active recordings tracker (even before starting)
1162 |     // This ensures the UI knows about it immediately
1163 |     activeRecordings.addRecording(detectedMeeting.window.id, id, platformName);
1164 | 
1165 |     // Add to pastMeetings
1166 |     meetingsData.pastMeetings.unshift(newMeeting);
1167 | 
1168 |     // Save the updated data
1169 |     console.log(`Saving meeting data to ${meetingsFilePath} with ID: ${id}`);
1170 |     await fileOperationManager.writeData(meetingsData);
1171 | 
1172 |     // Verify the file was written by reading it back
1173 |     try {
1174 |       const verifyData = await fs.promises.readFile(meetingsFilePath, 'utf8');
1175 |       const parsedData = JSON.parse(verifyData);
1176 |       const verifyMeeting = parsedData.pastMeetings.find(m => m.id === id);
1177 | 
1178 |       if (verifyMeeting) {
1179 |         console.log(`Successfully verified meeting ${id} was saved`);
1180 | 
1181 |         // Tell the renderer to open the new note
1182 |         if (mainWindow && !mainWindow.isDestroyed()) {
1183 |           // We need a significant delay to make sure the file is fully processed and loaded
1184 |           // This ensures the renderer has time to process the file and recognize the new meeting
1185 |           setTimeout(async () => {
1186 |             try {
1187 |               // Force a file reload before sending the message
1188 |               await fs.promises.readFile(meetingsFilePath, 'utf8');
1189 | 
1190 |               console.log(`Sending IPC message to open meeting note: ${id}`);
1191 |               mainWindow.webContents.send('open-meeting-note', id);
1192 | 
1193 |               // Send another message after 2 seconds as a backup
1194 |               setTimeout(() => {
1195 |                 console.log(`Sending backup IPC message to open meeting note: ${id}`);
1196 |                 mainWindow.webContents.send('open-meeting-note', id);
1197 |               }, 2000);
1198 |             } catch (error) {
1199 |               console.error('Error before sending open-meeting-note message:', error);
1200 |             }
1201 |           }, 1500); // Increased delay for safety
1202 |         }
1203 |       } else {
1204 |         console.error(`Meeting ${id} not found in saved data!`);
1205 |       }
1206 |     } catch (verifyError) {
1207 |       console.error('Error verifying saved data:', verifyError);
1208 |     }
1209 | 
1210 |     // Start recording with upload token
1211 |     console.log('Starting recording for meeting:', detectedMeeting.window.id);
1212 | 
1213 |     try {
1214 |       // Get upload token
1215 |       const uploadData = await createDesktopSdkUpload();
1216 | 
1217 |       if (!uploadData || !uploadData.upload_token) {
1218 |         console.error('Failed to get upload token. Recording without upload token.');
1219 | 
1220 |         // Log the startRecording API call (no token fallback)
1221 |         sdkLogger.logApiCall('startRecording', {
1222 |           windowId: detectedMeeting.window.id
1223 |         });
1224 | 
1225 |         RecallAiSdk.startRecording({
1226 |           windowId: detectedMeeting.window.id
1227 |         });
1228 |       } else {
1229 |         console.log('Starting recording with upload token:', uploadData.upload_token);
1230 | 
1231 |         // Log the startRecording API call with upload token
1232 |         sdkLogger.logApiCall('startRecording', {
1233 |           windowId: detectedMeeting.window.id,
1234 |           uploadToken: `${uploadData.upload_token.substring(0, 8)}...` // Log truncated token for security
1235 |         });
1236 | 
1237 |         RecallAiSdk.startRecording({
1238 |           windowId: detectedMeeting.window.id,
1239 |           uploadToken: uploadData.upload_token
1240 |         });
1241 |       }
1242 |     } catch (error) {
1243 |       console.error('Error starting recording with upload token:', error);
1244 | 
1245 |       // Fallback to recording without token
1246 | 
1247 |       // Log the startRecording API call (error fallback)
1248 |       sdkLogger.logApiCall('startRecording', {
1249 |         windowId: detectedMeeting.window.id,
1250 |         error: 'Fallback after error'
1251 |       });
1252 | 
1253 |       RecallAiSdk.startRecording({
1254 |         windowId: detectedMeeting.window.id
1255 |       });
1256 |     }
1257 | 
1258 |     return id;
1259 |   } catch (error) {
1260 |     console.error('Error creating meeting note:', error);
1261 |   }
1262 | }
1263 | 
1264 | // Function to process video frames
1265 | async function processVideoFrame(evt) {
1266 |   try {
1267 |     const windowId = evt.window?.id;
1268 |     if (!windowId) {
1269 |       console.error("Missing window ID in video frame event");
1270 |       return;
1271 |     }
1272 | 
1273 |     // Check if we have this meeting in our active meetings
1274 |     if (!global.activeMeetingIds || !global.activeMeetingIds[windowId]) {
1275 |       console.log(`No active meeting found for window ID: ${windowId}`);
1276 |       return;
1277 |     }
1278 | 
1279 |     const noteId = global.activeMeetingIds[windowId].noteId;
1280 |     if (!noteId) {
1281 |       console.log(`No note ID found for window ID: ${windowId}`);
1282 |       return;
1283 |     }
1284 | 
1285 |     // Extract the video data
1286 |     const frameData = evt.data.data;
1287 |     if (!frameData || !frameData.buffer) {
1288 |       console.log("No video frame data in event");
1289 |       return;
1290 |     }
1291 | 
1292 |     // Get data from the event
1293 |     const frameBuffer = frameData.buffer; // base64 encoded PNG
1294 |     const frameTimestamp = frameData.timestamp;
1295 |     const frameType = frameData.type; // 'webcam' or 'screenshare'
1296 |     const participantData = frameData.participant;
1297 | 
1298 |     // Extract participant info
1299 |     const participantId = participantData?.id;
1300 |     const participantName = participantData?.name || 'Unknown';
1301 | 
1302 |     // Log minimal info to avoid flooding the console
1303 |     // console.log(`Received ${frameType} frame from ${participantName} (ID: ${participantId}) at ${frameTimestamp.absolute}`);
1304 | 
1305 |     // Send the frame to the renderer
1306 |     if (mainWindow && !mainWindow.isDestroyed()) {
1307 |       mainWindow.webContents.send('video-frame', {
1308 |         noteId,
1309 |         participantId,
1310 |         participantName,
1311 |         frameType,
1312 |         buffer: frameBuffer,
1313 |         timestamp: frameTimestamp
1314 |       });
1315 |     }
1316 |   } catch (error) {
1317 |     console.error('Error processing video frame:', error);
1318 |   }
1319 | }
1320 | 
1321 | // Function to process participant join events
1322 | async function processParticipantJoin(evt) {
1323 |   try {
1324 |     const windowId = evt.window?.id;
1325 |     if (!windowId) {
1326 |       console.error("Missing window ID in participant join event");
1327 |       return;
1328 |     }
1329 | 
1330 |     // Check if we have this meeting in our active meetings
1331 |     if (!global.activeMeetingIds || !global.activeMeetingIds[windowId]) {
1332 |       console.log(`No active meeting found for window ID: ${windowId}`);
1333 |       return;
1334 |     }
1335 | 
1336 |     const noteId = global.activeMeetingIds[windowId].noteId;
1337 |     if (!noteId) {
1338 |       console.log(`No note ID found for window ID: ${windowId}`);
1339 |       return;
1340 |     }
1341 | 
1342 |     // Extract the participant data
1343 |     const participantData = evt.data.data.participant;
1344 |     if (!participantData) {
1345 |       console.log("No participant data in event");
1346 |       return;
1347 |     }
1348 | 
1349 |     const participantName = participantData.name || "Unknown Participant";
1350 |     const participantId = participantData.id;
1351 |     const isHost = participantData.is_host;
1352 |     const platform = participantData.platform;
1353 | 
1354 |     console.log(`Participant joined: ${participantName} (ID: ${participantId}, Host: ${isHost})`);
1355 | 
1356 |     // Skip "Host" and "Guest" generic names
1357 |     if (participantName === "Host" || participantName === "Guest" || participantName.includes("others") || (participantName.split(" ").length > 3)) {
1358 |       console.log(`Skipping generic participant name: ${participantName}`);
1359 |       return;
1360 |     }
1361 | 
1362 |     // Use the file operation manager to safely update the meetings data
1363 |     await fileOperationManager.scheduleOperation(async (meetingsData) => {
1364 |       // Find the meeting note with this ID
1365 |       const noteIndex = meetingsData.pastMeetings.findIndex(meeting => meeting.id === noteId);
1366 |       if (noteIndex === -1) {
1367 |         console.log(`No meeting note found with ID: ${noteId}`);
1368 |         return null; // Return null to indicate no changes needed
1369 |       }
1370 | 
1371 |       // Get the meeting and initialize participants array if needed
1372 |       const meeting = meetingsData.pastMeetings[noteIndex];
1373 |       if (!meeting.participants) {
1374 |         meeting.participants = [];
1375 |       }
1376 | 
1377 |       // Check if participant already exists (based on ID)
1378 |       const existingParticipantIndex = meeting.participants.findIndex(p => p.id === participantId);
1379 | 
1380 |       if (existingParticipantIndex !== -1) {
1381 |         // Update existing participant
1382 |         meeting.participants[existingParticipantIndex] = {
1383 |           id: participantId,
1384 |           name: participantName,
1385 |           isHost: isHost,
1386 |           platform: platform,
1387 |           joinTime: new Date().toISOString(),
1388 |           status: 'active'
1389 |         };
1390 |       } else {
1391 |         // Add new participant
1392 |         meeting.participants.push({
1393 |           id: participantId,
1394 |           name: participantName,
1395 |           isHost: isHost,
1396 |           platform: platform,
1397 |           joinTime: new Date().toISOString(),
1398 |           status: 'active'
1399 |         });
1400 |       }
1401 | 
1402 |       console.log(`Added/updated participant data for meeting: ${noteId}`);
1403 | 
1404 |       // Notify the renderer if this note is currently being edited
1405 |       if (mainWindow && !mainWindow.isDestroyed()) {
1406 |         mainWindow.webContents.send('participants-updated', noteId);
1407 |       }
1408 | 
1409 |       // Return the updated data to be written
1410 |       return meetingsData;
1411 |     });
1412 | 
1413 |     console.log(`Processed participant join event for meeting: ${noteId}`);
1414 |   } catch (error) {
1415 |     console.error('Error processing participant join event:', error);
1416 |   }
1417 | }
1418 | 
1419 | let currentUnknownSpeaker = -1;
1420 | 
1421 | async function processTranscriptProviderData(evt) {
1422 |   // let speakerId = evt.data.data.payload.
1423 |   try {
1424 |     if (evt.data.data.data.payload.channel.alternatives[0].words[0].speaker !== undefined) {
1425 |       currentUnknownSpeaker = evt.data.data.data.payload.channel.alternatives[0].words[0].speaker;
1426 |     }
1427 |   } catch (error) {
1428 |     // console.error("Error processing provider data:", error);
1429 |   }
1430 | }
1431 | 
1432 | // Function to process transcript data and store it with the meeting note
1433 | async function processTranscriptData(evt) {
1434 |   try {
1435 |     const windowId = evt.window?.id;
1436 |     if (!windowId) {
1437 |       console.error("Missing window ID in transcript event");
1438 |       return;
1439 |     }
1440 | 
1441 |     // Check if we have this meeting in our active meetings
1442 |     if (!global.activeMeetingIds || !global.activeMeetingIds[windowId]) {
1443 |       console.log(`No active meeting found for window ID: ${windowId}`);
1444 |       return;
1445 |     }
1446 | 
1447 |     const noteId = global.activeMeetingIds[windowId].noteId;
1448 |     if (!noteId) {
1449 |       console.log(`No note ID found for window ID: ${windowId}`);
1450 |       return;
1451 |     }
1452 | 
1453 |     // Extract the transcript data
1454 |     const words = evt.data.data.words || [];
1455 |     if (words.length === 0) {
1456 |       return; // No words to process
1457 |     }
1458 | 
1459 |     // Get speaker information
1460 |     let speaker;
1461 |     if (evt.data.data.participant?.name && evt.data.data.participant?.name !== "Host" && evt.data.data.participant?.name !== "Guest") {
1462 |       speaker = evt.data.data.participant?.name;
1463 |     } else if (currentUnknownSpeaker !== -1) {
1464 |       speaker = `Speaker ${currentUnknownSpeaker}`;
1465 |     } else {
1466 |       speaker = "Unknown Speaker";
1467 |     }
1468 | 
1469 |     // Combine all words into a single text
1470 |     const text = words.map(word => word.text).join(" ");
1471 | 
1472 |     console.log(`Transcript from ${speaker}: "${text}"`);
1473 | 
1474 |     // Use the file operation manager to safely update the meetings data
1475 |     await fileOperationManager.scheduleOperation(async (meetingsData) => {
1476 |       // Find the meeting note with this ID
1477 |       const noteIndex = meetingsData.pastMeetings.findIndex(meeting => meeting.id === noteId);
1478 |       if (noteIndex === -1) {
1479 |         console.log(`No meeting note found with ID: ${noteId}`);
1480 |         return null; // Return null to indicate no changes needed
1481 |       }
1482 | 
1483 |       // Add the transcript data
1484 |       const meeting = meetingsData.pastMeetings[noteIndex];
1485 | 
1486 |       // Initialize transcript array if it doesn't exist
1487 |       if (!meeting.transcript) {
1488 |         meeting.transcript = [];
1489 |       }
1490 | 
1491 |       // Add the new transcript entry
1492 |       meeting.transcript.push({
1493 |         text,
1494 |         speaker,
1495 |         timestamp: new Date().toISOString()
1496 |       });
1497 | 
1498 |       console.log(`Added transcript data for meeting: ${noteId}`);
1499 | 
1500 |       // Notify the renderer if this note is currently being edited
1501 |       if (mainWindow && !mainWindow.isDestroyed()) {
1502 |         mainWindow.webContents.send('transcript-updated', noteId);
1503 |       }
1504 | 
1505 |       // Return the updated data to be written
1506 |       return meetingsData;
1507 |     });
1508 | 
1509 |     console.log(`Processed transcript data for meeting: ${noteId}`);
1510 |   } catch (error) {
1511 |     console.error('Error processing transcript data:', error);
1512 |   }
1513 | }
1514 | 
1515 | // Function to generate AI summary from transcript with streaming support
1516 | async function generateMeetingSummary(meeting, progressCallback = null) {
1517 |   try {
1518 |     if (!meeting.transcript || meeting.transcript.length === 0) {
1519 |       console.log('No transcript available to summarize');
1520 |       return 'No transcript available to summarize.';
1521 |     }
1522 | 
1523 |     console.log(`Generating AI summary for meeting: ${meeting.id}`);
1524 | 
1525 |     // Format the transcript into a single text for the AI to process
1526 |     const transcriptText = meeting.transcript.map(entry =>
1527 |       `${entry.speaker}: ${entry.text}`
1528 |     ).join('\n');
1529 | 
1530 |     // Format detected participants if available
1531 |     let participantsText = "";
1532 |     if (meeting.participants && meeting.participants.length > 0) {
1533 |       participantsText = "Detected participants:\n" + meeting.participants.map(p =>
1534 |         `- ${p.name}${p.isHost ? ' (Host)' : ''}`
1535 |       ).join('\n');
1536 |     }
1537 | 
1538 |     // Define a system prompt to guide the AI's response with a specific format
1539 |     const systemMessage =
1540 |       "You are an AI assistant that summarizes meeting transcripts. " +
1541 |       "You MUST format your response using the following structure:\n\n" +
1542 |       "# Participants\n" +
1543 |       "- [List all participants mentioned in the transcript]\n\n" +
1544 |       "# Summary\n" +
1545 |       "- [Key discussion point 1]\n" +
1546 |       "- [Key discussion point 2]\n" +
1547 |       "- [Key decisions made]\n" +
1548 |       "- [Include any important deadlines or dates mentioned]\n\n" +
1549 |       "# Action Items\n" +
1550 |       "- [Action item 1] - [Responsible person if mentioned]\n" +
1551 |       "- [Action item 2] - [Responsible person if mentioned]\n" +
1552 |       "- [Add any other action items discussed]\n\n" +
1553 |       "Stick strictly to this format with these exact section headers. Keep each bullet point concise but informative.";
1554 | 
1555 |     // Prepare the messages array for the API
1556 |     const messages = [
1557 |       { role: "system", content: systemMessage },
1558 |       {
1559 |         role: "user", content: `Summarize the following meeting transcript with the EXACT format specified in your instructions:
1560 | ${participantsText ? participantsText + "\n\n" : ""}
1561 | Transcript:
1562 | ${transcriptText}`
1563 |       }
1564 |     ];
1565 | 
1566 |     // If no progress callback provided, use the non-streaming version
1567 |     if (!progressCallback) {
1568 |       // Call the OpenAI API (via OpenRouter) for summarization (non-streaming)
1569 |       const response = await openai.chat.completions.create({
1570 |         model: MODELS.PRIMARY, // Use our primary model for a good balance of quality and speed
1571 |         messages: messages,
1572 |         max_tokens: 1000,
1573 |         temperature: 0.7,
1574 |         fallbacks: MODELS.FALLBACKS, // Use our defined fallback models
1575 |         transform_to_openai: true, // Ensures consistent response format across models
1576 |         route: "fallback" // Automatically use fallbacks if the primary model is unavailable
1577 |       });
1578 | 
1579 |       // Log which model was actually used
1580 |       console.log(`AI summary generated successfully using model: ${response.model}`);
1581 | 
1582 |       // Return the generated summary
1583 |       return response.choices[0].message.content;
1584 |     } else {
1585 |       // Use streaming version and accumulate the response
1586 |       let fullText = '';
1587 | 
1588 |       // Create a streaming request
1589 |       const stream = await openai.chat.completions.create({
1590 |         model: MODELS.PRIMARY, // Use our primary model for a good balance of quality and speed
1591 |         messages: messages,
1592 |         max_tokens: 1000,
1593 |         temperature: 0.7,
1594 |         stream: true,
1595 |         fallbacks: MODELS.FALLBACKS, // Use our defined fallback models
1596 |         transform_to_openai: true, // Ensures consistent response format across models
1597 |         route: "fallback" // Automatically use fallbacks if the primary model is unavailable
1598 |       });
1599 | 
1600 |       // Handle streaming events
1601 |       return new Promise((resolve, reject) => {
1602 |         // Process the stream
1603 |         (async () => {
1604 |           try {
1605 |             // Log the model being used when first chunk arrives (if available)
1606 |             let modelLogged = false;
1607 | 
1608 |             for await (const chunk of stream) {
1609 |               // Log the model on first chunk if available
1610 |               if (!modelLogged && chunk.model) {
1611 |                 console.log(`Streaming with model: ${chunk.model}`);
1612 |                 modelLogged = true;
1613 |               }
1614 | 
1615 |               // Extract the text content from the chunk
1616 |               const content = chunk.choices[0]?.delta?.content || '';
1617 | 
1618 |               if (content) {
1619 |                 // Add the new text chunk to our accumulated text
1620 |                 fullText += content;
1621 | 
1622 |                 // Log each token for debugging (less verbose)
1623 |                 if (content.length < 50) {
1624 |                   console.log(`Received token: "${content}"`);
1625 |                 } else {
1626 |                   console.log(`Received content of length: ${content.length}`);
1627 |                 }
1628 | 
1629 |                 // Call the progress callback immediately with each token
1630 |                 if (progressCallback) {
1631 |                   progressCallback(fullText);
1632 |                 }
1633 |               }
1634 |             }
1635 | 
1636 |             console.log('AI summary streaming completed');
1637 |             resolve(fullText);
1638 |           } catch (error) {
1639 |             console.error('Stream error:', error);
1640 |             reject(error);
1641 |           }
1642 |         })();
1643 |       });
1644 |     }
1645 |   } catch (error) {
1646 |     console.error('Error generating meeting summary:', error);
1647 | 
1648 |     // Check if it's an OpenRouter/OpenAI specific error
1649 |     if (error.status) {
1650 |       return `Error generating summary: API returned status ${error.status}: ${error.message}`;
1651 |     } else if (error.response) {
1652 |       // Handle errors with a response object
1653 |       return `Error generating summary: ${error.response.status} - ${error.response.data?.error?.message || error.message}`;
1654 |     } else {
1655 |       // Default error handling
1656 |       return `Error generating summary: ${error.message}`;
1657 |     }
1658 |   }
1659 | }
1660 | 
1661 | // Function to update a note with recording information when recording ends
1662 | async function updateNoteWithRecordingInfo(recordingId) {
1663 |   try {
1664 |     // Read the current meetings data
1665 |     let meetingsData;
1666 |     try {
1667 |       const fileData = await fs.promises.readFile(meetingsFilePath, 'utf8');
1668 |       meetingsData = JSON.parse(fileData);
1669 |     } catch (error) {
1670 |       console.error('Error reading meetings data:', error);
1671 |       return;
1672 |     }
1673 | 
1674 |     // Find the meeting note with this recording ID
1675 |     const noteIndex = meetingsData.pastMeetings.findIndex(meeting =>
1676 |       meeting.recordingId === recordingId
1677 |     );
1678 | 
1679 |     if (noteIndex === -1) {
1680 |       console.log('No meeting note found for recording ID:', recordingId);
1681 |       return;
1682 |     }
1683 | 
1684 |     // Format current date
1685 |     const now = new Date();
1686 |     const formattedDate = now.toLocaleString();
1687 | 
1688 |     // Update the meeting note content
1689 |     const meeting = meetingsData.pastMeetings[noteIndex];
1690 |     const content = meeting.content;
1691 | 
1692 |     // Replace the "Recording: In Progress..." line with completed information
1693 |     let updatedContent = content.replace(
1694 |       "Recording: In Progress...",
1695 |       `Recording: Completed at ${formattedDate}\n`
1696 |     );
1697 | 
1698 |     // Update the meeting object
1699 |     meeting.content = updatedContent;
1700 |     meeting.recordingComplete = true;
1701 |     meeting.recordingEndTime = now.toISOString();
1702 | 
1703 |     // Save the initial update
1704 |     await fileOperationManager.writeData(meetingsData);
1705 | 
1706 |     // Generate AI summary if there's a transcript
1707 |     if (meeting.transcript && meeting.transcript.length > 0) {
1708 |       console.log(`Generating AI summary for meeting ${meeting.id}...`);
1709 | 
1710 |       // Log summary generation to console instead of showing a notification
1711 |       console.log('Generating AI summary for meeting: ' + meeting.id);
1712 | 
1713 |       // Get meeting title for use in the new content
1714 |       const meetingTitle = meeting.title || "Meeting Notes";
1715 | 
1716 |       // Create initial content with placeholder
1717 |       meeting.content = `# ${meetingTitle}\nGenerating summary...`;
1718 | 
1719 |       // Notify any open editors immediately
1720 |       if (mainWindow && !mainWindow.isDestroyed()) {
1721 |         mainWindow.webContents.send('summary-update', {
1722 |           meetingId: meeting.id,
1723 |           content: meeting.content
1724 |         });
1725 |       }
1726 | 
1727 |       // Create progress callback for streaming updates
1728 |       const streamProgress = (currentText) => {
1729 |         // Update content with current streaming text
1730 |         meeting.content = `# ${meetingTitle}\n\n${currentText}`;
1731 | 
1732 |         // Send immediate update to renderer if note is open
1733 |         if (mainWindow && !mainWindow.isDestroyed()) {
1734 |           try {
1735 |             mainWindow.webContents.send('summary-update', {
1736 |               meetingId: meeting.id,
1737 |               content: meeting.content,
1738 |               timestamp: Date.now() // Add timestamp to ensure uniqueness
1739 |             });
1740 |           } catch (err) {
1741 |             console.error('Error sending streaming update to renderer:', err);
1742 |           }
1743 |         }
1744 |       };
1745 | 
1746 |       // Generate the summary with streaming updates
1747 |       const summary = await generateMeetingSummary(meeting, streamProgress);
1748 | 
1749 |       // Check for different possible video file patterns
1750 |       const possibleFilePaths = [
1751 |         path.join(RECORDING_PATH, `${recordingId}.mp4`),
1752 |         path.join(RECORDING_PATH, `macos-desktop-${recordingId}.mp4`),
1753 |         path.join(RECORDING_PATH, `macos-desktop${recordingId}.mp4`),
1754 |         path.join(RECORDING_PATH, `desktop-${recordingId}.mp4`)
1755 |       ];
1756 | 
1757 |       // Find the first video file that exists
1758 |       let videoExists = false;
1759 |       let videoFilePath = null;
1760 | 
1761 |       try {
1762 |         for (const filePath of possibleFilePaths) {
1763 |           if (fs.existsSync(filePath)) {
1764 |             videoExists = true;
1765 |             videoFilePath = filePath;
1766 |             console.log(`Found video file at: ${videoFilePath}`);
1767 |             break;
1768 |           }
1769 |         }
1770 |       } catch (err) {
1771 |         console.error('Error checking for video files:', err);
1772 |       }
1773 | 
1774 |       console.log("Attempting to embed video file", videoFilePath);
1775 | 
1776 |       // Set the content to just the summary
1777 |       meeting.content = `${summary}`;
1778 | 
1779 |       // If video exists, store the path separately but don't add it to the content
1780 |       if (videoExists) {
1781 |         meeting.videoPath = videoFilePath; // Store the path for future reference
1782 |         console.log(`Stored video path in meeting object: ${videoFilePath}`);
1783 |       } else {
1784 |         console.log('Video file not found, continuing without embedding');
1785 |       }
1786 | 
1787 |       meeting.hasSummary = true;
1788 | 
1789 |       // Save the updated data with summary
1790 |       await fileOperationManager.writeData(meetingsData);
1791 | 
1792 |       console.log('Updated meeting note with AI summary');
1793 |     }
1794 | 
1795 |     // If the note is currently open, notify the renderer to refresh it
1796 |     if (mainWindow && !mainWindow.isDestroyed()) {
1797 |       mainWindow.webContents.send('recording-completed', meeting.id);
1798 |     }
1799 |   } catch (error) {
1800 |     console.error('Error updating note with recording info:', error);
1801 |   }
1802 | }
1803 | 
1804 | // Function to check if there's a detected meeting available
1805 | ipcMain.handle('checkForDetectedMeeting', async () => {
1806 |   return detectedMeeting !== null;
1807 | });
1808 | 
1809 | // Function to join the detected meeting
1810 | ipcMain.handle('joinDetectedMeeting', async () => {
1811 |   return joinDetectedMeeting();
1812 | });
1813 | 
1814 | // Function to handle joining a detected meeting
1815 | async function joinDetectedMeeting() {
1816 |   try {
1817 |     console.log("Join detected meeting called");
1818 | 
1819 |     if (!detectedMeeting) {
1820 |       console.log("No detected meeting available");
1821 |       return { success: false, error: "No active meeting detected" };
1822 |     }
1823 | 
1824 |     // Map platform codes to readable names
1825 |     const platformNames = {
1826 |       'zoom': 'Zoom',
1827 |       'google-meet': 'Google Meet',
1828 |       'slack': 'Slack',
1829 |       'teams': 'Microsoft Teams'
1830 |     };
1831 | 
1832 |     // Get a user-friendly platform name, or use the raw platform name if not in our map
1833 |     const platformName = platformNames[detectedMeeting.window.platform] || detectedMeeting.window.platform;
1834 | 
1835 |     console.log("Joining detected meeting for platform:", platformName);
1836 | 
1837 |     // Ensure main window exists and is visible
1838 |     if (!mainWindow || mainWindow.isDestroyed()) {
1839 |       console.log("Creating new main window");
1840 |       createWindow();
1841 |     }
1842 | 
1843 |     // Bring window to front with focus
1844 |     if (mainWindow.isMinimized()) mainWindow.restore();
1845 |     mainWindow.show();
1846 |     mainWindow.focus();
1847 | 
1848 |     // Process with more reliable timing
1849 |     return new Promise((resolve) => {
1850 |       // Wait a moment for the window to be fully focused and ready
1851 |       setTimeout(async () => {
1852 |         console.log("Window is ready, creating new meeting note");
1853 | 
1854 |         try {
1855 |           // Create a new meeting note and start recording
1856 |           const id = await createMeetingNoteAndRecord(platformName);
1857 | 
1858 |           console.log("Created new meeting with ID:", id);
1859 |           resolve({ success: true, meetingId: id });
1860 |         } catch (err) {
1861 |           console.error("Error creating meeting note:", err);
1862 |           resolve({ success: false, error: err.message });
1863 |         }
1864 |       }, 800); // Increased timeout for more reliability
1865 |     });
1866 |   } catch (error) {
1867 |     console.error("Error in joinDetectedMeeting:", error);
1868 |     return { success: false, error: error.message };
1869 |   }
1870 | }
1871 | 


--------------------------------------------------------------------------------