visual-feedback 0.1.0 → 0.3.0

package/docs/recipes/github-issues.md

@@ -1,10 +1,12 @@
 # Recipe: GitHub Issues (private repo only)
 
-Each report becomes an issue: the note, the page URL, the browser data and the image, with the
-category as a label. The image is committed to the repo with GitHub's contents API, at
-`feedback/<id>/image.png`, and shown inside the issue. Then the whole report is committed beside
-it as `feedback/<id>/report.json`, with `image` set to the image's GitHub link (or `null`) and
-`issue` to the issue number: a resend that finds it opens no second issue. The route checks on every send that the repo
+Each report becomes an issue: the note, the page URL, the browser data and the screenshots, with
+the category as a label. Each screenshot's image is committed to the repo with GitHub's contents
+API, at `feedback/<id>/screenshot-<n>.png`, numbered from 0, and shown inside the issue, with its
+own page URL under it when it was taken on another page than the report's. Then the
+whole report is committed beside them as `feedback/<id>/report.json`, with each screenshot's `image`
+set to its GitHub link and `issue` to the issue number: a resend that finds it opens no second
+issue. The route checks on every send that the repo
 is private, and refuses otherwise. It uses `fetch` and GitHub's REST API, so it needs no package.
 
 `report.context` comes from the browser (docs/API.md): the issue shows it as data, never as proof
@@ -50,7 +52,7 @@ Create a fine-grained personal access token for that one repo, with **Issues: re
 
 Send PNG from the widget, the image type this recipe was checked with inside an issue:
 `createFeedback({ endpoint: "/api/feedback", capture: { type: "image/png" } })`. Without it the
-widget sends WebP (docs/API.md): the route commits and links `image.webp` the same way, but whether
+widget sends WebP (docs/API.md): the route commits and links `screenshot-<n>.webp` the same way, but whether
 the issue shows a WebP image inline is not checked.
 
 ## 3. The route
@@ -101,24 +103,46 @@ function fenced(text: string, max: number): string {
   return `${fence}text\n${shown}\n${fence}`;
 }
 
-function issueBody(report: FeedbackReport, imageUrl: string | null): string {
+// A screenshot of another page than the report's names its own, as a draft can span routes.
+function shots(report: FeedbackReport, imageUrls: string[], share: number): string {
+  return imageUrls
+    .map((url, i) => {
+      const page = report.screenshots[i]?.page.url ?? report.page.url;
+      const where = page === report.page.url ? "" : `\n${fenced(page, 2_000 * share)}`;
+      return `![Screenshot ${i + 1}](<${url}>)${where}`;
+    })
+    .join("\n\n");
+}
+
+function issueBody(report: FeedbackReport, imageUrls: string[]): string {
+  // A fence can be as long as its text, so a report of backticks can pass GitHub's limit at the
+  // usual cuts: they shrink until it fits. At a tenth, the longest report is far under it.
+  let body = "";
+  for (const share of [1, 0.5, 0.25, 0.1]) {
+    body = bodyAt(report, imageUrls, share);
+    if (body.length <= 65_536) break;
+  }
+  return body;
+}
+
+function bodyAt(report: FeedbackReport, imageUrls: string[], share: number): string {
   const { page, viewport, userAgent, language, timeZone, createdAt, id } = report;
   const screen = `${viewport.width}x${viewport.height} @${viewport.devicePixelRatio}x`;
   // Each fence starts its own line: after other text on that line it is no block.
   return [
-    fenced(report.note || "(no note)", 10_000),
+    fenced(report.note || "(no note)", 10_000 * share),
     // The angle brackets keep a ( or ) in a branch name from ending the link.
-    imageUrl ? `![Screenshot](<${imageUrl}>)` : "No screenshot.",
-    `**Page:**\n${fenced(page.url, 2_000)}`,
-    `**Browser:**\n${fenced(`${userAgent}\n${screen}, ${language}, ${timeZone}`, 1_000)}`,
+    shots(report, imageUrls, share) || "No screenshot.",
+    `**Page:**\n${fenced(page.url, 2_000 * share)}`,
+    `**Browser:**\n${fenced(`${userAgent}\n${screen}, ${language}, ${timeZone}`, 1_000 * share)}`,
     `**Sent:** ${createdAt}, report \`${id}\``,
-    `**Context, from the browser:**\n${fenced(JSON.stringify(report.context, null, 2), 6_000)}`,
+    `**Context, from the browser:**\n${fenced(JSON.stringify(report.context, null, 2), 6_000 * share)}`,
   ].join("\n\n");
 }
 
 export async function POST(request: Request): Promise<Response> {
   try {
-    const { report, image } = await parseFeedbackRequest(request);
+    const { report } = await parseFeedbackRequest(request);
     const api = github();
     const repo = await api("GET", "");
     // Checked on every send: a repo made public later must not receive reports.
@@ -151,24 +175,24 @@ export async function POST(request: Request): Promise<Response> {
         throw new Error(`GitHub answered ${commit.status} for ${name}.`);
       }
     };
-    let imageUrl: string | null = null;
-    if (image) {
-      const name = `image.${image.type === "image/png" ? "png" : "webp"}`;
+    const imageUrls: string[] = [];
+    for (const [i, { image }] of report.screenshots.entries()) {
+      const name = `screenshot-${i}.${image.type === "image/png" ? "png" : "webp"}`;
       await put(name, new Uint8Array(await image.arrayBuffer()));
       const path = `${branch.split("/").map(encodeURIComponent).join("/")}/${folder}/${name}`;
-      imageUrl = `https://github.com/${repo.json.full_name}/blob/${path}?raw=true`;
+      imageUrls.push(`https://github.com/${repo.json.full_name}/blob/${path}?raw=true`);
     }
     // GitHub refuses a label name over 50 characters, and one that is only space.
     const category = cut(report.category?.replace(/\s+/g, " ").trim() ?? "", 49);
     const title = cut(report.note.split("\n")[0]?.trim() || "Feedback", 80);
     const issue = await api("POST", "/issues", {
       title,
-      body: issueBody(report, imageUrl),
+      body: issueBody(report, imageUrls),
       labels: ["feedback", ...(category ? [category] : [])],
     });
     if (issue.status !== 201) throw new Error(`GitHub answered ${issue.status} for the issue.`);
-    const { image: _, ...rest } = report;
-    const json = JSON.stringify({ ...rest, image: imageUrl, issue: issue.json.number }, null, 2);
+    const screenshots = report.screenshots.map((shot, i) => ({ ...shot, image: imageUrls[i] }));
+    const json = JSON.stringify({ ...report, screenshots, issue: issue.json.number }, null, 2);
     await put("report.json", new TextEncoder().encode(json));
     return new Response(null, { status: 204 });
   } catch (error) {

package/docs/recipes/local.md

@@ -3,9 +3,9 @@
 For local development only: it writes only when `NODE_ENV` is `development`. `next dev` sets it;
 start any other server with `NODE_ENV=development`.
 
-Each report becomes one folder, `.visual-feedback/<id>/`, holding `image.png` or `image.webp` and
-`report.json`. That file is the `FeedbackReport` (docs/API.md), with `image` set to the image's file
-name, or `null` when the report has none.
+Each report becomes one folder, `.visual-feedback/<id>/`, holding `report.json` and one image per
+screenshot: `screenshot-0.png` or `screenshot-0.webp`, then `screenshot-1`, and so on. That file is
+the `FeedbackReport` (docs/API.md), with each screenshot's `image` set to its file name.
 
 It does not work on hosts whose disk is read-only or wiped on each deploy or restart, such as
 Vercel, Netlify, Cloudflare and most containers. Use another recipe there.
@@ -31,7 +31,7 @@ interface unless it is started as `next dev -H 127.0.0.1`.
 
 ```ts
 // app/api/feedback/route.ts
-import { mkdir, rm, writeFile } from "node:fs/promises";
+import { mkdir, readdir, rm, writeFile } from "node:fs/promises";
 import { join } from "node:path";
 import { FeedbackRequestError, parseFeedbackRequest } from "visual-feedback/server";
 
@@ -41,21 +41,25 @@ export async function POST(request: Request): Promise<Response> {
     return new Response("Local feedback storage works only in development.", { status: 503 });
   }
   try {
-    const { report, image } = await parseFeedbackRequest(request);
+    const { report } = await parseFeedbackRequest(request);
     // report.id is a checked UUID, so it is safe as a folder name.
     const folder = join(process.cwd(), ".visual-feedback", report.id);
-    const file = image ? `image.${image.type === "image/png" ? "png" : "webp"}` : null;
+    const name = (image: Blob, i: number) =>
+      `screenshot-${i}.${image.type === "image/png" ? "png" : "webp"}`;
     await mkdir(folder, { recursive: true });
-    // The image first: a report.json on disk then always has its image beside it.
-    if (image && file)
-      await writeFile(join(folder, file), new Uint8Array(await image.arrayBuffer()));
+    // The images first: a report.json on disk then always has its images beside it.
+    for (const [i, { image }] of report.screenshots.entries()) {
+      await writeFile(join(folder, name(image, i)), new Uint8Array(await image.arrayBuffer()));
+    }
+    const screenshots = report.screenshots.map((shot, i) => ({ ...shot, image: name(shot.image, i) }));
     await writeFile(
       join(folder, "report.json"),
-      JSON.stringify({ ...report, image: file }, null, 2),
+      JSON.stringify({ ...report, screenshots }, null, 2),
     );
-    // After report.json, so a resend with another image type, or none, leaves no stray image.
-    for (const old of ["image.png", "image.webp"]) {
-      if (old !== file) await rm(join(folder, old), { force: true });
+    // After report.json, so a resend with other images, or fewer, leaves no stray image.
+    const kept = new Set(["report.json", ...screenshots.map((shot) => shot.image)]);
+    for (const old of await readdir(folder)) {
+      if (!kept.has(old)) await rm(join(folder, old), { force: true });
     }
     return new Response(null, { status: 204 });
   } catch (error) {

package/docs/recipes/postgres.md

@@ -1,18 +1,21 @@
 # Recipe: Postgres
 
-Each report becomes one row: the `FeedbackReport` (docs/API.md) without its `image` as `jsonb`, the
-image in `image` (`bytea`) with its type in `image_type`, and the user who sent it, taken from your
-own session. `user_id` is the proof of who sent a report; `report.context` is not (docs/API.md).
+Each report becomes one row in `feedback_reports`: the `FeedbackReport` (docs/API.md), its
+screenshots without their images, as `jsonb`, and the user who sent it, taken from your own session.
+Each screenshot's image becomes one row in `feedback_screenshots`, by its `position` in
+`report.screenshots`: the image in `image` (`bytea`) and its type in `image_type`. `user_id` is the
+proof of who sent a report; `report.context` is not (docs/API.md).
 
 To keep images in a bucket instead (docs/recipes/s3.md):
 
 1. Install `aws4fetch` and set the `S3_*` variables as that recipe's step 1 says.
 2. Copy its `bucket()` function into this route.
-3. Before the insert, PUT the image to `url(report.id, "image.png")` or `"image.webp"`, as that
-   recipe's `POST` does: with `"if-none-match": "*"`, so a reused id never replaces a stored
-   image, and throw on any refusal but 412, so a row never lacks its image.
-4. Insert `null` for `image` and keep `image_type`: `image/png` is the file `image.png`, and
-   `image/webp` is `image.webp`.
+3. Before the insert, PUT each image to `url(report.id, "screenshot-<position>.png")` or `.webp`,
+   as that recipe's `POST` does:
+   with `"if-none-match": "*"`, so a reused id never replaces a stored image, and throw on any
+   refusal but 412, so a row never lacks its image.
+4. Insert `null` for `image` and keep `image_type`: `image/png` is the file
+   `screenshot-<position>.png`, and `image/webp` is `screenshot-<position>.webp`.
 5. Read images back with that recipe's `GET`, its `canRead` replaced by the same admin check your
    screens use.
 
@@ -30,9 +33,15 @@ create table feedback_reports (
   id uuid primary key,
   user_id text not null,
   created_at timestamptz not null,
-  report jsonb not null,
+  report jsonb not null
+);
+
+create table feedback_screenshots (
+  report_id uuid not null references feedback_reports (id) on delete cascade,
+  position integer not null,
   image bytea,
-  image_type text
+  image_type text not null,
+  primary key (report_id, position)
 );
 ```
 
@@ -70,17 +79,30 @@ export async function POST(request: Request): Promise<Response> {
   const user = await currentUser(request);
   if (!user) return new Response(null, { status: 401 });
   try {
-    const { report, image } = await parseFeedbackRequest(request);
-    const { image: _, ...stored } = report;
-    const bytes = image ? new Uint8Array(await image.arrayBuffer()) : null;
+    const { report } = await parseFeedbackRequest(request);
+    const screenshots = report.screenshots.map(({ image: _, ...shot }) => shot);
     // The report was parsed from JSON, so it is JSON; context is only typed as unknown values.
-    const json = db().json(stored as postgres.JSONValue);
-    // A "Try again" sends the same id, so the row it already wrote stays as it is.
-    await db()`
-      insert into feedback_reports (id, user_id, created_at, report, image, image_type)
-      values (${report.id}, ${user}, ${report.createdAt}, ${json}, ${bytes},
-        ${image?.type ?? null})
-      on conflict (id) do nothing`;
+    const json = db().json({ ...report, screenshots } as postgres.JSONValue);
+    const images = await Promise.all(
+      report.screenshots.map(async ({ image }, position) => ({
+        report_id: report.id,
+        position,
+        image: new Uint8Array(await image.arrayBuffer()),
+        image_type: image.type,
+      })),
+    );
+    // One transaction, so a report row never lacks its screenshots.
+    await db().begin(async (sql) => {
+      // A "Try again" sends the same id, so the rows it already wrote stay as they are.
+      const inserted = await sql`
+        insert into feedback_reports (id, user_id, created_at, report)
+        values (${report.id}, ${user}, ${report.createdAt}, ${json})
+        on conflict (id) do nothing
+        returning id`;
+      if (inserted.length && images.length) {
+        await sql`insert into feedback_screenshots ${sql(images)}`;
+      }
+    });
     return new Response(null, { status: 204 });
   } catch (error) {
     if (error instanceof FeedbackRequestError) {

package/docs/recipes/s3.md

@@ -1,8 +1,8 @@
 # Recipe: an S3-compatible bucket (S3, R2, Railway Buckets)
 
-Each report becomes two objects in a private bucket, named and shaped as in the local recipe
-(docs/recipes/local.md): `feedback/<id>/report.json`, whose `image` is the image's name, and
-`feedback/<id>/image.png` or `image.webp`.
+Each report becomes objects in a private bucket, its report and one per screenshot, named and shaped as in the local recipe
+(docs/recipes/local.md): `feedback/<id>/report.json`, where each screenshot's `image` is its file
+name, and `feedback/<id>/screenshot-<n>.png` or `.webp` for each screenshot, numbered from 0.
 
 The bucket stays private: nothing is public, and people read reports only through your own route,
 behind your own admin check. `report.context` comes from the browser (docs/API.md), so an admin view
@@ -64,7 +64,7 @@ function bucket() {
 
 export async function POST(request: Request): Promise<Response> {
   try {
-    const { report, image } = await parseFeedbackRequest(request);
+    const { report } = await parseFeedbackRequest(request);
     const { client, url } = bucket();
     // A report already stored under this id stays: a retry, or a reused id, changes nothing.
     const stored = await client.fetch(url(report.id, "report.json"), { method: "HEAD" });
@@ -73,11 +73,15 @@ export async function POST(request: Request): Promise<Response> {
     if (stored.status !== 403 && stored.status !== 404) {
       throw new Error(`The bucket answered ${stored.status} for report.json.`);
     }
-    const name = image ? `image.${image.type === "image/png" ? "png" : "webp"}` : null;
-    // The image first: a report.json in the bucket then always has its image beside it.
+    const name = (image: Blob, i: number) =>
+      `screenshot-${i}.${image.type === "image/png" ? "png" : "webp"}`;
+    const screenshots = report.screenshots.map((shot, i) => ({ ...shot, image: name(shot.image, i) }));
+    // The images first: a report.json in the bucket then always has its images beside it.
     const puts: [string, BodyInit, string][] = [
-      ...(image && name ? [[name, image, image.type] as [string, BodyInit, string]] : []),
-      ["report.json", JSON.stringify({ ...report, image: name }), "application/json"],
+      ...report.screenshots.map(
+        ({ image }, i): [string, BodyInit, string] => [name(image, i), image, image.type],
+      ),
+      ["report.json", JSON.stringify({ ...report, screenshots }), "application/json"],
     ];
     for (const [file, body, type] of puts) {
       const put = await client.fetch(url(report.id, file), {
@@ -99,14 +103,15 @@ export async function POST(request: Request): Promise<Response> {
   }
 }
 
-// GET /api/feedback?id=<report id>&file=report.json | image.png | image.webp
+// GET /api/feedback?id=<report id>&file=report.json | screenshot-<n>.png | screenshot-<n>.webp
 export async function GET(request: Request): Promise<Response> {
   if (!(await canRead(request))) return new Response(null, { status: 403 });
   const query = new URL(request.url).searchParams;
   const id = query.get("id") ?? "";
   const file = query.get("file") ?? "";
   // Only a report id and a known file name, so the key cannot leave feedback/<id>/.
-  if (!/^[0-9a-f-]{36}$/.test(id) || !["report.json", "image.png", "image.webp"].includes(file)) {
+  const known = file === "report.json" || /^screenshot-\d\.(png|webp)$/.test(file);
+  if (!/^[0-9a-f-]{36}$/.test(id) || !known) {
     return new Response(null, { status: 400 });
   }
   const { client, url } = bucket();

package/docs/recipes/supabase.md

@@ -1,10 +1,11 @@
 # Recipe: Supabase
 
-Each report becomes one row in a table and, when it has one, one image in the private Storage
-bucket `feedback`, named `<id>/image.png` or `<id>/image.webp`. The row has the Postgres recipe's columns
-(docs/recipes/postgres.md), except that `user_id` is the Supabase user's uuid and the image is in
-Storage instead of `bytea`. Row-level security lets
-only your app's admins read either, and nobody but your server can write.
+Each report becomes one row in a table and one image per screenshot in the private Storage bucket
+`feedback`, named `<id>/screenshot-<n>.png` or `.webp`, numbered from 0. The row has the columns of
+the Postgres recipe's `feedback_reports` (docs/recipes/postgres.md), except that `user_id` is the
+Supabase user's uuid. The images are in Storage instead of a second table, and each screenshot's
+`image` in `report` is its file name. Row-level security lets only your app's admins read either,
+and nobody but your server can write.
 
 `user_id` is the proof of who sent a report; `report.context` is not (docs/API.md). The images show
 the screen as the user saw it, with nothing masked (SPEC §7).
@@ -26,8 +27,7 @@ create table feedback_reports (
   id uuid primary key,
   user_id uuid not null references auth.users (id) on delete cascade,
   created_at timestamptz not null,
-  report jsonb not null,
-  image_type text
+  report jsonb not null
 );
 alter table feedback_reports enable row level security;
 grant select on feedback_reports to authenticated;
@@ -49,9 +49,9 @@ error, never a row, and a download from `feedback` is refused.
 
 An admin screen reads with the admin's own session, never the service role key:
 `from("feedback_reports").select()` for the rows, filtered and paged as the screen needs, and
-`storage.from("feedback").createSignedUrl("<id>/image.png", 60)` for an image, `image.webp` when
-`image_type` is `image/webp`. A signed URL works for anyone who holds it for those 60 seconds: show
-it, never share it.
+`storage.from("feedback").createSignedUrl("<id>/<image>", 60)` for a screenshot, where `<image>` is
+its `image` in `report`, such as `screenshot-0.png`. A signed URL works for anyone who holds it for
+those 60 seconds: show it, never share it.
 
 Set `SUPABASE_URL` and `SUPABASE_SERVICE_ROLE_KEY` on the server. The service role key bypasses
 row-level security: never send it to the browser.
@@ -87,28 +87,28 @@ export async function POST(request: Request): Promise<Response> {
   const user = await currentUser(request);
   if (!user) return new Response(null, { status: 401 });
   try {
-    const { report, image } = await parseFeedbackRequest(request);
+    const { report } = await parseFeedbackRequest(request);
     const db = supabase();
-    // The image first, so a row never lacks its image.
-    if (image) {
-      const name = `${report.id}/image.${image.type === "image/png" ? "png" : "webp"}`;
+    const name = (image: Blob, i: number) =>
+      `screenshot-${i}.${image.type === "image/png" ? "png" : "webp"}`;
+    const screenshots = report.screenshots.map((shot, i) => ({ ...shot, image: name(shot.image, i) }));
+    // The images first, so a row never lacks its images.
+    for (const [i, { image }] of report.screenshots.entries()) {
       const upload = await db.storage
         .from("feedback")
-        .upload(name, image, { contentType: image.type, upsert: false });
+        .upload(`${report.id}/${name(image, i)}`, image, { contentType: image.type, upsert: false });
       // A resend finds its image there (409); the id comes from the browser, so never replace it.
       const error = upload.error;
       const stored = error && "statusCode" in error && error.statusCode === "409";
       if (error && !stored) throw error;
     }
-    const { image: _, ...stored } = report;
     // A "Try again" sends the same id, so the row it already wrote stays as it is.
     const insert = await db.from("feedback_reports").upsert(
       {
         id: report.id,
         user_id: user,
         created_at: report.createdAt,
-        report: stored,
-        image_type: image?.type ?? null,
+        report: { ...report, screenshots },
       },
       { onConflict: "id", ignoreDuplicates: true },
     );

package/docs/recipes/vercel-blob.md

@@ -1,7 +1,8 @@
 # Recipe: Vercel Blob
 
 Each report becomes private blobs, named and shaped as in the S3 recipe (docs/recipes/s3.md):
-`feedback/<id>/report.json` and `feedback/<id>/image.png` or `image.webp`. People read them only
+`feedback/<id>/report.json` and `feedback/<id>/screenshot-<n>.png` or `.webp` for each screenshot.
+People read them only
 through your own route, behind your own admin check. `report.context` comes from the browser
 (docs/API.md), so an admin view must not show it as proof of who sent a report. The images show the
 screen as the user saw it, with nothing masked (SPEC §7).
@@ -16,9 +17,9 @@ on the server. Never send it to the browser. Check it: open
 `https://<store id>.private.blob.vercel-storage.com/feedback/<id>/report.json` without the token,
 where the store id is the part after `vercel_blob_rw_` in the token, and Vercel refuses it.
 
-The route takes images up to 3 MB, so the whole request stays under Vercel's 4.5 MB body limit. A
-larger one is refused with 413 and the widget shows its send error; a smaller `capture.maxWidth`
-(docs/API.md) keeps screenshots under it.
+Vercel refuses a request body over 4.5 MB, all screenshots of a report together, with 413, and the
+widget then shows its send error. The route takes images up to 3 MB each; a smaller
+`capture.maxWidth` (docs/API.md) keeps several screenshots under the limit.
 
 ## 2. The route
 
@@ -72,8 +73,8 @@ function blob() {
 
 export async function POST(request: Request): Promise<Response> {
   try {
-    // Vercel refuses a function request body over 4.5 MB; 3 MB plus the report stays under it.
-    const { report, image } = await parseFeedbackRequest(request, { maxImageBytes: 3_000_000 });
+    // Vercel refuses a request body over 4.5 MB, all screenshots together; this caps each image.
+    const { report } = await parseFeedbackRequest(request, { maxImageBytes: 3_000_000 });
     const store = blob();
     // The id comes from the browser: once a report is stored, a later request does not replace it.
     // Two requests with one id at the same moment still can; the check and the write are separate.
@@ -84,10 +85,14 @@ export async function POST(request: Request): Promise<Response> {
     if (stored.status !== 404) {
       throw new Error(`Vercel Blob answered ${stored.status} for report.json.`);
     }
-    const name = image ? `image.${image.type === "image/png" ? "png" : "webp"}` : null;
-    // The image first: a report.json then always has its image beside it.
-    if (image && name) await store.put(report.id, name, image, image.type);
-    const json = JSON.stringify({ ...report, image: name });
+    const name = (image: Blob, i: number) =>
+      `screenshot-${i}.${image.type === "image/png" ? "png" : "webp"}`;
+    const screenshots = report.screenshots.map((shot, i) => ({ ...shot, image: name(shot.image, i) }));
+    // The images first: a report.json then always has its images beside it.
+    for (const [i, { image }] of report.screenshots.entries()) {
+      await store.put(report.id, name(image, i), image, image.type);
+    }
+    const json = JSON.stringify({ ...report, screenshots });
     await store.put(report.id, "report.json", json, "application/json");
     return new Response(null, { status: 204 });
   } catch (error) {
@@ -98,14 +103,15 @@ export async function POST(request: Request): Promise<Response> {
   }
 }
 
-// GET /api/feedback?id=<report id>&file=report.json | image.png | image.webp
+// GET /api/feedback?id=<report id>&file=report.json | screenshot-<n>.png | screenshot-<n>.webp
 export async function GET(request: Request): Promise<Response> {
   if (!(await canRead(request))) return new Response(null, { status: 403 });
   const query = new URL(request.url).searchParams;
   const id = query.get("id") ?? "";
   const file = query.get("file") ?? "";
   // Only a report id and a known file name, so the read cannot leave feedback/<id>/.
-  if (!/^[0-9a-f-]{36}$/.test(id) || !["report.json", "image.png", "image.webp"].includes(file)) {
+  const known = file === "report.json" || /^screenshot-\d\.(png|webp)$/.test(file);
+  if (!/^[0-9a-f-]{36}$/.test(id) || !known) {
     return new Response(null, { status: 400 });
   }
   const object = await blob().read(id, file);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "visual-feedback",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "A small button lets your users screenshot the page, mark it up and write a note. You receive one report and store it where you want.",
   "keywords": [
     "feedback",
@@ -60,10 +60,13 @@
     "test:pack": "playwright test -c tests/pack-smoke/playwright.config.ts",
     "size": "size-limit",
     "publint": "publint --strict",
-    "check": "npm run lint && npm run typecheck && npm run build && npm run test && npm run test:edge && npm run test:e2e && npm run test:react && npm run test:pack && npm run size && npm run publint",
+    "check": "node tests/check.mjs",
+    "check:static": "npm run lint && npm run typecheck && npm run build && npm run test && npm run test:edge && npm run size && npm run publint",
+    "check:browser": "npm run test:e2e && npm run test:react && npm run test:pack",
     "prepack": "npm run --silent build -- --logLevel warn",
     "dev": "node tests/dev.mjs",
-    "demo": "node tests/demo.mjs"
+    "demo": "node tests/demo.mjs",
+    "release": "node tests/release.mjs"
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.13.0",