fix: run hyperframes from inside compDir with relative paths (cwd=compDir, ./index.html, -o ./render.mp4)

lib/renderer.js

@@ -7,12 +7,11 @@ export async function renderVideo(compDir, outputFile, config, onProgress) {
   const [w, h] = format === '9:16' ? [1080, 1920] : format === '1:1' ? [1080, 1080] : [1920, 1080];
   onProgress?.(0);
 
-  // Write meta.json — HyperFrames reads width/height/fps/duration from here
+  // meta.json tells HyperFrames the canvas size and duration
   fs.writeFileSync(path.join(compDir, 'meta.json'), JSON.stringify(
     { duration, width: w, height: h, fps: 30 }, null, 2
   ));
 
-  // Detect Chrome
   const chromePath = [
     process.env.PUPPETEER_EXECUTABLE_PATH,
     process.env.CHROME_PATH,
@@ -21,26 +20,25 @@ export async function renderVideo(compDir, outputFile, config, onProgress) {
     '/usr/bin/google-chrome',
   ].find(p => p && fs.existsSync(p));
 
-  console.log(`[renderer] Chrome: ${chromePath || 'auto'} | ${w}x${h} | ${duration}s`);
+  console.log(`[renderer] Chrome: ${chromePath} | ${w}x${h} | ${duration}s | cwd: ${compDir}`);
 
-  // Correct CLI: npx hyperframes render ./index.html -o output.mp4
-  const args = ['hyperframes', 'render',
-    path.join(compDir, 'index.html'),
-    '-o', outputFile,
-  ];
-
-  const env = {
-    ...process.env,
-    PUPPETEER_EXECUTABLE_PATH: chromePath || '/usr/bin/chromium',
-    CHROME_PATH: chromePath || '/usr/bin/chromium',
-  };
+  // Run from INSIDE compDir using relative paths
+  // CLI: npx hyperframes render ./index.html -o ./output.mp4
+  const localOutput = './render_out.mp4';
 
   return new Promise((resolve, reject) => {
-    const proc = execFile('npx', args, {
-      cwd: compDir,
-      maxBuffer: 500 * 1024 * 1024,
-      env,
-    });
+    const proc = execFile(
+      'npx', ['hyperframes', 'render', './index.html', '-o', localOutput],
+      {
+        cwd: compDir,           // <-- run from inside the project directory
+        maxBuffer: 500 * 1024 * 1024,
+        env: {
+          ...process.env,
+          PUPPETEER_EXECUTABLE_PATH: chromePath || '/usr/bin/chromium',
+          CHROME_PATH: chromePath || '/usr/bin/chromium',
+        },
+      }
+    );
 
     let stderr = '';
     proc.stdout?.on('data', (d) => {
@@ -49,13 +47,21 @@ export async function renderVideo(compDir, outputFile, config, onProgress) {
       const m = line.match(/frame\s+(\d+)\/(\d+)/i);
       if (m) onProgress?.(parseInt(m[1]) / parseInt(m[2]));
     });
-    proc.stderr?.on('data', (d) => {
-      stderr += d.toString();
-      process.stderr.write(d);
-    });
-    proc.on('close', (code) => {
-      if (code === 0) { onProgress?.(1); resolve(outputFile); }
-      else reject(new Error(`HyperFrames render failed:\n${stderr.slice(-800)}`));
+    proc.stderr?.on('data', (d) => { stderr += d; process.stderr.write(d); });
+    proc.on('close', async (code) => {
+      if (code !== 0) {
+        reject(new Error(`HyperFrames render failed:\n${stderr.slice(-800)}`));
+        return;
+      }
+      // Move output to final destination
+      const rendered = path.join(compDir, 'render_out.mp4');
+      if (fs.existsSync(rendered)) {
+        fs.renameSync(rendered, outputFile);
+        onProgress?.(1);
+        resolve(outputFile);
+      } else {
+        reject(new Error('Render completed but output file not found'));
+      }
     });
   });
 }