fix: file loading API and WebSocket connection issues (#571)

* Initial plan

* Fix file API and WebSocket URL issues

- Fix POST /api/file to read from request body (path parameter)
- Add backward compatibility for existing file API usage
- Fix WebSocket URL construction to use ws:/wss: protocol
- Add JSON body parser to file endpoint
- Maintain streaming for legacy requests while adding JSON response for frontend

Co-authored-by: kobenguyent <[email protected]>

* Clean up temporary test files

Co-authored-by: kobenguyent <[email protected]>

---------

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: kobenguyent <[email protected]>

Author: Copilot

lib/api/get-file.js

@@ -5,17 +5,23 @@ const path = require('path');
 const MAX_FILE_SIZE = 10 * 1024 * 1024;
 
 module.exports = async (req, res) => {
-  if (!req.file) {
+  // Support both old format (req.file) and new format (req.body.path)
+  const filePath = (req.body && req.body.path) || req.file;
+  
+  if (!filePath) {
     return res.status(400).json({ error: 'File parameter is required' });
   }
 
-  if (!req.file.startsWith(global.codecept_dir)) {
+  // Resolve the absolute path
+  const absolutePath = path.resolve(global.codecept_dir, filePath);
+  
+  if (!absolutePath.startsWith(global.codecept_dir)) {
     return res.status(403).json({ error: 'Access denied. File must be within codecept directory' });
   }
 
   try {
     // Check if file exists and get stats
-    const stats = await fs.promises.stat(req.file);
+    const stats = await fs.promises.stat(absolutePath);
 
     // Check file size to prevent memory issues
     if (stats.size > MAX_FILE_SIZE) {
@@ -25,26 +31,38 @@ module.exports = async (req, res) => {
       });
     }
 
-    // Use streaming for better memory management
-    const readStream = fs.createReadStream(req.file);
-    
-    // Set appropriate headers
-    res.setHeader('Content-Type', 'text/plain; charset=utf-8');
-    res.setHeader('Content-Length', stats.size);
-    
-    // Handle stream errors
-    readStream.on('error', (error) => {
-      console.error('Error reading file:', error);
-      if (!res.headersSent) {
-        res.status(500).json({ 
-          error: 'Failed to read file',
-          message: error.message
-        });
-      }
-    });
-    
-    // Pipe the file directly to response to avoid loading into memory
-    readStream.pipe(res);
+    // For API requests that expect JSON response with source content
+    if (req.body && req.body.path) {
+      // Read file content and return as JSON (for frontend)
+      const content = await fs.promises.readFile(absolutePath, 'utf8');
+      
+      res.json({
+        success: true,
+        source: content,
+        file: filePath
+      });
+    } else {
+      // For legacy requests, stream the file directly (for backward compatibility)
+      const readStream = fs.createReadStream(absolutePath);
+      
+      // Set appropriate headers
+      res.setHeader('Content-Type', 'text/plain; charset=utf-8');
+      res.setHeader('Content-Length', stats.size);
+      
+      // Handle stream errors
+      readStream.on('error', (error) => {
+        console.error('Error reading file:', error);
+        if (!res.headersSent) {
+          res.status(500).json({ 
+            error: 'Failed to read file',
+            message: error.message
+          });
+        }
+      });
+      
+      // Pipe the file directly to response
+      readStream.pipe(res);
+    }
 
   } catch (error) {
     console.error('Error accessing file:', error);

lib/api/index.js

@@ -32,7 +32,7 @@ router.get('/steps', getSteps);
 router.get('/page-objects', getPageObjects);
 router.get('/snapshots/html/:id', getSnapshotHtml);
 router.get('/snapshots/screenshot/:id', getSnapshotImage);
-router.post('/file', getFile);
+router.post('/file', jsonParser, getFile);
 
 router.get('/scenario-status', getScenarioStatus);
 

src/main.js

@@ -35,7 +35,7 @@ const store = require('./store').default;
     try {
       const response = await axios.get('/api/ports');
       const data = await response.data;
-      wsConnection = `${window.location.protocol}//${window.location.hostname}:${data.wsPort}`;
+      wsConnection = `${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.hostname}:${data.wsPort}`;
     } catch (err) {
       // Fallback to same origin if port fetch fails
       wsConnection = baseUrl.replace('http', 'ws');