chore: Add debug border and logs to investigate Studio Mode visibility

Author: AmirMohammad Cheraghali

src/App.tsx

@@ -294,9 +294,15 @@ function App() {
 
   // --- Session Recorder ---
   // --- Session Recorder ---
+  /* eslint-disable react-hooks/exhaustive-deps */
   const handlePlaybackStateChange = useCallback((state: any) => {
     // The recorded state is "multiViewState" { viewMode, viewports: [] }
-    if (!state || !state.viewports || !state.viewports[0]) return;
+    if (!state || !state.viewports || !state.viewports[0]) {
+      console.warn("Playback: Invalid state or missing viewports", state);
+      return;
+    }
+
+    console.log("Playback: Applying State", state.viewports[0].pdbId);
 
     const vpState = state.viewports[0];
     const ctrl = controllers[0];
@@ -337,6 +343,7 @@ function App() {
   }, [controllers, viewMode]);
 
   const handlePlaybackCameraChange = useCallback((orientation: any) => {
+    // console.log("Playback: Camera Update", orientation);
     if (viewerRefs[0].current) viewerRefs[0].current.setOrientation(orientation);
   }, []);
 

src/components/StudioLayout.tsx

@@ -140,7 +140,7 @@ export const StudioLayout: React.FC<StudioLayoutProps> = ({ recorder, onExit, ex
                 </div>
 
                 {/* VISUAL AREA (The hole) */}
-                <div className="flex-1 relative">
+                <div className="flex-1 relative border-4 border-red-500 bg-transparent">
                     {/* Floating Transport Controls */}
                     <div className="absolute bottom-6 left-1/2 -translate-x-1/2 bg-neutral-900/80 backdrop-blur-md rounded-full px-4 py-2 flex items-center gap-4 text-white pointer-events-auto border border-white/10 shadow-2xl z-50">
                         <span className="text-xs font-mono ml-2">{formatTime(playbackTime)}</span>