feat(electron): create recording through tray (#10526)

- added tray menu for controlling recording status
- recording watcher for monitoring system audio input events

packages/frontend/media-capture-playground/server/main.ts

@@ -28,12 +28,13 @@ console.log(`📁 Ensuring recordings directory exists at ${RECORDING_DIR}`);
 
 // Types
 interface Recording {
-  app: TappableApplication;
+  app: TappableApplication | null;
   appGroup: Application | null;
   buffers: Float32Array[];
   stream: AudioTapStream;
   startTime: number;
   isWriting: boolean;
+  isGlobal?: boolean;
 }
 
 interface RecordingStatus {
@@ -54,6 +55,7 @@ interface RecordingMetadata {
   sampleRate: number;
   channels: number;
   totalSamples: number;
+  isGlobal?: boolean;
 }
 
 interface AppInfo {
@@ -118,7 +120,7 @@ app.use(
 async function saveRecording(recording: Recording): Promise<string | null> {
   try {
     recording.isWriting = true;
-    const app = recording.appGroup || recording.app;
+    const app = recording.isGlobal ? null : recording.appGroup || recording.app;
 
     const totalSamples = recording.buffers.reduce(
       (acc, buf) => acc + buf.length,
@@ -133,9 +135,19 @@ async function saveRecording(recording: Recording): Promise<string | null> {
     const channelCount = recording.stream.channels;
     const expectedSamples = recordingDuration * actualSampleRate;
 
-    console.log(`💾 Saving recording for ${app.name}:`);
-    console.log(`- Process ID: ${app.processId}`);
-    console.log(`- Bundle ID: ${app.bundleIdentifier}`);
+    if (recording.isGlobal) {
+      console.log('💾 Saving global recording:');
+    } else {
+      const appName = app?.name ?? 'Unknown App';
+      const processId = app?.processId ?? 0;
+      const bundleId = app?.bundleIdentifier ?? 'unknown';
+      console.log(`💾 Saving recording for ${appName}:`);
+      if (app) {
+        console.log(`- Process ID: ${processId}`);
+        console.log(`- Bundle ID: ${bundleId}`);
+      }
+    }
+
     console.log(`- Actual duration: ${recordingDuration.toFixed(2)}s`);
     console.log(`- Sample rate: ${actualSampleRate}Hz`);
     console.log(`- Channels: ${channelCount}`);
@@ -156,7 +168,9 @@ async function saveRecording(recording: Recording): Promise<string | null> {
     await fs.ensureDir(RECORDING_DIR);
 
     const timestamp = Date.now();
-    const baseFilename = `${recording.app.bundleIdentifier}-${recording.app.processId}-${timestamp}`;
+    const baseFilename = recording.isGlobal
+      ? `global-recording-${timestamp}`
+      : `${app?.bundleIdentifier ?? 'unknown'}-${app?.processId ?? 0}-${timestamp}`;
     const recordingDir = `${RECORDING_DIR}/${baseFilename}`;
     await fs.ensureDir(recordingDir);
 
@@ -189,7 +203,7 @@ async function saveRecording(recording: Recording): Promise<string | null> {
     console.log('✅ Transcription MP3 file written successfully');
 
     // Save app icon if available
-    if (app.icon) {
+    if (app?.icon) {
       console.log(`📝 Writing app icon to ${iconFilename}`);
       await fs.writeFile(iconFilename, app.icon);
       console.log('✅ App icon written successfully');
@@ -198,15 +212,16 @@ async function saveRecording(recording: Recording): Promise<string | null> {
     console.log(`📝 Writing metadata to ${metadataFilename}`);
     // Save metadata with the actual sample rate from the stream
     const metadata: RecordingMetadata = {
-      appName: app.name,
-      bundleIdentifier: app.bundleIdentifier,
-      processId: app.processId,
+      appName: app?.name ?? 'Global Recording',
+      bundleIdentifier: app?.bundleIdentifier ?? 'system.global',
+      processId: app?.processId ?? -1,
       recordingStartTime: recording.startTime,
       recordingEndTime,
       recordingDuration,
       sampleRate: actualSampleRate,
       channels: channelCount,
       totalSamples,
+      isGlobal: recording.isGlobal,
     };
 
     await fs.writeJson(metadataFilename, metadata, { spaces: 2 });
@@ -222,8 +237,8 @@ async function saveRecording(recording: Recording): Promise<string | null> {
 function getRecordingStatus(): RecordingStatus[] {
   return Array.from(recordingMap.entries()).map(([processId, recording]) => ({
     processId,
-    bundleIdentifier: recording.app.bundleIdentifier,
-    name: recording.app.name,
+    bundleIdentifier: recording.app?.bundleIdentifier ?? 'system.global',
+    name: recording.app?.name ?? 'Global Recording',
     startTime: recording.startTime,
     duration: Date.now() - recording.startTime,
   }));
@@ -289,8 +304,11 @@ async function stopRecording(processId: number) {
   }
 
   const app = recording.appGroup || recording.app;
+  const appName =
+    app?.name ?? (recording.isGlobal ? 'Global Recording' : 'Unknown App');
+  const appPid = app?.processId ?? processId;
 
-  console.log(`⏹️ Stopping recording for ${app.name} (PID: ${app.processId})`);
+  console.log(`⏹️ Stopping recording for ${appName} (PID: ${appPid})`);
   console.log(
     `⏱️ Recording duration: ${((Date.now() - recording.startTime) / 1000).toFixed(2)}s`
   );
@@ -302,7 +320,7 @@ async function stopRecording(processId: number) {
   if (filename) {
     console.log(`✅ Recording saved successfully to ${filename}`);
   } else {
-    console.error(`❌ Failed to save recording for ${app.name}`);
+    console.error(`❌ Failed to save recording for ${appName}`);
   }
 
   emitRecordingStatus();
@@ -541,7 +559,13 @@ function listenToAppStateChanges(apps: AppInfo[]) {
 
   appsSubscriber();
   appsSubscriber = () => {
-    subscribers.forEach(subscriber => subscriber.unsubscribe());
+    subscribers.forEach(subscriber => {
+      try {
+        subscriber.unsubscribe();
+      } catch {
+        // ignore unsubscribe error
+      }
+    });
   };
 }
 
@@ -606,8 +630,8 @@ app.get('/apps/saved', rateLimiter, async (_req, res) => {
 // Utility function to validate and sanitize folder name
 function validateAndSanitizeFolderName(folderName: string): string | null {
   // Allow alphanumeric characters, hyphens, dots (for bundle IDs)
-  // Format: bundleId-processId-timestamp
-  if (!/^[\w.-]+-\d+-\d+$/.test(folderName)) {
+  // Format: bundleId-processId-timestamp OR global-recording-timestamp
+  if (!/^([\w.-]+-\d+-\d+|global-recording-\d+)$/.test(folderName)) {
     return null;
   }
 
@@ -788,6 +812,65 @@ app.post(
   }
 );
 
+async function startGlobalRecording() {
+  const GLOBAL_RECORDING_ID = -1;
+  if (recordingMap.has(GLOBAL_RECORDING_ID)) {
+    console.log('⚠️ Global recording already in progress');
+    return;
+  }
+
+  try {
+    console.log('🎙️ Starting global recording');
+
+    const buffers: Float32Array[] = [];
+    const stream = ShareableContent.tapGlobalAudio(
+      null,
+      (err: Error | null, samples: Float32Array) => {
+        if (err) {
+          console.error('❌ Global audio stream error:', err);
+          return;
+        }
+        const recording = recordingMap.get(GLOBAL_RECORDING_ID);
+        if (recording && !recording.isWriting) {
+          buffers.push(new Float32Array(samples));
+        }
+      }
+    );
+
+    recordingMap.set(GLOBAL_RECORDING_ID, {
+      app: null,
+      appGroup: null,
+      buffers,
+      stream,
+      startTime: Date.now(),
+      isWriting: false,
+      isGlobal: true,
+    });
+
+    console.log('✅ Global recording started successfully');
+    emitRecordingStatus();
+  } catch (error) {
+    console.error('❌ Error starting global recording:', error);
+  }
+}
+
+// Add API endpoint for global recording
+app.post('/global/record', async (_req, res) => {
+  try {
+    await startGlobalRecording();
+    res.json({ success: true });
+  } catch (error) {
+    console.error('❌ Error starting global recording:', error);
+    res.status(500).json({ error: 'Failed to start global recording' });
+  }
+});
+
+app.post('/global/stop', async (_req, res) => {
+  const GLOBAL_RECORDING_ID = -1;
+  await stopRecording(GLOBAL_RECORDING_ID);
+  res.json({ success: true });
+});
+
 // Start server
 httpServer.listen(PORT, () => {
   console.log(`

packages/frontend/media-capture-playground/web/app.tsx

@@ -1,4 +1,5 @@
 import { AppList } from './components/app-list';
+import { GlobalRecordButton } from './components/global-record-button';
 import { SavedRecordings } from './components/saved-recordings';
 
 export function App() {
@@ -6,11 +7,15 @@ export function App() {
     <div className="h-screen bg-gray-50 overflow-hidden">
       <div className="h-full p-4 flex gap-4 max-w-[1800px] mx-auto">
         <div className="flex-1 flex flex-col min-h-0">
-          <h1 className="text-xl font-bold text-gray-900 mb-1">
-            Running Applications
-          </h1>
+          <div className="flex justify-between items-center mb-1">
+            <h1 className="text-xl font-bold text-gray-900">
+              Running Applications
+            </h1>
+            <GlobalRecordButton />
+          </div>
           <p className="text-sm text-gray-500 mb-2">
-            Select an application to start recording its audio
+            Select an application to start recording its audio, or use global
+            recording for system-wide audio
           </p>
           <div className="flex-1 bg-white shadow-lg rounded-lg border border-gray-100 overflow-auto">
             <AppList />

packages/frontend/media-capture-playground/web/components/global-record-button.tsx

@@ -0,0 +1,70 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { socket } from '../utils';
+
+export function GlobalRecordButton() {
+  const [isRecording, setIsRecording] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    function handleRecordingStatus(data: {
+      recordings: Array<{ processId: number }>;
+    }) {
+      // Global recording uses processId -1
+      setIsRecording(data.recordings.some(r => r.processId === -1));
+    }
+
+    socket.on('apps:recording', handleRecordingStatus);
+    return () => {
+      socket.off('apps:recording', handleRecordingStatus);
+    };
+  }, []);
+
+  const handleClick = useCallback(() => {
+    setIsLoading(true);
+    const endpoint = isRecording ? '/api/global/stop' : '/api/global/record';
+    fetch(endpoint, { method: 'POST' })
+      .then(response => {
+        if (!response.ok) {
+          throw new Error('Failed to toggle global recording');
+        }
+      })
+      .catch(error => {
+        console.error('Error toggling global recording:', error);
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
+  }, [isRecording]);
+
+  return (
+    <button
+      onClick={handleClick}
+      disabled={isLoading}
+      className={`
+        px-4 py-2 rounded-lg font-medium text-sm
+        transition-colors duration-200
+        ${isLoading ? 'opacity-50 cursor-not-allowed' : ''}
+        ${
+          isRecording
+            ? 'bg-red-100 text-red-700 hover:bg-red-200'
+            : 'bg-blue-100 text-blue-700 hover:bg-blue-200'
+        }
+      `}
+    >
+      <div className="flex items-center gap-2">
+        {isRecording ? (
+          <>
+            <div className="w-2 h-2 rounded-full bg-red-500 animate-pulse" />
+            Stop Global Recording
+          </>
+        ) : (
+          <>
+            <div className="w-2 h-2 rounded-full bg-blue-500" />
+            Record System Audio
+          </>
+        )}
+      </div>
+    </button>
+  );
+}

packages/frontend/media-capture-playground/web/components/saved-recording-item.tsx

@@ -378,11 +378,12 @@ function RecordingHeader({
   transcriptionError: string | null;
 }): ReactElement {
   const [imgError, setImgError] = React.useState(false);
+  const isGlobalRecording = metadata?.isGlobal;
 
   return (
     <div className="flex items-start space-x-4 p-4 bg-gray-50/30">
       <div className="relative w-12 h-12 flex-shrink-0">
-        {!imgError ? (
+        {!imgError && !isGlobalRecording ? (
           <img
             src={`/api/recordings/${fileName}/icon.png`}
             alt={metadata?.appName || 'Unknown Application'}
@@ -401,7 +402,12 @@ function RecordingHeader({
             <span className="text-gray-900 font-semibold text-base truncate">
               {metadata?.appName || 'Unknown Application'}
             </span>
-            <span className="text-xs px-2 py-0.5 bg-blue-50 rounded-full text-blue-600 font-medium border border-blue-100">
+            {isGlobalRecording && (
+              <span className="text-xs px-2 py-0.5 bg-blue-50 rounded-full text-blue-600 font-medium border border-blue-100">
+                System Audio
+              </span>
+            )}
+            <span className="text-xs px-2 py-0.5 bg-gray-50 rounded-full text-gray-600 font-medium border border-gray-100">
               {duration}
             </span>
           </div>

packages/frontend/media-capture-playground/web/types.ts

@@ -17,6 +17,8 @@ export interface RecordingStatus {
   bundleIdentifier: string;
   name: string;
   startTime: number;
+  duration: number;
+  isGlobal?: boolean;
 }
 
 export interface RecordingMetadata {
@@ -31,6 +33,7 @@ export interface RecordingMetadata {
   totalSamples: number;
   icon?: Uint8Array;
   mp3: string;
+  isGlobal?: boolean;
 }
 
 export interface TranscriptionMetadata {