Showing the changes to e2e/scripts (1 of 2 files). Show all
Unified · Split
| @@ -0,0 +1,164 @@ | |||
| 1 | // Turn an e2e run's recording into PR-ready markdown. | ||
| 2 | // | ||
| 3 | // GitHub only renders media inline from URLs it can fetch, and there is no | ||
| 4 | // API for the drag-and-drop user-asset upload — so this converts the run's | ||
| 5 | // recording to a gif (the one format that renders inline from a raw repo | ||
| 6 | // URL), commits it to the orphan `e2e-media` branch through the git database | ||
| 7 | // API (never touching the local worktree), and prints markdown to paste into | ||
| 8 | // the PR description. | ||
| 9 | // | ||
| 10 | // Usage: bun e2e/scripts/pr-media.ts <run-dir-or-artifact> [...more] | ||
| 11 | // run dir e2e/runs/<target>/<scenario-slug> — picks session.mp4 or | ||
| 12 | // terminal.cast and labels the gif from result.json | ||
| 13 | // session.mp4 browser recording (ffmpeg -> gif) | ||
| 14 | // terminal.cast terminal recording (agg -> gif; brew install agg) | ||
| 15 | // *.png run screenshot, uploaded as-is | ||
| 16 | import { execFileSync } from "node:child_process"; | ||
| 17 | import { createHash } from "node:crypto"; | ||
| 18 | import { existsSync, readFileSync, statSync, writeFileSync } from "node:fs"; | ||
| 19 | import { tmpdir } from "node:os"; | ||
| 20 | import { basename, join, resolve } from "node:path"; | ||
| 21 | |||
| 22 | const MEDIA_BRANCH = "e2e-media"; | ||
| 23 | // Above this GitHub's image proxy stops rendering the gif inline. | ||
| 24 | const RENDER_LIMIT_BYTES = 10 * 1024 * 1024; | ||
| 25 | |||
| 26 | const run = (command: string, args: ReadonlyArray<string>): string => | ||
| 27 | execFileSync(command, [...args], { | ||
| 28 | encoding: "utf8", | ||
| 29 | maxBuffer: 64 * 1024 * 1024, | ||
| 30 | }); | ||
| 31 | |||
| 32 | const ghJson = (args: ReadonlyArray<string>): unknown => JSON.parse(run("gh", ["api", ...args])); | ||
| 33 | |||
| 34 | interface Artifact { | ||
| 35 | readonly path: string; | ||
| 36 | readonly label: string; | ||
| 37 | readonly slug: string; | ||
| 38 | } | ||
| 39 | |||
| 40 | /** A run dir resolves to its recording; a file stands for itself. */ | ||
| 41 | const resolveArtifact = (input: string): Artifact => { | ||
| 42 | const path = resolve(input); | ||
| 43 | if (!existsSync(path)) throw new Error(`no such path: ${input}`); | ||
| 44 | if (!statSync(path).isDirectory()) { | ||
| 45 | return { | ||
| 46 | path, | ||
| 47 | label: basename(path), | ||
| 48 | slug: basename(path).replace(/\.[^.]+$/, ""), | ||
| 49 | }; | ||
| 50 | } | ||
| 51 | const recording = ["session.mp4", "terminal.cast"] | ||
| 52 | .map((name) => join(path, name)) | ||
| 53 | .find(existsSync); | ||
| 54 | if (!recording) throw new Error(`${input} has no session.mp4 or terminal.cast`); | ||
| 55 | let label = basename(path); | ||
| 56 | try { | ||
| 57 | const result = JSON.parse(readFileSync(join(path, "result.json"), "utf8")) as { | ||
| 58 | scenario?: string; | ||
| 59 | target?: string; | ||
| 60 | }; | ||
| 61 | if (result.scenario) label = `${result.scenario} (${result.target ?? "e2e"})`; | ||
| 62 | } catch { | ||
| 63 | // skipped/partial runs still have a recording worth showing | ||
| 64 | } | ||
| 65 | return { path: recording, label, slug: basename(path) }; | ||
| 66 | }; | ||
| 67 | |||
| 68 | const toGif = (artifact: Artifact): string => { | ||
| 69 | if (artifact.path.endsWith(".png")) return artifact.path; | ||
| 70 | const out = join(tmpdir(), `${artifact.slug}.gif`); | ||
| 71 | if (artifact.path.endsWith(".cast")) { | ||
| 72 | run("agg", ["--idle-time-limit", "2", "--font-size", "14", artifact.path, out]); | ||
| 73 | } else { | ||
| 74 | // Two-pass palette keeps UI text crisp at a size GitHub will render. | ||
| 75 | const filter = | ||
| 76 | "fps=8,scale=960:-2:flags=lanczos,split[a][b];" + | ||
| 77 | "[a]palettegen=max_colors=128[p];[b][p]paletteuse=dither=bayer:bayer_scale=5"; | ||
| 78 | run("ffmpeg", ["-y", "-loglevel", "error", "-i", artifact.path, "-vf", filter, out]); | ||
| 79 | } | ||
| 80 | return out; | ||
| 81 | }; | ||
| 82 | |||
| 83 | /** Commit a file to the media branch via the git database API; returns its raw URL. */ | ||
| 84 | const upload = (repo: string, localPath: string, mediaPath: string): string => { | ||
| 85 | const bytes = readFileSync(localPath); | ||
| 86 | const request = join(tmpdir(), `pr-media-blob-${process.pid}.json`); | ||
| 87 | writeFileSync(request, JSON.stringify({ content: bytes.toString("base64"), encoding: "base64" })); | ||
| 88 | const blob = ghJson([`repos/${repo}/git/blobs`, "--method", "POST", "--input", request]) as { | ||
| 89 | sha: string; | ||
| 90 | }; | ||
| 91 | |||
| 92 | // Tip of the media branch, if it exists — the branch is orphan on first use. | ||
| 93 | let parent: { commit: string; tree: string } | undefined; | ||
| 94 | try { | ||
| 95 | const ref = ghJson([`repos/${repo}/git/ref/heads/${MEDIA_BRANCH}`]) as { | ||
| 96 | object: { sha: string }; | ||
| 97 | }; | ||
| 98 | const commit = ghJson([`repos/${repo}/git/commits/${ref.object.sha}`]) as { | ||
| 99 | tree: { sha: string }; | ||
| 100 | }; | ||
| 101 | parent = { commit: ref.object.sha, tree: commit.tree.sha }; | ||
| 102 | } catch { | ||
| 103 | parent = undefined; | ||
| 104 | } | ||
| 105 | |||
| 106 | writeFileSync( | ||
| 107 | request, | ||
| 108 | JSON.stringify({ | ||
| 109 | ...(parent ? { base_tree: parent.tree } : {}), | ||
| 110 | tree: [{ path: mediaPath, mode: "100644", type: "blob", sha: blob.sha }], | ||
| 111 | }), | ||
| 112 | ); | ||
| 113 | const tree = ghJson([`repos/${repo}/git/trees`, "--method", "POST", "--input", request]) as { | ||
| 114 | sha: string; | ||
| 115 | }; | ||
| 116 | writeFileSync( | ||
| 117 | request, | ||
| 118 | JSON.stringify({ | ||
| 119 | message: `Add ${mediaPath}`, | ||
| 120 | tree: tree.sha, | ||
| 121 | parents: parent ? [parent.commit] : [], | ||
| 122 | }), | ||
| 123 | ); | ||
| 124 | const commit = ghJson([`repos/${repo}/git/commits`, "--method", "POST", "--input", request]) as { | ||
| 125 | sha: string; | ||
| 126 | }; | ||
| 127 | writeFileSync( | ||
| 128 | request, | ||
| 129 | parent | ||
| 130 | ? JSON.stringify({ sha: commit.sha }) | ||
| 131 | : JSON.stringify({ ref: `refs/heads/${MEDIA_BRANCH}`, sha: commit.sha }), | ||
| 132 | ); | ||
| 133 | ghJson( | ||
| 134 | parent | ||
| 135 | ? [`repos/${repo}/git/refs/heads/${MEDIA_BRANCH}`, "--method", "PATCH", "--input", request] | ||
| 136 | : [`repos/${repo}/git/refs`, "--method", "POST", "--input", request], | ||
| 137 | ); | ||
| 138 | return `https://raw.githubusercontent.com/${repo}/${MEDIA_BRANCH}/${mediaPath}`; | ||
| 139 | }; | ||
| 140 | |||
| 141 | const inputs = process.argv.slice(2); | ||
| 142 | if (inputs.length === 0) { | ||
| 143 | console.error("usage: bun e2e/scripts/pr-media.ts <run-dir-or-artifact> [...more]"); | ||
| 144 | process.exit(1); | ||
| 145 | } | ||
| 146 | |||
| 147 | const repo = run("gh", ["repo", "view", "--json", "nameWithOwner", "-q", ".nameWithOwner"]).trim(); | ||
| 148 | const blocks: Array<string> = []; | ||
| 149 | for (const input of inputs) { | ||
| 150 | const artifact = resolveArtifact(input); | ||
| 151 | const gif = toGif(artifact); | ||
| 152 | const size = statSync(gif).size; | ||
| 153 | if (size > RENDER_LIMIT_BYTES) { | ||
| 154 | console.error( | ||
| 155 | `warning: ${basename(gif)} is ${(size / 1024 / 1024).toFixed(1)} MB — GitHub will not render it inline; trim the scenario or lower fps`, | ||
| 156 | ); | ||
| 157 | } | ||
| 158 | const hash = createHash("sha256").update(readFileSync(gif)).digest("hex").slice(0, 8); | ||
| 159 | const extension = gif.endsWith(".png") ? "png" : "gif"; | ||
| 160 | const url = upload(repo, gif, `${artifact.slug}-${hash}.${extension}`); | ||
| 161 | blocks.push(``); | ||
| 162 | } | ||
| 163 | |||
| 164 | console.log(`\n${blocks.join("\n\n")}\n`); | ||