Add desktop/server MP4 export pipeline, hardening, and render tests (v1.3.0)

Desktop MP4 export renders frames from a hidden BrowserWindow via
capturePage, pipes PNGs to a bundled ffmpeg (libx264/yuv420p/+faststart),
and writes the file through an atomic temp-file swap. It shares scene
validation (shared/renderValidation.cjs) and the render.html renderer with
the standalone Puppeteer server, which is hardened in parallel.

Render worker & main (electron/):
- abortable render loop with an inactivity watchdog and cancel plumbing
- atomic temp-file + rename so a cancel/failure never truncates a
  pre-existing target (#7); stdin EPIPE / early-exit / backpressure-hang
  handled (#8)
- HiDPI frames normalized to canvas size (#10); odd dimensions padded to
  even (#13, also server); backgroundThrottling disabled (#12)
- reject canvases larger than the display (#11); single-render guard;
  isolated render session that blocks network requests (#5)

Tests:
- Electron harnesses (scripts/verify-*.cjs) for capture, export, cancel,
  timeout, assets, background, capture-fidelity, resolution, odd-dims,
  aggregated by verify-desktop-render.cjs
- server smoke + e2e and shared validation unit tests
- headless hook (src/devtools/headless.ts) to run the in-app suite under
  browser/electron hosts; pixel-diff util + capture fixtures (test/)
- dev_docs plans: integration, fixes (#7-#13), and the e2e/capture strategy

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

server/server.js

@@ -6,6 +6,7 @@ import { randomBytes, randomUUID, timingSafeEqual } from 'node:crypto'
 import { spawn } from 'node:child_process'
 import { fileURLToPath } from 'node:url'
 import puppeteer from 'puppeteer-core'
+import renderValidation from '../shared/renderValidation.cjs'
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
@@ -36,6 +37,17 @@ const MAX_FRAMES = readIntEnv('RENDER_MAX_FRAMES', 3600, 1, 250000)
 const MAX_LAYERS = readIntEnv('RENDER_MAX_LAYERS', 500, 1, 100000)
 const MAX_KEYFRAMES = readIntEnv('RENDER_MAX_KEYFRAMES', 5000, 1, 1000000)
 const MAX_ASSETS = readIntEnv('RENDER_MAX_ASSETS', 500, 1, 100000)
+const RENDER_LIMITS = {
+  maxCanvasWidth: MAX_CANVAS_WIDTH,
+  maxCanvasHeight: MAX_CANVAS_HEIGHT,
+  maxFps: MAX_FPS,
+  maxDuration: MAX_DURATION,
+  maxFrames: MAX_FRAMES,
+  maxLayers: MAX_LAYERS,
+  maxKeyframes: MAX_KEYFRAMES,
+  maxAssets: MAX_ASSETS,
+}
+const { playbackRange, validateRenderRequest: validateSharedRenderRequest } = renderValidation
 
 const app = express()
 app.disable('x-powered-by')
@@ -214,25 +226,6 @@ function notify(job) {
   }
 }
 
-function effectiveEnd(scene) {
-  let max = 0
-  for (const layer of scene.layers) {
-    for (const kf of layer.keyframes) {
-      if (kf.time > max) max = kf.time
-    }
-  }
-  if (max <= 0) return scene.duration
-  return Math.min(max, scene.duration)
-}
-
-function playbackRange(scene) {
-  const autoEnd = effectiveEnd(scene)
-  const start = Math.max(0, Math.min(scene.duration, scene.inTime == null ? 0 : scene.inTime))
-  const rawEnd = scene.outTime == null ? autoEnd : scene.outTime
-  const end = Math.max(start, Math.min(scene.duration, rawEnd))
-  return { start, end }
-}
-
 async function runJob(job, scene, options) {
   const { start: rangeIn } = playbackRange(scene)
   const { fps, duration, totalFrames, crf, preset } = options
@@ -260,6 +253,9 @@ async function runJob(job, scene, options) {
     '-i', '-',
     '-c:v', 'libx264',
     '-pix_fmt', 'yuv420p',
+    // libx264 + yuv420p require even dimensions; pad an odd canvas up to the
+    // next even size so it encodes instead of crashing ffmpeg (finding #13).
+    '-vf', 'pad=ceil(iw/2)*2:ceil(ih/2)*2',
     '-preset', preset,
     '-crf', crf,
     '-movflags', '+faststart',
@@ -327,54 +323,7 @@ async function cleanupJob(jobId) {
 }
 
 function validateRenderRequest(scene, options) {
-  if (!scene || typeof scene !== 'object') return { ok: false, error: 'invalid scene' }
-  if (!scene.canvas || typeof scene.canvas !== 'object') return { ok: false, error: 'invalid canvas' }
-  const width = toBoundedInt(scene.canvas.width, 1, MAX_CANVAS_WIDTH)
-  const height = toBoundedInt(scene.canvas.height, 1, MAX_CANVAS_HEIGHT)
-  if (!width || !height) return { ok: false, error: `canvas must be between 1 and ${MAX_CANVAS_WIDTH}x${MAX_CANVAS_HEIGHT}` }
-  if (!Array.isArray(scene.layers)) return { ok: false, error: 'scene layers must be an array' }
-  if (scene.layers.length > MAX_LAYERS) return { ok: false, error: `scene has more than ${MAX_LAYERS} layers` }
-  if (Array.isArray(scene.assets) && scene.assets.length > MAX_ASSETS) return { ok: false, error: `scene has more than ${MAX_ASSETS} assets` }
-  let keyframes = 0
-  for (const layer of scene.layers) {
-    if (!Array.isArray(layer?.keyframes)) return { ok: false, error: 'every layer must have keyframes' }
-    keyframes += layer.keyframes.length
-    if (keyframes > MAX_KEYFRAMES) return { ok: false, error: `scene has more than ${MAX_KEYFRAMES} keyframes` }
-    for (const kf of layer.keyframes) {
-      if (!Number.isFinite(Number(kf?.time))) return { ok: false, error: 'keyframe times must be finite numbers' }
-    }
-  }
-  const duration = Number(scene.duration)
-  if (!Number.isFinite(duration) || duration <= 0 || duration > MAX_DURATION) {
-    return { ok: false, error: `duration must be between 0 and ${MAX_DURATION} seconds` }
-  }
-  const fps = toBoundedInt(options.fps || scene.fps || 60, 1, MAX_FPS)
-  if (!fps) return { ok: false, error: `fps must be between 1 and ${MAX_FPS}` }
-  const range = playbackRange({ ...scene, canvas: { ...scene.canvas, width, height }, duration })
-  const requestedDuration = Number(options.duration || Math.max(0, range.end - range.start))
-  if (!Number.isFinite(requestedDuration) || requestedDuration <= 0 || requestedDuration > MAX_DURATION) {
-    return { ok: false, error: `render duration must be between 0 and ${MAX_DURATION} seconds` }
-  }
-  const totalFrames = Math.max(1, Math.round(requestedDuration * fps))
-  if (totalFrames > MAX_FRAMES) return { ok: false, error: `render has more than ${MAX_FRAMES} frames` }
-  const crf = toBoundedInt(options.crf ?? 18, 0, 51)
-  if (crf == null) return { ok: false, error: 'crf must be between 0 and 51' }
-  const preset = String(options.preset ?? 'fast')
-  const allowedPresets = new Set(['ultrafast', 'superfast', 'veryfast', 'faster', 'fast', 'medium', 'slow', 'slower', 'veryslow'])
-  if (!allowedPresets.has(preset)) return { ok: false, error: 'invalid ffmpeg preset' }
-  return {
-    ok: true,
-    scene: { ...scene, canvas: { ...scene.canvas, width, height }, duration },
-    options: { fps, duration: requestedDuration, totalFrames, crf: String(crf), preset },
-  }
-}
-
-function toBoundedInt(value, min, max) {
-  const n = Number(value)
-  if (!Number.isFinite(n)) return null
-  const i = Math.round(n)
-  if (i < min || i > max) return null
-  return i
+  return validateSharedRenderRequest(scene, options, RENDER_LIMITS)
 }
 
 function chromeArgs() {