feat: add audio recording with security improvements

- Add stereo WAV recording functionality for conversations
- Implement recording settings page with auto-save configuration
- Add recording indicator component showing duration and status
- Display audio player on conversation pages for playback

Security & Performance Improvements:
- Add path traversal protection with filename sanitization
- Implement bounds checking for buffer writes (10MB max)
- Add disk space validation (100MB minimum required)
- Add file existence validation in backend
- Enhance error recovery with user-friendly messages
- Use synchronous file operations for stability

Database Changes:
- Add recording fields to conversation_sessions table
- Track recording path, duration, size, and status

UI Changes:
- Add recording toggle in conversation UI
- Show recording status in real-time
- Display audio player for recorded conversations
- Remove settings link from title bar as requested

Author: vijaythecoder

app/Http/Controllers/ConversationController.php

@@ -282,4 +282,44 @@ public function destroy(ConversationSession $session)
         return redirect()->route('conversations.index')
             ->with('message', 'Conversation deleted successfully');
     }
+    
+    /**
+     * Update recording information for a conversation session.
+     */
+    public function updateRecording(ConversationSession $session, Request $request)
+    {
+        // No auth check needed for single-user desktop app
+        
+        $validated = $request->validate([
+            'has_recording' => 'required|boolean',
+            'recording_path' => 'required|string',
+            'recording_duration' => 'required|integer|min:0',
+            'recording_size' => 'required|integer|min:0',
+        ]);
+        
+        // Validate that the recording file actually exists
+        if ($validated['has_recording'] && $validated['recording_path']) {
+            if (!file_exists($validated['recording_path'])) {
+                return response()->json([
+                    'message' => 'Recording file not found at specified path',
+                ], 422);
+            }
+            
+            // Verify file size matches
+            $actualSize = filesize($validated['recording_path']);
+            if ($actualSize !== $validated['recording_size']) {
+                \Log::warning('Recording file size mismatch', [
+                    'session_id' => $session->id,
+                    'expected_size' => $validated['recording_size'],
+                    'actual_size' => $actualSize,
+                ]);
+            }
+        }
+        
+        $session->update($validated);
+        
+        return response()->json([
+            'message' => 'Recording information updated successfully',
+        ]);
+    }
 }

app/Models/ConversationSession.php

@@ -31,6 +31,10 @@ class ConversationSession extends Model
         'total_action_items',
         'ai_summary',
         'user_notes',
+        'has_recording',
+        'recording_path',
+        'recording_duration',
+        'recording_size',
     ];
 
     protected $casts = [
@@ -42,6 +46,9 @@ class ConversationSession extends Model
         'total_topics' => 'integer',
         'total_commitments' => 'integer',
         'total_action_items' => 'integer',
+        'has_recording' => 'boolean',
+        'recording_duration' => 'integer',
+        'recording_size' => 'integer',
     ];
 
     public function user(): BelongsTo

database/migrations/2025_08_05_214155_add_recording_fields_to_conversation_sessions_table.php

@@ -0,0 +1,31 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('conversation_sessions', function (Blueprint $table) {
+            $table->boolean('has_recording')->default(false)->after('ended_at');
+            $table->string('recording_path')->nullable()->after('has_recording');
+            $table->integer('recording_duration')->nullable()->comment('Duration in seconds')->after('recording_path');
+            $table->bigInteger('recording_size')->nullable()->comment('Size in bytes')->after('recording_duration');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('conversation_sessions', function (Blueprint $table) {
+            $table->dropColumn(['has_recording', 'recording_path', 'recording_duration', 'recording_size']);
+        });
+    }
+};

package-lock.json

@@ -115,6 +115,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import { router } from '@inertiajs/vue3';
 import { useRealtimeAgentStore } from '@/stores/realtimeAgent';
 import { useSettingsStore } from '@/stores/settings';
 import ConnectionStatus from './ConnectionStatus.vue';
@@ -179,6 +180,11 @@ const handleDashboardClick = () => {
     settingsStore.closeAllDropdowns();
 };
 
+const handleSettingsClick = () => {
+    router.visit('/settings/recording');
+    settingsStore.closeAllDropdowns();
+};
+
 
 const getIconEmoji = (icon?: string) => {
     if (!icon) return '📋';

resources/js/components/RealtimeAgent/Navigation/MobileMenu.vue

@@ -41,6 +41,9 @@
 
             <!-- Connection Status -->
             <ConnectionStatus />
+            
+            <!-- Recording Indicator Slot -->
+            <slot name="recording-indicator" />
 
             <!-- Divider -->
             <div class="h-4 w-px bg-gray-300 dark:bg-gray-600"></div>
@@ -134,6 +137,7 @@
 
 <script setup lang="ts">
 import { computed, ref, onMounted } from 'vue';
+import { router } from '@inertiajs/vue3';
 import { useRealtimeAgentStore } from '@/stores/realtimeAgent';
 import { useSettingsStore } from '@/stores/settings';
 import CoachSelector from './CoachSelector.vue';
@@ -223,6 +227,10 @@ const handleDashboardClick = () => {
     emit('dashboardClick');
 };
 
+const handleSettingsClick = () => {
+    router.visit('/settings/recording');
+};
+
 const toggleSession = () => {
     emit('toggleSession');
 };

resources/js/components/RealtimeAgent/Navigation/TitleBar.vue

@@ -1,6 +1,6 @@
 <template>
     <Dialog v-model:open="isOpen" @update:open="handleOpenChange">
-        <DialogContent class="max-w-md p-0" :closeable="false">
+        <DialogContent class="max-w-md p-0">
             <!-- Logo and App Name Header -->
             <div class="p-6 pb-0 text-center">
                 <div class="mb-4 flex items-center justify-center">

resources/js/components/RealtimeAgent/OnboardingModal.vue

@@ -0,0 +1,147 @@
+<template>
+    <div v-if="isRecording" class="flex items-center gap-2">
+        <!-- Recording dot animation -->
+        <div class="relative">
+            <div class="h-2 w-2 rounded-full bg-red-500 animate-pulse"></div>
+            <div class="absolute inset-0 h-2 w-2 rounded-full bg-red-500 animate-ping"></div>
+        </div>
+        
+        <!-- Recording timer -->
+        <span class="text-xs font-medium text-gray-700 dark:text-gray-300">
+            REC {{ formattedDuration }}
+        </span>
+        
+        <!-- File size (optional) -->
+        <span v-if="showFileSize && fileSize > 0" class="text-xs text-gray-600 dark:text-gray-400">
+            ({{ formatFileSize(fileSize) }})
+        </span>
+        
+        <!-- Pause/Resume button -->
+        <button
+            v-if="showControls"
+            @click="togglePause"
+            class="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+            :title="isPaused ? 'Resume recording' : 'Pause recording'"
+        >
+            <svg v-if="!isPaused" class="h-3 w-3 text-gray-600 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            <svg v-else class="h-3 w-3 text-gray-600 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+        </button>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+
+interface Props {
+    isRecording: boolean;
+    isPaused?: boolean;
+    duration?: number; // in milliseconds
+    fileSize?: number; // in bytes
+    showFileSize?: boolean;
+    showControls?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    isPaused: false,
+    duration: 0,
+    fileSize: 0,
+    showFileSize: false,
+    showControls: false
+});
+
+const emit = defineEmits<{
+    'toggle-pause': [];
+}>();
+
+// Local duration tracking for smooth updates
+const localDuration = ref(props.duration);
+let intervalId: NodeJS.Timeout | null = null;
+
+// Format duration as MM:SS
+const formattedDuration = computed(() => {
+    const totalSeconds = Math.floor(localDuration.value / 1000);
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+});
+
+// Start/stop duration counter
+const startDurationCounter = () => {
+    if (intervalId) {
+        clearInterval(intervalId);
+    }
+    
+    intervalId = setInterval(() => {
+        if (props.isRecording && !props.isPaused) {
+            localDuration.value += 1000;
+        }
+    }, 1000);
+};
+
+const stopDurationCounter = () => {
+    if (intervalId) {
+        clearInterval(intervalId);
+        intervalId = null;
+    }
+};
+
+// Format file size
+const formatFileSize = (bytes: number): string => {
+    if (bytes === 0) return '0 B';
+    
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+};
+
+// Toggle pause
+const togglePause = () => {
+    emit('toggle-pause');
+};
+
+// Watch for recording state changes
+onMounted(() => {
+    if (props.isRecording) {
+        startDurationCounter();
+    }
+});
+
+onUnmounted(() => {
+    stopDurationCounter();
+});
+
+// Update local duration when prop changes
+watch(() => props.duration, (newDuration) => {
+    localDuration.value = newDuration;
+});
+
+// Start/stop counter when recording state changes
+watch(() => props.isRecording, (isRecording) => {
+    if (isRecording) {
+        startDurationCounter();
+    } else {
+        stopDurationCounter();
+        localDuration.value = 0;
+    }
+});
+</script>
+
+<style scoped>
+@keyframes ping {
+    75%, 100% {
+        transform: scale(2);
+        opacity: 0;
+    }
+}
+
+.animate-ping {
+    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
+}
+</style>

resources/js/components/RecordingIndicator.vue

@@ -0,0 +1,30 @@
+<template>
+    <button
+        type="button"
+        role="switch"
+        :aria-checked="modelValue"
+        @click="toggle"
+        v-bind="$attrs"
+    >
+        <slot />
+    </button>
+</template>
+
+<script setup lang="ts">
+import { defineEmits, defineProps } from 'vue';
+
+// Props
+const props = defineProps<{
+    modelValue: boolean;
+}>();
+
+// Emits
+const emit = defineEmits<{
+    'update:modelValue': [value: boolean];
+}>();
+
+// Methods
+const toggle = () => {
+    emit('update:modelValue', !props.modelValue);
+};
+</script>

resources/js/components/ui/switch/Switch.vue

@@ -0,0 +1 @@
+export { default as Switch } from './Switch.vue';