Daytona Recording Artifacts

Use this skill to collect proof that a Daytona UI flow works. Use fraimz before declaring the flow passed. If the user asks to do e2e tests for a feature, frame proof is required unless they explicitly ask for non-UI or mock-only validation.

Default: Frame-by-Frame HTML Proof

The default proof format is a browseable HTML page with named PNG screenshots for each step of the flow. This is faster to produce, easier to review, and works on any device.

Use video (MP4) only when the proof requires motion: streaming text, loading spinners, animations, drag-and-drop, or real-time interactions that a static frame cannot capture. When video is used, embed it inside the frame-by-frame HTML page alongside the static frames.

When a coded eval exists, prefer the eval runner frame output first:

pnpm evals --flow <flow-id> --cdp-url <printed-electron-cdp-url>

The runner writes evals/results/<run-id>/index.html plus validated PNG evidence from ctx.prove(...) and ctx.screenshot(...). Serve or copy that result directory for PR evidence.

How to produce frame proof

1. Serve a directory from the sandbox on port 8090:

daytona exec "$SANDBOX" -- 'bash -lc "mkdir -p /workspace/proof-frames; nohup python3 -m http.server 8090 --directory /workspace/proof-frames >/dev/null 2>&1 &"'

2. At each important state, capture a browser_screenshot locally and upload it to the sandbox with a numbered name like 01-auth-landing.png, 02-org-filled.png, etc.

3. Generate a browseable index.html with all frames as labeled images in a responsive grid. Include the branch, commit, and sandbox name.

4. Get the public URL:

FRAMES_URL=$(daytona preview-url "$SANDBOX" -p 8090 2>/dev/null | grep -v "^time=")
echo "${FRAMES_URL}/index.html"

5. Post the index URL in the PR body. Individual frame PNGs are also directly linkable: ${FRAMES_URL}/01-auth-landing.png.