Files
roboco/video-renderer/render.js
aa15dc40cc Feature/video artifact verification (#537)
* fix(release): CI wait polls the prod rung; escape the header tooltip apostrophe

get_latest_ci_conclusion defaults to the ladder's head rung, so
wait_for_ci searched slave for a release commit that lives on master
and timed out after 40 minutes with the run already green. The wait
now passes the prod branch explicitly. Also fixes the
react/no-unescaped-entities error that turned master's Panel CI red.

* fix(panel,video): dead dialog triggers behind tooltips; dotted composition ids render

HelpTip nested inside a Dialog/AlertDialog trigger puts the trigger's
click handler on the Tooltip root, which renders no DOM — the agents
Spawn item and the KB Reindex-All / Delete-index confirms were dead.
Tooltips now wrap the triggers. The video renderer accepts interior
single dots in composition ids (release-0.25.0) with '..' still
unrepresentable, and propose_video refuses an unrenderable id at
authoring time.

* fix(dispatch): restart-safe PM review turns

A leaf task in awaiting_pm_review had no periodic pickup: the closure
dispatcher bailed on childless tasks and skipped PR-bearing review
tasks as already-promoted, assuming the submit-time PM session was
still alive — an assumption every restart breaks. Proven live on the
docs-sync leaf after the 0.25.0 redeploy, which also dependency-blocked
its sibling dev task. Childless awaiting_pm_review tasks now flow to
the PM's review turn, and the merge turn respawns its PM when none is
active.

* feat(video): verify the rendered artifact, not the source

The 14s release-0.25.0 cut shipped with only one of four scenes visibly
registering: the dev authored DOM, the smoke asserted DOM, QA read code —
nobody consumed the rendered MP4 before the CEO did. Close that loop, and
the reject loop behind it:

- sidecar frames mode: POST /render with frames=1..32 renders the cut,
  ffprobes the REAL duration, extracts midpoint-sampled keyframe PNGs
  (timestamps in filenames), streams a tar.gz back with X-Video-Duration
- request_render do-verb (developer/QA, request_sandbox's shape): renders
  the caller's ACTUAL composition — dev's own worktree (head_sha/dirty
  provenance), QA a read-only git-archive export of the assembled branch —
  extracts frames to the container-shared .previews/ path, stamps the
  render_preview marker, returns the paths as envelope evidence
- gate: i_am_done on a source=video task refuses without a stamped
  render_preview (Requirement.RENDER_VERIFIED; canonical source string
  moved to foundation as markers.VIDEO_TASK_SOURCE; mirrored in the
  possibilities-matrix fast path so it cannot bypass the check)
- QA claim_review evidence carries video_context (composition id, the
  dev's preview, a re-render instruction) so review checks output
- dev spawn prompt block + a 4th authoring AC order Read-every-frame
  verification before submitting
- reject -> re-author: a CEO reject with a reason opens a fresh authoring
  task carrying the verbatim feedback + a revise-in-place pointer at the
  existing composition (best-effort, never fails the reject) — rejection
  feedback no longer dies on the cancelled draft

E2E: rendered the committed release-0.25.0 composition through the new
frames mode locally — the returned keyframes show exactly the reported
failure (blank frame at 5.8s, only 'Env ladder' by 12.8s), the check the
fleet was missing.

---------

Co-authored-by: Renn F <rennf93@users.noreply.github.com>
2026-07-16 19:49:26 +02:00

335 lines
12 KiB
JavaScript

// untar -> write per-render props.js -> HyperFrames createRenderJob +
// executeRenderJob. HyperFrames has no webpack bundling step (it loads the
// HTML directly in headless Chrome and captures frames via the beginFrame
// API), so the bundle-cache machinery the old path carried is gone
// — every /render call extracts its own temp dir, renders, and cleans up.
//
// The per-request render OUTPUT (the rendered mp4) is never cached — every
// render call produces its own temp file the caller cleans up once it has
// streamed the response.
import { createRenderJob, executeRenderJob } from "@hyperframes/producer";
import { execFile } from "node:child_process";
import { existsSync } from "node:fs";
import { cp, mkdtemp, readdir, readFile, rm, writeFile } from "node:fs/promises";
import { tmpdir } from "node:os";
import path from "node:path";
import { Readable } from "node:stream";
import { promisify } from "node:util";
import * as tar from "tar";
const execFileP = promisify(execFile);
// @hyperframes/producer reads each cut's dimensions from the composition HTML
// itself (data-width/data-height on the stage), so the sidecar no longer
// passes width/height — it only picks the quality tier.
const QUALITY = "high";
const DEFAULT_FPS = 30;
const MIN_FPS = 24;
const MAX_FPS = 60;
/**
* Read the composition-declared frame rate off its HTML text (the
* `data-fps` attribute motion/README.md instructs authors to set — it
* appears on both `<html>` and `#stage` in every composition seen so far;
* a plain regex over the whole file catches either). Falls back to
* DEFAULT_FPS when absent, unparsable, or outside the sane broadcast bound —
* never lets a bad attribute wedge the job at an undefined rate.
*/
export function parseFps(html) {
const match = /data-fps=["'](\d+)["']/.exec(html);
if (!match) return DEFAULT_FPS;
const fps = Number(match[1]);
if (!Number.isFinite(fps) || fps < MIN_FPS || fps > MAX_FPS) return DEFAULT_FPS;
return fps;
}
// Caps the DECOMPRESSED size (a gzip bomb inflates a tiny upload into a huge
// tar stream); MAX_UPLOAD_BYTES in server.js only bounds the compressed
// bytes on the wire.
const MAX_EXTRACTED_BYTES = Number(
process.env.MAX_EXTRACTED_BYTES ?? 512 * 1024 * 1024,
);
/** Thrown when the tar stream's cumulative entry size crosses
* MAX_EXTRACTED_BYTES — server.js maps this to a 413. */
export class ExtractedSizeExceededError extends Error {
constructor(maxBytes) {
super(`extracted archive exceeds ${maxBytes} byte cap`);
this.name = "ExtractedSizeExceededError";
this.statusCode = 413;
}
}
async function extractTar(tarBuffer, destDir) {
await new Promise((resolve, reject) => {
let extractedBytes = 0;
// ponytail: header-declared entry.size, summed per entry via onentry —
// not a byte-exact streaming cap, but tar headers carry the true
// (post-gunzip) size, so this catches a bomb before most of it lands.
const extractor = tar.extract({
cwd: destDir,
onentry: (entry) => {
extractedBytes += entry.size;
if (extractedBytes > MAX_EXTRACTED_BYTES) {
extractor.destroy(new ExtractedSizeExceededError(MAX_EXTRACTED_BYTES));
}
},
});
extractor.on("finish", resolve);
extractor.on("error", reject);
Readable.from(tarBuffer).pipe(extractor);
});
}
// Deliberately under the orchestrator's 600s client-side HTTP timeout, so
// this fires first and the caller gets a clean error instead of an abandoned
// connection while Chrome is still wedged server-side.
const RENDER_TIMEOUT_SECONDS = Number(
process.env.RENDER_TIMEOUT_SECONDS ?? 570,
);
/** Thrown when a render exceeds RENDER_TIMEOUT_SECONDS — server.js maps
* this to a 500 and then hard-exits the process (see server.js for why). */
export class RenderTimeoutError extends Error {
constructor(seconds) {
super(`render exceeded ${seconds}s timeout`);
this.name = "RenderTimeoutError";
this.statusCode = 500;
}
}
/** Thrown when the requested orientation's HTML file isn't present in the
* composition dir — server.js maps this to a 400 instead of the generic 500
* a deep-in-executeRenderJob failure would otherwise produce. The known
* ids are the `<orientation>.html` files actually on disk (vertical.html /
* square.html), so the error names what the caller can use. */
export class UnknownCompositionError extends Error {
constructor(compositionId, knownIds) {
super(
`Unknown composition_id/orientation "${compositionId}". Available: ${
knownIds.length ? knownIds.join(", ") : "(none)"
}`,
);
this.name = "UnknownCompositionError";
this.statusCode = 400;
}
}
/**
* Render one composition/orientation cut. Returns the temp mp4 path plus a
* cleanup callback the caller MUST invoke once the response has been sent
* (streamed bytes, not returned in-memory, so a large render never holds
* the whole file in RAM twice). The callback also removes the temp extract
* dir — the caller never needs to know it existed.
*/
export async function renderComposition({
tarBuffer,
compositionId,
inputProps,
orientation,
}) {
const extractDir = await mkdtemp(path.join(tmpdir(), "hyperframes-src-"));
let outDir;
try {
await extractTar(tarBuffer, extractDir);
// compositionId is validated to [A-Za-z0-9_-]+ at the HTTP boundary
// (server.js), so it can't escape compositionsRoot — but enforce it here
// too so render.js stays safe regardless of caller.
const compositionsRoot = path.resolve(
extractDir,
"motion",
"compositions",
);
const compositionDir = path.resolve(compositionsRoot, compositionId);
const compositionsRootWithSep = `${compositionsRoot}${path.sep}`;
if (
compositionDir !== compositionsRoot &&
!compositionDir.startsWith(compositionsRootWithSep)
) {
throw new UnknownCompositionError(compositionId, []);
}
// ponytail: readdir is the smallest thing that fails if the dir is
// missing OR the orientation file is missing — one stat-vs-readdir
// branch collapsed into a single listing used for the 400 error.
let knownIds;
try {
const entries = await readdir(compositionDir);
knownIds = entries
.filter((name) => name === "vertical.html" || name === "square.html")
.sort();
} catch {
knownIds = [];
}
if (!knownIds.includes(`${orientation}.html`)) {
throw new UnknownCompositionError(compositionId, knownIds);
}
const entryHtml = await readFile(
path.join(compositionDir, `${orientation}.html`),
"utf8",
);
const fps = parseFps(entryHtml);
// The HTML files <script src="props.js"></script> reads this — set up by
// Task T2, but the sidecar must write the file per render so the HTML
// picks up per-release content + orientation.
const propsJs =
`window.__PROPS__ = ${JSON.stringify(inputProps ?? {})}; ` +
`window.__ORIENTATION__ = ${JSON.stringify(orientation)};`;
await writeFile(path.join(compositionDir, "props.js"), propsJs);
// @hyperframes/producer serves the compiled entry at the file-server ROOT
// (/index.html) and every other asset from projectDir at its relative path.
// So projectDir must be the composition dir — theme.css/props.js are direct
// children — and the shared motion/public tree, which theme.css references
// as ../../public/fonts and the root-served entry clamps to /public/fonts,
// must be staged into it or the fonts 404 and fall back to system faces.
const publicSrc = path.join(extractDir, "motion", "public");
if (existsSync(publicSrc)) {
await cp(publicSrc, path.join(compositionDir, "public"), {
recursive: true,
});
}
outDir = await mkdtemp(path.join(tmpdir(), "hyperframes-out-"));
const outputLocation = path.join(outDir, "render.mp4");
// createRenderJob carries only render params; @hyperframes/producer@0.7.36
// takes the source dir + output path as executeRenderJob args (they moved
// out of the job config), and resolves the cut's HTML from entryFile
// relative to projectDir.
const job = createRenderJob({
fps,
quality: QUALITY,
format: "mp4",
entryFile: `${orientation}.html`,
});
let timer;
try {
const timeout = new Promise((_resolve, reject) => {
timer = setTimeout(
() => reject(new RenderTimeoutError(RENDER_TIMEOUT_SECONDS)),
RENDER_TIMEOUT_SECONDS * 1000,
);
});
await Promise.race([
executeRenderJob(job, compositionDir, outputLocation, (progress) => {
console.log(
`hyperframes-renderer: ${compositionId}/${orientation} ${Math.round(
(progress?.percent ?? 0) * 100,
)}%`,
);
}),
timeout,
]);
} catch (err) {
await rm(outDir, { recursive: true, force: true }).catch(() => {});
throw err;
} finally {
// Clear on both success AND timeout-throw so a completed render never
// leaves a dangling timer that fires the watchdog's exit path late.
clearTimeout(timer);
}
return {
outputLocation,
cleanup: () =>
Promise.all([
rm(outDir, { recursive: true, force: true }).catch(() => {}),
rm(extractDir, { recursive: true, force: true }).catch(() => {}),
]),
};
} catch (err) {
// Reclaim whatever temp dirs exist. outDir is created at the mkdtemp
// above, so a sync throw from createRenderJob (post-mkdtemp, not
// awaited) leaves an empty outDir behind — reclaim it too. Re-throw
// so server.js maps the failure to 4xx/5xx.
await rm(extractDir, { recursive: true, force: true }).catch(() => {});
if (outDir) {
await rm(outDir, { recursive: true, force: true }).catch(() => {});
}
throw err;
}
}
export const MAX_PREVIEW_FRAMES = 32;
// Downscaled so agents reading the frames as images get a small file that
// still keeps on-screen copy legible (720 wide ≈ half of a 1080 cut).
const PREVIEW_FRAME_WIDTH = 720;
/**
* Render one cut and extract `frameCount` evenly spaced keyframes from it —
* the preview surface behind the fleet's `request_render` verb, so an agent
* can verify the actual artifact instead of the composition source. Samples
* scene MIDPOINTS (duration * (i + 0.5) / N), never t=0 or t=duration, so a
* fade-in first frame or an EOF seek can't produce a blank/missing frame.
* Returns the frames tarball path, the probed real duration, and a cleanup
* callback the caller MUST invoke after streaming.
*/
export async function renderFrames({
tarBuffer,
compositionId,
inputProps,
orientation,
frameCount,
}) {
const { outputLocation, cleanup: cleanupRender } = await renderComposition({
tarBuffer,
compositionId,
inputProps,
orientation,
});
let framesDir;
try {
// ffprobe the RENDERED file rather than trusting the composition's
// data-duration attribute — the whole point is ground truth.
const { stdout } = await execFileP("ffprobe", [
"-v", "error",
"-show_entries", "format=duration",
"-of", "csv=p=0",
outputLocation,
]);
const duration = Number(stdout.trim());
if (!Number.isFinite(duration) || duration <= 0) {
throw new Error("could not probe rendered video duration");
}
framesDir = await mkdtemp(path.join(tmpdir(), "hyperframes-frames-"));
const files = [];
for (let i = 0; i < frameCount; i++) {
const t = (duration * (i + 0.5)) / frameCount;
// Timestamp in the filename — self-describing, no manifest needed.
const name = `frame-${String(i + 1).padStart(2, "0")}-of-${frameCount}-at-${t.toFixed(1)}s.png`;
await execFileP("ffmpeg", [
"-v", "error",
"-ss", t.toFixed(3),
"-i", outputLocation,
"-frames:v", "1",
"-vf", `scale=${PREVIEW_FRAME_WIDTH}:-2`,
"-y",
path.join(framesDir, name),
]);
files.push(name);
}
const tarPath = path.join(framesDir, "frames.tar.gz");
await tar.create({ gzip: true, cwd: framesDir, file: tarPath }, files);
return {
tarPath,
duration,
cleanup: () =>
Promise.all([
cleanupRender(),
rm(framesDir, { recursive: true, force: true }).catch(() => {}),
]),
};
} catch (err) {
await cleanupRender();
if (framesDir) {
await rm(framesDir, { recursive: true, force: true }).catch(() => {});
}
throw err;
}
}