feat: complete Phase 8.2 - integrate recording into multi-track UI

Completed the integration of recording functionality into the AudioEditor:

Recording Controls:
- Added global record button to PlaybackControls component
- Implemented track arming system (arm track before recording)
- Added visual feedback with pulsing red animations during recording
- Connected recording state from useRecording hook to UI

AudioEditor Integration:
- Added handleToggleRecordEnable for per-track record arming
- Added handleStartRecording with permission checks and toast notifications
- Added handleStopRecording to save recorded audio to track buffer
- Connected recording input level monitoring to track meters

TrackList Integration:
- Pass recording props (onToggleRecordEnable, recordingTrackId, recordingLevel)
- Individual tracks show input level meters when armed or recording
- Visual indicators for armed and actively recording tracks

This completes Phase 8 (Recording) implementation with:
✅ MediaRecorder API integration
✅ Input level monitoring with RMS calculation
✅ Per-track record arming
✅ Global record button
✅ Real-time visual feedback
✅ Permission handling
✅ Error handling with user notifications

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

components/editor/AudioEditor.tsx

@@ -15,6 +15,7 @@ import { TrackList } from '@/components/tracks/TrackList';
 import { ImportTrackDialog } from '@/components/tracks/ImportTrackDialog';
 import { formatDuration } from '@/lib/audio/decoder';
 import { useHistory } from '@/lib/hooks/useHistory';
+import { useRecording } from '@/lib/hooks/useRecording';
 import {
   createMultiTrackCutCommand,
   createMultiTrackCopyCommand,
@@ -30,6 +31,7 @@ export function AudioEditor() {
   const [zoom, setZoom] = React.useState(1);
   const [masterVolume, setMasterVolume] = React.useState(0.8);
   const [clipboard, setClipboard] = React.useState<AudioBuffer | null>(null);
+  const [recordingTrackId, setRecordingTrackId] = React.useState<string | null>(null);
 
   const { addToast } = useToast();
 
@@ -38,6 +40,14 @@ export function AudioEditor() {
   const canUndo = historyState.canUndo;
   const canRedo = historyState.canRedo;
 
+  // Recording hook
+  const {
+    state: recordingState,
+    startRecording,
+    stopRecording,
+    requestPermission,
+  } = useRecording();
+
   // Multi-track hooks
   const {
     tracks,
@@ -155,6 +165,91 @@ export function AudioEditor() {
     updateTrack(trackId, { selection });
   };
 
+  // Recording handlers
+  const handleToggleRecordEnable = React.useCallback((trackId: string) => {
+    const track = tracks.find((t) => t.id === trackId);
+    if (!track) return;
+
+    // Toggle record enable
+    updateTrack(trackId, { recordEnabled: !track.recordEnabled });
+  }, [tracks, updateTrack]);
+
+  const handleStartRecording = React.useCallback(async () => {
+    // Find first armed track
+    const armedTrack = tracks.find((t) => t.recordEnabled);
+    if (!armedTrack) {
+      addToast({
+        title: 'No Track Armed',
+        description: 'Please arm a track for recording first',
+        variant: 'warning',
+        duration: 3000,
+      });
+      return;
+    }
+
+    // Request permission if needed
+    const hasPermission = await requestPermission();
+    if (!hasPermission) {
+      addToast({
+        title: 'Microphone Access Denied',
+        description: 'Please allow microphone access to record',
+        variant: 'error',
+        duration: 3000,
+      });
+      return;
+    }
+
+    try {
+      await startRecording();
+      setRecordingTrackId(armedTrack.id);
+      addToast({
+        title: 'Recording Started',
+        description: `Recording to ${armedTrack.name}`,
+        variant: 'success',
+        duration: 2000,
+      });
+    } catch (error) {
+      console.error('Failed to start recording:', error);
+      addToast({
+        title: 'Recording Failed',
+        description: 'Failed to start recording',
+        variant: 'error',
+        duration: 3000,
+      });
+    }
+  }, [tracks, startRecording, requestPermission, addToast]);
+
+  const handleStopRecording = React.useCallback(async () => {
+    if (!recordingTrackId) return;
+
+    try {
+      const audioBuffer = await stopRecording();
+
+      if (audioBuffer) {
+        // Update the track with recorded audio
+        updateTrack(recordingTrackId, { audioBuffer });
+
+        addToast({
+          title: 'Recording Complete',
+          description: `Recorded ${audioBuffer.duration.toFixed(2)}s of audio`,
+          variant: 'success',
+          duration: 3000,
+        });
+      }
+
+      setRecordingTrackId(null);
+    } catch (error) {
+      console.error('Failed to stop recording:', error);
+      addToast({
+        title: 'Recording Error',
+        description: 'Failed to save recording',
+        variant: 'error',
+        duration: 3000,
+      });
+      setRecordingTrackId(null);
+    }
+  }, [recordingTrackId, stopRecording, updateTrack, addToast]);
+
   // Edit handlers
   const handleCut = React.useCallback(() => {
     const track = tracks.find((t) => t.selection);
@@ -540,6 +635,9 @@ export function AudioEditor() {
               onUpdateTrack={updateTrack}
               onSeek={seek}
               onSelectionChange={handleSelectionChange}
+              onToggleRecordEnable={handleToggleRecordEnable}
+              recordingTrackId={recordingTrackId}
+              recordingLevel={recordingState.inputLevel}
             />
           </div>
 
@@ -561,6 +659,9 @@ export function AudioEditor() {
           onVolumeChange={setMasterVolume}
           currentTimeFormatted={formatDuration(currentTime)}
           durationFormatted={formatDuration(duration)}
+          isRecording={recordingState.isRecording}
+          onStartRecording={handleStartRecording}
+          onStopRecording={handleStopRecording}
         />
       </div>