fix(timeline): Add horizontal margins to timeline and fix session recorder crash

- StudioLayout: Added px-6 padding to timeline container to prevent handles from touching screen edges
- useSessionRecorder: Fixed ReferenceError/hoisting issue with applyFrameAt
- useSessionRecorder: Restored missing refs and logic lost in previous edits

Author: AmirMohammad Cheraghali

src/components/StudioLayout.tsx

@@ -931,7 +931,7 @@ export const StudioLayout: React.FC<StudioLayoutProps> = ({ recorder, onExit, ex
 
             {/* BOTTOM TIMELINE */}
             <div className={`h-48 bg-neutral-900/95 backdrop-blur border-t border-white/10 flex flex-col pointer-events-auto relative transition-all duration-300 ${isTrimMode ? 'ring-1 ring-blue-500/50' : ''}`}>
-                <div className="flex-1 relative mt-2">
+                <div className="flex-1 relative mt-2 px-6">
                     <VideoTimeline
                         session={session}
                         segments={segments}

src/components/VideoTimeline.tsx

@@ -33,7 +33,6 @@ export const VideoTimeline = ({
     onSegmentSelect,
     playbackTime,
     onSeek,
-    trimMode,
     trimStart: externalTrimStart,
     trimEnd: externalTrimEnd,
     onTrimChange,
@@ -311,7 +310,7 @@ export const VideoTimeline = ({
             {/* Timeline Track Container */}
             <div
                 ref={containerRef}
-                className="relative h-auto min-h-[6rem] bg-black/40 rounded-lg border border-white/10 overflow-x-auto overflow-y-hidden cursor-pointer select-none py-2 px-4 space-y-2"
+                className="relative h-auto min-h-[6rem] bg-black/40 rounded-lg border border-white/10 overflow-x-auto overflow-y-hidden cursor-pointer select-none py-2 space-y-2"
                 onMouseDown={handleTimelineMouseDown}
                 onMouseMove={handleMouseMove}
                 onMouseUp={handleMouseUp}

src/hooks/useSessionRecorder.ts

@@ -15,6 +15,20 @@ export const useSessionRecorder = ({ onPlaybackStateChange, onPlaybackCameraChan
     const [playbackSpeed, setPlaybackSpeed] = useState(1);
     const [masterVolume, setMasterVolume] = useState(1.0);
 
+    // --- State & Refs (Restored) ---
+    const eventsRef = useRef<RecordedEvent[]>([]);
+    const initialStateRef = useRef<any>(null);
+    const startTimeRef = useRef<number>(0);
+    const animationFrameRef = useRef<number | null>(null);
+
+    // Playback Optimization Refs
+    const playbackCursorRef = useRef<number>(0);
+    const accumulatedStateRef = useRef<any>(null);
+    const lastAppliedTimeRef = useRef<number>(-1);
+    const lastPlaybackUpdateRef = useRef<number>(0);
+
+    // Timeline Segments
+    const [segments, setSegments] = useState<TimelineSegment[]>([]);
     // Audio Playback
     // We need a pool of players or a single smart player?
     // For MVP: Single Music Track => Single Audio Element.
@@ -156,45 +170,17 @@ export const useSessionRecorder = ({ onPlaybackStateChange, onPlaybackCameraChan
         });
     }, [isRecording]);
 
-    // --- Playback ---
-
-    const play = useCallback(() => {
-        if (!session) return;
-        setIsPlaying(true);
-        lastPlaybackUpdateRef.current = Date.now();
-
-        // Sync Audio
-        syncAudio(playbackTime, true);
-    }, [session, playbackTime, syncAudio]);
-
-    const pause = useCallback(() => {
-        setIsPlaying(false);
-        // Sync Audio
-        if (audioRef.current) {
-            audioRef.current.pause();
-        }
-    }, []);
-
-    const seek = useCallback((time: number) => {
-        if (!session) return;
-        setPlaybackTime(time);
-        applyFrameAt(time);
-        syncAudio(time, isPlaying);
-    }, [session, isPlaying, applyFrameAt, syncAudio]);
+    // --- Playback Helper ---
 
     const applyFrameAt = useCallback((globalTime: number) => {
         if (!session || !onPlaybackStateChange || !onPlaybackCameraChange) return;
 
         // Find which segment covers this global time
-        // Note: 'segments' state from upper scope
-        // We need to use state setter callback or refs if state is stale, 
-        // but here we depend on 'segments' in hook dependency array.
         const activeSegment = segments.find(
             s => globalTime >= s.startTime && globalTime < s.startTime + s.duration
         );
 
         if (!activeSegment) {
-            // Gap in timeline? Or end of playback?
             return;
         }
 
@@ -203,7 +189,6 @@ export const useSessionRecorder = ({ onPlaybackStateChange, onPlaybackCameraChan
         const sourceTime = activeSegment.sourceStartTime + timeInSegment;
 
         // Rebuild state from scratch for now to ensure correctness across jumps
-        // Performance TODO: Optimization cursor needs to be segment-aware
         let currentState = JSON.parse(JSON.stringify(session.initialState));
         let currentCamera = null;
 
@@ -228,6 +213,32 @@ export const useSessionRecorder = ({ onPlaybackStateChange, onPlaybackCameraChan
         lastAppliedTimeRef.current = globalTime;
     }, [session, segments, onPlaybackStateChange, onPlaybackCameraChange]);
 
+    // --- Playback Controls ---
+
+    const play = useCallback(() => {
+        if (!session) return;
+        setIsPlaying(true);
+        lastPlaybackUpdateRef.current = Date.now();
+
+        // Sync Audio
+        syncAudio(playbackTime, true);
+    }, [session, playbackTime, syncAudio]);
+
+    const pause = useCallback(() => {
+        setIsPlaying(false);
+        // Sync Audio
+        if (audioRef.current) {
+            audioRef.current.pause();
+        }
+    }, []);
+
+    const seek = useCallback((time: number) => {
+        if (!session) return;
+        setPlaybackTime(time);
+        applyFrameAt(time);
+        syncAudio(time, isPlaying);
+    }, [session, isPlaying, applyFrameAt, syncAudio]);
+
 
     // Playback Loop
     useEffect(() => {
@@ -640,6 +651,7 @@ export const useSessionRecorder = ({ onPlaybackStateChange, onPlaybackCameraChan
         setSegments,
 
         // Selection
+        selectedSegmentIds, // Fix: Expose selection state
         toggleSegmentSelection,
         deleteSelectedSegments,
         updateSegment,