rechrome 1.38.3 → 1.39.1

package/README.md

@@ -359,56 +359,59 @@ cp .env.example .env.local
 >
 > Shell-set `PLAYWRIGHT_MCP_*` variables take priority over `.env.local`, so you can always override per-command without editing files.
 
-### Small icon uploads from stdin
+### Uploading files
 
-Uploads are disabled by default on every listener. The host owner can add an
-`uploads` object to the intended listener entry in `~/.rechrome/listeners.json`:
+`rech upload <file>` puts a local image into the page: a file picker, an
+`<input type=file>` (hidden ones too), a drag-and-drop zone, or an editor that
+takes pasted images. The file is read on **your** machine and only its bytes are
+sent, so it works the same against a remote host.
 
-```json
-"uploads": {
-  "maxBytes": 2097152,
-  "contentTypes": ["image/png", "image/svg+xml"]
-}
+```bash
+rech upload ./shot.png                     # the chooser a click opened, else the page's only file input
+rech upload ./shot.png --into e42          # a file input, or the button that opens the picker (clicks it)
+rech upload ./shot.png --into 'input#avatar'
+rech upload ./shot.png --drop e17          # a drag-and-drop zone
+rech upload ./shot.png --paste e9          # an editor that takes pasted images (default: the focused element)
+rech upload --name shot.png < ./shot.png   # bytes from stdin instead of a path
 ```
 
-The object enables uploads; omitting it disables them. `uploads: {}` uses the
-same defaults shown above. The owner can lower the byte limit or narrow the type
-list, but cannot exceed the hard **2 MiB** limit or enable other types. Do not
-replace the listener's other fields or share its key. Install the updated daemon
-code before enabling this policy; configuration changes then use the usual
-listener reload mechanism.
+Targets are snapshot refs (`rech snapshot`) or selectors, the same as `rech click`.
+The usual flow for a site's "add image" button is `rech snapshot`, then
+`rech upload ./shot.png --into <the button's ref>`: rech clicks it and fills the file
+chooser that opens. Run the steps in one session (`-s=<name>`) when they span
+several commands.
 
-On the **client machine**, open the website's file chooser with `rech click`, then
-send the icon through stdin in the same profile/session:
+**Types and size:** PNG, JPEG, GIF, WebP and SVG, up to **10 MiB**. Both the client
+and the host check the size, and check the bytes against the type (PNG/JPEG/GIF/WebP
+signatures; UTF-8 SVG without DTD/entities). These checks identify the format; they
+don't sanitize SVG or scan for malware. The host never renders the file.
+
+**Turning uploads on:** they are always on through the local management listener.
+On a shared (scoped) listener they are **off** until the host turns them on:
 
 ```bash
-rech --profile work -s=slack upload --name app-icon.png < ./app-icon.png
-cat ./app-icon.svg | rech --profile work -s=slack upload --name app-icon.svg
+rech listener set <listener> --uploads      # --no-uploads turns them off again
+```
+
+That writes an `uploads` object to the listener's entry in `~/.rechrome/listeners.json`.
+The host can tune it by hand, lowering the byte limit or narrowing the types, but not
+going above the 10 MiB cap or adding other types:
+
+```json
+"uploads": { "maxBytes": 2097152, "contentTypes": ["image/png", "image/jpeg"] }
 ```
 
-`--content-type image/png` or `--content-type image/svg+xml` may be specified;
-otherwise the type is inferred from `--name`. This command is stdin-only: there
-is no positional file path. The shell reads the local file; only its bytes and
-metadata are sent to the listener. Client and server both enforce the byte cap.
-The server checks PNG signatures or UTF-8 SVG markup (rejecting DTD/entities),
-and checks the type against the listener policy. These checks identify the file
-format; they do not sanitize SVG or scan for malware. The host never renders the
-file or resolves anything referenced inside it.
-
-The receiver writes a random `.png`/`.svg` filename with mode 0600 inside a private
-0700 temporary directory, outside the downloadable output tree. It passes only
-that generated path to the existing file-chooser command and removes the directory
-on success, error, or timeout. Neither filenames nor payload fields can select a
-host file. A crash or forced process kill can interrupt cleanup; the files remain
-private OS temporary files. Permission modes apply on POSIX hosts.
-
-Each upload produces one `upload:` JSON audit record with listener, profile,
-original name, byte size, SHA-256, page origin observed immediately before upload,
-and result. It contains no file contents, credentials, page path, query, or fragment.
-Requests rejected before inspection have null values for unavailable fields.
-An HTTP(S) origin must be determined before an upload is attempted. As with other
-browser commands, avoid concurrent tab navigation in the same session. Scoped
-`eval`, `run-code`, host paths, and CLI option overrides remain unavailable.
+**On the host:** the bytes are written under their original file name inside a fresh
+private temporary directory (0700, file 0600), outside the downloadable output tree,
+and the directory is removed afterwards (on success, error or timeout). Neither the
+name, the target nor any other payload field can select a host file or inject code:
+the drop/paste/input steps run as a server-built script that embeds them as JSON
+data. Each upload writes one `upload:` JSON audit record: listener, profile,
+original name, size, SHA-256, delivery mode, the page origin just before the
+upload, and the result. It never contains file contents, credentials, or the page's
+path, query or fragment. An HTTP(S) origin must be known before an upload is
+attempted. Scoped `eval`, `run-code`, host paths and CLI option overrides stay
+unavailable; enabling uploads doesn't change that.
 
 ### Remote access
 
@@ -475,7 +478,7 @@ git clone https://github.com/snomiao/rechrome.git
 cd rechrome
 bun install       # `prepare` also builds vendor/ from vendor-src/, so the checkout has a working CLI
 bun link          # makes this checkout the global rechrome / rech
-bun test ./*.test.ts ./*.spec.ts ./scripts/*.test.ts   # rechrome's own tests (plain `bun test` also finds the vendored forks' suites)
+bun run test      # rechrome's own tests (plain `bun test` also finds the vendored forks' suites)
 ```
 
 To use a different playwright-cli, set `PLAYWRIGHT_CLI=<cmd>` in `.env.local` (for example a

package/listeners.js

@@ -1,13 +1,20 @@
 // @bun
 // scoped-upload.ts
-var MAX_UPLOAD_BYTES = 2 * 1024 * 1024;
-var MAX_REQUEST_BYTES = 3 * 1024 * 1024;
-var UPLOAD_TYPES = ["image/png", "image/svg+xml"];
+var MAX_UPLOAD_BYTES = 10 * 1024 * 1024;
+var MAX_REQUEST_BYTES = 14 * 1024 * 1024;
+var UPLOAD_TYPES = ["image/png", "image/jpeg", "image/gif", "image/webp", "image/svg+xml"];
 function validateUploadPolicy(value) {
   const p = value;
   if (!p || typeof p !== "object" || Array.isArray(p) || Object.keys(p).some((k) => !["maxBytes", "contentTypes"].includes(k)) || p.maxBytes !== undefined && (!Number.isSafeInteger(p.maxBytes) || p.maxBytes < 1 || p.maxBytes > MAX_UPLOAD_BYTES) || p.contentTypes !== undefined && (!Array.isArray(p.contentTypes) || !p.contentTypes.length || p.contentTypes.some((t) => !UPLOAD_TYPES.includes(t))))
-    throw new Error("uploads must be an object with optional maxBytes (1..2097152) and contentTypes (image/png, image/svg+xml)");
-}
+    throw new Error(`uploads must be an object with optional maxBytes (1..${MAX_UPLOAD_BYTES}) and contentTypes (${UPLOAD_TYPES.join(", ")})`);
+}
+var UPLOAD_USAGE = `Usage: rech upload <file> [how]   (the file is read on this machine; only its bytes are sent)
+  (no flag)              the file chooser a click opened, else the page's only <input type=file>
+  --into <ref|selector>  a file input (hidden ones too), or a button that opens a file chooser
+  --drop <ref|selector>  a drag-and-drop zone
+  --paste [ref|selector] an editor that takes pasted images (default: the focused element)
+  --name <file>          read the bytes from stdin instead:  rech upload --name shot.png < shot.png
+Types: ${UPLOAD_TYPES.join(", ")}, up to ${MAX_UPLOAD_BYTES / 1024 / 1024} MiB. Get refs from rech snapshot.`;
 
 // listeners.ts
 import { isIP } from "net";
@@ -119,7 +126,9 @@ function authorizeProfileRequest(listener, body) {
   if (body.env?.PLAYWRIGHT_MCP_PROFILE_DIRECTORY && body.env.PLAYWRIGHT_MCP_PROFILE_DIRECTORY !== profile)
     throw new Error("Profile override does not match request identity");
   const args = body.args.filter((a) => /^-s=[a-zA-Z0-9_-]{1,64}$/.test(a) === false);
-  if (!(args[0] === "upload" && listener.uploads !== undefined) && !SCOPED_COMMANDS.has(args[0]))
+  if (args[0] === "upload" && listener.uploads === undefined)
+    throw new Error(`Uploads are off on listener "${listener.name}". The host can turn them on: rech listener set ${listener.name} --uploads`);
+  if (args[0] !== "upload" && !SCOPED_COMMANDS.has(args[0]))
     throw new Error("Command is unavailable on profile-scoped listeners; use the local management listener for arbitrary code or host access");
   if (body.args.filter((a) => a.startsWith("-s=")).length > 1 || args.slice(1).some((a) => a.startsWith("-") && !(args[0] === "screenshot" && a === "--full-page") && !(args[0] === "console" && a === "--clear") && !(args[0] === "fill-secret" && (a === "--submit" || a === "--totp" || a.startsWith("--allow-domain=")))))
     throw new Error("CLI option overrides are unavailable on profile-scoped listeners");

package/listeners.ts

@@ -103,7 +103,9 @@ export function authorizeProfileRequest(listener: Listener, body: any): string {
   if (typeof profile !== "string" || listener.profiles === "*" || !listener.profiles.includes(profile)) throw new Error("Profile is not allowed on this listener");
   if (body.env?.PLAYWRIGHT_MCP_PROFILE_DIRECTORY && body.env.PLAYWRIGHT_MCP_PROFILE_DIRECTORY !== profile) throw new Error("Profile override does not match request identity");
   const args = body.args.filter((a: string) => /^-s=[a-zA-Z0-9_-]{1,64}$/.test(a) === false);
-  if (!(args[0] === "upload" && listener.uploads !== undefined) && !SCOPED_COMMANDS.has(args[0])) throw new Error("Command is unavailable on profile-scoped listeners; use the local management listener for arbitrary code or host access");
+  if (args[0] === "upload" && listener.uploads === undefined)
+    throw new Error(`Uploads are off on listener "${listener.name}". The host can turn them on: rech listener set ${listener.name} --uploads`);
+  if (args[0] !== "upload" && !SCOPED_COMMANDS.has(args[0])) throw new Error("Command is unavailable on profile-scoped listeners; use the local management listener for arbitrary code or host access");
   if (body.args.filter((a: string) => a.startsWith("-s=")).length > 1 || args.slice(1).some((a: string) => a.startsWith("-") && !(args[0] === "screenshot" && a === "--full-page") && !(args[0] === "console" && a === "--clear") && !(args[0] === "fill-secret" && (a === "--submit" || a === "--totp" || a.startsWith("--allow-domain="))))) throw new Error("CLI option overrides are unavailable on profile-scoped listeners");
   if (["open", "goto", "tab-new"].includes(args[0]) && args[1] && !/^https?:\/\//i.test(args[1]) && args[1] !== "about:blank") throw new Error("Scoped navigation accepts only HTTP(S) or about:blank");
   // Upload is handled by the byte-only receiver; the caller cannot supply host paths.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rechrome",
-  "version": "1.38.3",
+  "version": "1.39.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/snomiao/rechrome.git"
@@ -45,7 +45,8 @@
   "type": "module",
   "scripts": {
     "serve": "bun run rechrome.ts serve",
-    "test": "bun test",
+    "test": "bun test ./*.test.ts ./*.spec.ts ./scripts/*.test.ts",
+    "build-playwright": "bash scripts/build-playwright.sh",
     "vendor-cli": "bash scripts/vendor-cli.sh",
     "prepare": "bash scripts/vendor-cli.sh --prepare",
     "check-pack": "bash scripts/check-pack.sh",

package/rechrome.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env bun
-import { prepareStdinUpload, type UploadPayload } from "./scoped-upload.js";
+import { prepareUpload, UPLOAD_USAGE, MAX_UPLOAD_BYTES, type UploadPayload } from "./scoped-upload.js";
 import { readListeners, writeListeners as writeListenersFile, listenerAddress, isLoopback, normalizePrefix, serviceUrl, allowProfiles, denyProfiles, rotateListenerKey, setPublicUrl, canonicalProfileKeys, planProfileRemoval, type Listener, type ListenerConfig } from "./listeners.js";
 
 import { file } from "bun";
@@ -2177,8 +2177,14 @@ async function run(url: string, args: string[], overrideEnv?: Record<string, str
       process.exit(2);
     }
   } else if (args.find(a => !/^-s=[a-zA-Z0-9_-]{1,64}$/.test(a)) === "upload") {
-    if (process.stdin.isTTY) throw new Error("upload reads stdin; redirect a PNG/SVG file with < icon.png");
-    ({ args, upload } = await prepareStdinUpload(args, process.stdin));
+    if (args.some(a => a === "--help" || a === "-h")) { console.log(UPLOAD_USAGE); process.exit(0); }
+    try {
+      // A path argument is read here; without one the bytes come from stdin (never a terminal).
+      ({ args, upload } = await prepareUpload(args, process.stdin.isTTY ? null : process.stdin));
+    } catch (err) {
+      console.error(`[rech] ${err instanceof Error ? err.message : String(err)}\n${UPLOAD_USAGE}`);
+      process.exit(2);
+    }
   }
   const served = await callServe(url, args, overrideEnv, identity, false, upload, secret);
   // The daemon already masks the value; this is a second line of defence for an older daemon.
@@ -3333,11 +3339,19 @@ async function rotateKey(name: string): Promise<void> {
   console.log(`New key for ${name}; URLs carrying the old key stop working now. Print new ones with: rech share <profile> --listener ${name}`);
 }
 
-async function setListener(name: string, opts: { publicUrl?: string; clearPublicUrl?: boolean }): Promise<void> {
+async function setListener(name: string, opts: { publicUrl?: string; clearPublicUrl?: boolean; uploads?: boolean }): Promise<void> {
   const config = await requireListeners();
-  const listener = setPublicUrl(config, name, opts.clearPublicUrl ? null : opts.publicUrl ?? null);
+  let listener = config.listeners.find(l => l.name === name);
+  if (!listener) throw new Error(`Unknown listener "${name}". See rech listener ls.`);
+  if (opts.publicUrl !== undefined || opts.clearPublicUrl) listener = setPublicUrl(config, name, opts.clearPublicUrl ? null : opts.publicUrl ?? null);
+  if (opts.uploads !== undefined) {
+    if (listener.profiles === "*") throw new Error(`"${name}" is the local management listener: uploads are always on there.`);
+    // {} = the defaults (every supported image type, the full size cap); hand-tuned limits stay.
+    if (opts.uploads) listener.uploads ??= {}; else delete listener.uploads;
+  }
   await writeListeners(config);
-  console.log(listener.publicUrl ? `${name} is reachable at ${listener.publicUrl}` : `${name}: public URL cleared`);
+  if (opts.publicUrl !== undefined || opts.clearPublicUrl) console.log(listener.publicUrl ? `${name} is reachable at ${listener.publicUrl}` : `${name}: public URL cleared`);
+  if (opts.uploads !== undefined) console.log(opts.uploads ? `${name}: uploads on (rech upload <file>; images up to ${(listener.uploads?.maxBytes ?? MAX_UPLOAD_BYTES) / 1024 / 1024} MiB)` : `${name}: uploads off`);
 }
 
 const hideKey = (url: string) => url.replace(/([#&?]key=)[^&]*/, "$1…");
@@ -4325,7 +4339,7 @@ export type RechHandlers = {
   allowListener(name: string, profiles: string[]): Promise<void>;
   denyListener(name: string, profiles: string[]): Promise<void>;
   rotateKey(name: string): Promise<void>;
-  setListener(name: string, opts: { publicUrl?: string; clearPublicUrl?: boolean }): Promise<void>;
+  setListener(name: string, opts: { publicUrl?: string; clearPublicUrl?: boolean; uploads?: boolean }): Promise<void>;
   setup(opts: SetupOptions): Promise<void>;
   tray(action?: string): Promise<void>;
   provisionProfile(name: string, opts: { headed: boolean; experimental: boolean }): Promise<void>;
@@ -4467,12 +4481,13 @@ export function rechCli(argv: string[], handlers: RechHandlers) {
       .command("deny <name> <profiles..>", "Remove profiles from a listener", y => y
         .positional("name", { type: "string", demandOption: true }).positional("profiles", { type: "string", array: true, demandOption: true }),
         a => handlers.denyListener(a.name, a.profiles))
-      .command("set <name>", "Record where a reverse proxy exposes a listener", y => y
+      .command("set <name>", "Record where a reverse proxy exposes a listener, or turn uploads on/off", y => y
         .positional("name", { type: "string", demandOption: true })
         .option("public-url", { type: "string", requiresArg: true, describe: "e.g. https://host.example.js.net/rechrome/" })
         .option("clear-public-url", { type: "boolean", conflicts: "public-url" })
-        .check(a => a.publicUrl !== undefined || a.clearPublicUrl ? true : "Pass --public-url <url> or --clear-public-url"),
-        a => handlers.setListener(a.name, { publicUrl: a.publicUrl, clearPublicUrl: a.clearPublicUrl }))
+        .option("uploads", { type: "boolean", describe: "Let this listener's links upload images (rech upload); --no-uploads turns it off" })
+        .check(a => a.publicUrl !== undefined || a.clearPublicUrl || a.uploads !== undefined ? true : "Pass --public-url <url>, --clear-public-url, or --uploads/--no-uploads"),
+        a => handlers.setListener(a.name, { publicUrl: a.publicUrl, clearPublicUrl: a.clearPublicUrl, ...(a.uploads !== undefined ? { uploads: a.uploads } : {}) }))
       .command("port [name]", "Print a listener's port (for a proxy command)", y => y.positional("name", { type: "string" }),
         a => handlers.listenerPort(a.name))
       .command("rotate-key <name>", "Give a listener a new key (old URLs stop working)", y => y.positional("name", { type: "string", demandOption: true }),

package/rechrome.ts

@@ -1,5 +1,5 @@
 #!/usr/bin/env bun
-import { prepareStdinUpload, type UploadPayload } from "./scoped-upload.ts";
+import { prepareUpload, UPLOAD_USAGE, MAX_UPLOAD_BYTES, type UploadPayload } from "./scoped-upload.ts";
 import { readListeners, writeListeners as writeListenersFile, listenerAddress, isLoopback, normalizePrefix, serviceUrl, allowProfiles, denyProfiles, rotateListenerKey, setPublicUrl, canonicalProfileKeys, planProfileRemoval, type Listener, type ListenerConfig } from "./listeners.ts";
 
 import { file } from "bun";
@@ -2177,8 +2177,14 @@ async function run(url: string, args: string[], overrideEnv?: Record<string, str
       process.exit(2);
     }
   } else if (args.find(a => !/^-s=[a-zA-Z0-9_-]{1,64}$/.test(a)) === "upload") {
-    if (process.stdin.isTTY) throw new Error("upload reads stdin; redirect a PNG/SVG file with < icon.png");
-    ({ args, upload } = await prepareStdinUpload(args, process.stdin));
+    if (args.some(a => a === "--help" || a === "-h")) { console.log(UPLOAD_USAGE); process.exit(0); }
+    try {
+      // A path argument is read here; without one the bytes come from stdin (never a terminal).
+      ({ args, upload } = await prepareUpload(args, process.stdin.isTTY ? null : process.stdin));
+    } catch (err) {
+      console.error(`[rech] ${err instanceof Error ? err.message : String(err)}\n${UPLOAD_USAGE}`);
+      process.exit(2);
+    }
   }
   const served = await callServe(url, args, overrideEnv, identity, false, upload, secret);
   // The daemon already masks the value; this is a second line of defence for an older daemon.
@@ -3333,11 +3339,19 @@ async function rotateKey(name: string): Promise<void> {
   console.log(`New key for ${name}; URLs carrying the old key stop working now. Print new ones with: rech share <profile> --listener ${name}`);
 }
 
-async function setListener(name: string, opts: { publicUrl?: string; clearPublicUrl?: boolean }): Promise<void> {
+async function setListener(name: string, opts: { publicUrl?: string; clearPublicUrl?: boolean; uploads?: boolean }): Promise<void> {
   const config = await requireListeners();
-  const listener = setPublicUrl(config, name, opts.clearPublicUrl ? null : opts.publicUrl ?? null);
+  let listener = config.listeners.find(l => l.name === name);
+  if (!listener) throw new Error(`Unknown listener "${name}". See rech listener ls.`);
+  if (opts.publicUrl !== undefined || opts.clearPublicUrl) listener = setPublicUrl(config, name, opts.clearPublicUrl ? null : opts.publicUrl ?? null);
+  if (opts.uploads !== undefined) {
+    if (listener.profiles === "*") throw new Error(`"${name}" is the local management listener: uploads are always on there.`);
+    // {} = the defaults (every supported image type, the full size cap); hand-tuned limits stay.
+    if (opts.uploads) listener.uploads ??= {}; else delete listener.uploads;
+  }
   await writeListeners(config);
-  console.log(listener.publicUrl ? `${name} is reachable at ${listener.publicUrl}` : `${name}: public URL cleared`);
+  if (opts.publicUrl !== undefined || opts.clearPublicUrl) console.log(listener.publicUrl ? `${name} is reachable at ${listener.publicUrl}` : `${name}: public URL cleared`);
+  if (opts.uploads !== undefined) console.log(opts.uploads ? `${name}: uploads on (rech upload <file>; images up to ${(listener.uploads?.maxBytes ?? MAX_UPLOAD_BYTES) / 1024 / 1024} MiB)` : `${name}: uploads off`);
 }
 
 const hideKey = (url: string) => url.replace(/([#&?]key=)[^&]*/, "$1…");
@@ -4325,7 +4339,7 @@ export type RechHandlers = {
   allowListener(name: string, profiles: string[]): Promise<void>;
   denyListener(name: string, profiles: string[]): Promise<void>;
   rotateKey(name: string): Promise<void>;
-  setListener(name: string, opts: { publicUrl?: string; clearPublicUrl?: boolean }): Promise<void>;
+  setListener(name: string, opts: { publicUrl?: string; clearPublicUrl?: boolean; uploads?: boolean }): Promise<void>;
   setup(opts: SetupOptions): Promise<void>;
   tray(action?: string): Promise<void>;
   provisionProfile(name: string, opts: { headed: boolean; experimental: boolean }): Promise<void>;
@@ -4467,12 +4481,13 @@ export function rechCli(argv: string[], handlers: RechHandlers) {
       .command("deny <name> <profiles..>", "Remove profiles from a listener", y => y
         .positional("name", { type: "string", demandOption: true }).positional("profiles", { type: "string", array: true, demandOption: true }),
         a => handlers.denyListener(a.name, a.profiles))
-      .command("set <name>", "Record where a reverse proxy exposes a listener", y => y
+      .command("set <name>", "Record where a reverse proxy exposes a listener, or turn uploads on/off", y => y
         .positional("name", { type: "string", demandOption: true })
         .option("public-url", { type: "string", requiresArg: true, describe: "e.g. https://host.example.ts.net/rechrome/" })
         .option("clear-public-url", { type: "boolean", conflicts: "public-url" })
-        .check(a => a.publicUrl !== undefined || a.clearPublicUrl ? true : "Pass --public-url <url> or --clear-public-url"),
-        a => handlers.setListener(a.name, { publicUrl: a.publicUrl, clearPublicUrl: a.clearPublicUrl }))
+        .option("uploads", { type: "boolean", describe: "Let this listener's links upload images (rech upload); --no-uploads turns it off" })
+        .check(a => a.publicUrl !== undefined || a.clearPublicUrl || a.uploads !== undefined ? true : "Pass --public-url <url>, --clear-public-url, or --uploads/--no-uploads"),
+        a => handlers.setListener(a.name, { publicUrl: a.publicUrl, clearPublicUrl: a.clearPublicUrl, ...(a.uploads !== undefined ? { uploads: a.uploads } : {}) }))
       .command("port [name]", "Print a listener's port (for a proxy command)", y => y.positional("name", { type: "string" }),
         a => handlers.listenerPort(a.name))
       .command("rotate-key <name>", "Give a listener a new key (old URLs stop working)", y => y.positional("name", { type: "string", demandOption: true }),

package/scoped-upload.js

@@ -2,20 +2,31 @@
 // scoped-upload.ts
 import { createHash, randomBytes } from "crypto";
 import { mkdtemp, writeFile, rm } from "fs/promises";
-import { join } from "path";
+import { basename, join } from "path";
 import { tmpdir } from "os";
-var MAX_UPLOAD_BYTES = 2 * 1024 * 1024;
-var MAX_REQUEST_BYTES = 3 * 1024 * 1024;
-var UPLOAD_TYPES = ["image/png", "image/svg+xml"];
+var MAX_UPLOAD_BYTES = 10 * 1024 * 1024;
+var MAX_REQUEST_BYTES = 14 * 1024 * 1024;
+var UPLOAD_TYPES = ["image/png", "image/jpeg", "image/gif", "image/webp", "image/svg+xml"];
+var EXTENSION_TYPES = { png: "image/png", jpg: "image/jpeg", jpeg: "image/jpeg", gif: "image/gif", webp: "image/webp", svg: "image/svg+xml" };
+var UPLOAD_MODES = ["auto", "chooser", "into", "drop", "paste"];
 function validateUploadPolicy(value) {
   const p = value;
   if (!p || typeof p !== "object" || Array.isArray(p) || Object.keys(p).some((k) => !["maxBytes", "contentTypes"].includes(k)) || p.maxBytes !== undefined && (!Number.isSafeInteger(p.maxBytes) || p.maxBytes < 1 || p.maxBytes > MAX_UPLOAD_BYTES) || p.contentTypes !== undefined && (!Array.isArray(p.contentTypes) || !p.contentTypes.length || p.contentTypes.some((t) => !UPLOAD_TYPES.includes(t))))
-    throw new Error("uploads must be an object with optional maxBytes (1..2097152) and contentTypes (image/png, image/svg+xml)");
+    throw new Error(`uploads must be an object with optional maxBytes (1..${MAX_UPLOAD_BYTES}) and contentTypes (${UPLOAD_TYPES.join(", ")})`);
 }
 function validName(name) {
   return typeof name === "string" && name.length > 0 && name.length <= 128 && name !== "." && name !== ".." && !name.startsWith("-") && !/[\\/:\x00-\x1f\x7f]/.test(name);
 }
+function validTarget(target) {
+  return typeof target === "string" && target.length > 0 && target.length <= 512 && !/[\x00-\x1f\x7f]/.test(target);
+}
 function matchesType(bytes, type) {
+  if (type === "image/jpeg")
+    return bytes.length >= 4 && bytes[0] === 255 && bytes[1] === 216 && bytes[2] === 255;
+  if (type === "image/gif")
+    return bytes.length >= 6 && ["GIF87a", "GIF89a"].includes(bytes.toString("ascii", 0, 6));
+  if (type === "image/webp")
+    return bytes.length >= 12 && bytes.toString("ascii", 0, 4) === "RIFF" && bytes.toString("ascii", 8, 12) === "WEBP";
   if (type === "image/png")
     return bytes.length >= 33 && bytes.subarray(0, 8).equals(Buffer.from([137, 80, 78, 71, 13, 10, 26, 10])) && bytes.readUInt32BE(8) === 13 && bytes.toString("ascii", 12, 16) === "IHDR";
   if (type === "image/svg+xml") {
@@ -32,39 +43,133 @@ function matchesType(bytes, type) {
   }
   return false;
 }
-async function prepareStdinUpload(args, input) {
+var UPLOAD_USAGE = `Usage: rech upload <file> [how]   (the file is read on this machine; only its bytes are sent)
+  (no flag)              the file chooser a click opened, else the page's only <input type=file>
+  --into <ref|selector>  a file input (hidden ones too), or a button that opens a file chooser
+  --drop <ref|selector>  a drag-and-drop zone
+  --paste [ref|selector] an editor that takes pasted images (default: the focused element)
+  --name <file>          read the bytes from stdin instead:  rech upload --name shot.png < shot.png
+Types: ${UPLOAD_TYPES.join(", ")}, up to ${MAX_UPLOAD_BYTES / 1024 / 1024} MiB. Get refs from rech snapshot.`;
+async function prepareUpload(args, stdin, readLocal = (path) => Bun.file(path).bytes()) {
   const sessions = args.filter((a) => /^-s=[a-zA-Z0-9_-]{1,64}$/.test(a));
   const options = args.filter((a) => !sessions.includes(a));
   if (options.shift() !== "upload")
     throw new Error("Expected upload command");
   const fields = {};
+  let path, mode = "auto", target;
+  const setMode = (next) => {
+    if (mode !== "auto")
+      throw new Error(`Pick one of --into, --drop, --paste.`);
+    mode = next;
+  };
   while (options.length) {
     const option = options.shift();
-    const match = option.match(/^--(name|content-type)(?:=(.*))?$/);
-    if (!match || fields[match[1]] !== undefined)
-      throw new Error("Usage: rech upload --name icon.png [--content-type image/png] < icon.png (stdin only; no path argument)");
-    const value = match[2] ?? options.shift();
-    if (!value || value.startsWith("--"))
-      throw new Error(`Missing value for --${match[1]}`);
-    fields[match[1]] = value;
+    const match = option.match(/^--(name|content-type|into|drop|paste|chooser)(?:=(.*))?$/);
+    if (!match) {
+      if (option.startsWith("-") || path !== undefined)
+        throw new Error(path !== undefined ? `One file per upload; unexpected ${option}` : `Unknown option ${option}`);
+      path = option;
+      continue;
+    }
+    const [, flag, inline] = match;
+    if (flag === "chooser") {
+      setMode("chooser");
+      continue;
+    }
+    const value = inline ?? (flag === "paste" && (!options[0] || options[0].startsWith("-")) ? "" : options.shift());
+    if (value === undefined || value === "" && flag !== "paste" || value.startsWith("--"))
+      throw new Error(`Missing value for --${flag}.`);
+    if (flag === "into" || flag === "drop" || flag === "paste") {
+      setMode(flag);
+      if (value)
+        target = value;
+      continue;
+    }
+    if (fields[flag] !== undefined)
+      throw new Error(`--${flag} given twice`);
+    fields[flag] = value;
   }
-  if (!validName(fields.name))
-    throw new Error("upload requires --name with a plain filename (no path)");
-  const contentType = fields["content-type"] ?? (fields.name.toLowerCase().endsWith(".png") ? "image/png" : fields.name.toLowerCase().endsWith(".svg") ? "image/svg+xml" : "");
+  if (target !== undefined && !validTarget(target))
+    throw new Error("Upload target must be a snapshot ref (e12) or a selector");
+  if (path === undefined && !stdin)
+    throw new Error(`upload needs a file.`);
+  const name = fields.name ?? (path !== undefined ? basename(path) : undefined);
+  if (!validName(name))
+    throw new Error(path !== undefined ? "The file name must be a plain name; rename the file or pass --name" : "Reading stdin needs --name with a plain filename (no path)");
+  const contentType = fields["content-type"] ?? EXTENSION_TYPES[name.toLowerCase().split(".").pop() ?? ""] ?? "";
   if (!UPLOAD_TYPES.includes(contentType))
-    throw new Error("Upload content type must be image/png or image/svg+xml");
-  const chunks = [];
-  let size = 0;
-  for await (const chunk of input) {
-    size += chunk.byteLength;
-    if (size > MAX_UPLOAD_BYTES)
-      throw new Error("Upload exceeds 2 MiB");
-    chunks.push(Buffer.from(chunk));
+    throw new Error(`Upload content type must be one of ${UPLOAD_TYPES.join(", ")} (from the file extension, or --content-type)`);
+  let bytes;
+  if (path !== undefined) {
+    bytes = Buffer.from(await readLocal(path).catch((e) => {
+      throw new Error(`Cannot read ${path}: ${e?.code === "ENOENT" ? "no such file" : e?.message ?? e}`);
+    }));
+    if (bytes.length > MAX_UPLOAD_BYTES)
+      throw new Error(`Upload exceeds ${MAX_UPLOAD_BYTES / 1024 / 1024} MiB`);
+  } else {
+    const chunks = [];
+    let size = 0;
+    for await (const chunk of stdin) {
+      size += chunk.byteLength;
+      if (size > MAX_UPLOAD_BYTES)
+        throw new Error(`Upload exceeds ${MAX_UPLOAD_BYTES / 1024 / 1024} MiB`);
+      chunks.push(Buffer.from(chunk));
+    }
+    bytes = Buffer.concat(chunks);
   }
-  const bytes = Buffer.concat(chunks);
   if (!matchesType(bytes, contentType))
-    throw new Error("Upload bytes do not match the content type (PNG or UTF-8 SVG without DTD/entities required)");
-  return { args: ["upload", ...sessions], upload: { name: fields.name, contentType, data: bytes.toString("base64") } };
+    throw new Error(`Upload bytes are not ${contentType} (SVG must be UTF-8 without DTD/entities)`);
+  const upload = { name, contentType, data: bytes.toString("base64") };
+  if (mode !== "auto")
+    upload.mode = mode;
+  if (target !== undefined)
+    upload.target = target;
+  return { args: ["upload", ...sessions], upload };
+}
+var prepareStdinUpload = (args, input) => prepareUpload(args, input, () => Promise.reject(new Error("stdin only")));
+var CLICKED = "rech-upload: clicked, filling the file chooser";
+var locatorFor = (target) => `page.locator(${JSON.stringify(/^(f\d+)?e\d+$/.test(target) ? `aria-ref=${target}` : target)})`;
+function uploadScript(mode, target, file, payload) {
+  const fileJson = JSON.stringify(file);
+  const bytes = `{ data: ${JSON.stringify(payload.data)}, name: ${JSON.stringify(payload.name)}, type: ${JSON.stringify(payload.contentType)} }`;
+  const makeTransfer = `({ data, name, type }) => { const bytes = Uint8Array.from(atob(data), c => c.charCodeAt(0)); const dt = new DataTransfer(); dt.items.add(new File([bytes], name, { type })); return dt; }`;
+  if (mode === "auto")
+    return `async page => {
+  const inputs = page.locator('input[type=file]');
+  const count = await inputs.count();
+  if (count !== 1) throw new Error(count ? count + ' file inputs on this page: pick one with --into <ref>' : 'No file chooser is open and the page has no file input. Name the upload button: rech upload <file> --into <ref>');
+  await inputs.setInputFiles(${fileJson});
+  return "Set on the page's file input";
+}`;
+  if (mode === "into")
+    return `async page => {
+  const target = ${locatorFor(target)};
+  if (await target.evaluate(el => el instanceof HTMLInputElement && el.type === 'file')) {
+    await target.setInputFiles(${fileJson});
+    return 'Set on the file input';
+  }
+  // Not an input: click it. playwright-cli takes the file chooser that opens as its modal state,
+  // which the follow-up \`upload\` fills (see receiveUpload).
+  await target.click();
+  return ${JSON.stringify(CLICKED)};
+}`;
+  if (mode === "drop")
+    return `async page => {
+  const target = ${locatorFor(target)};
+  const transfer = await page.evaluateHandle(${makeTransfer}, ${bytes});
+  for (const type of ['dragenter', 'dragover', 'drop']) await target.dispatchEvent(type, { dataTransfer: transfer });
+  return 'Dropped onto the target';
+}`;
+  return `async page => {
+  ${target ? `const target = ${locatorFor(target)}; await target.focus(); const element = await target.elementHandle();` : `const element = await page.evaluateHandle(() => document.activeElement || document.body);`}
+  const handled = await element.evaluate((el, file) => {
+    const make = ${makeTransfer};
+    const event = new ClipboardEvent('paste', { clipboardData: make(file), bubbles: true, cancelable: true });
+    el.dispatchEvent(event);
+    return event.defaultPrevented;
+  }, ${bytes});
+  return handled ? 'Pasted; the page handled it' : 'Pasted, but nothing on the page handled the paste: try --drop or --into';
+}`;
 }
 function currentPageOrigin(output) {
   const current = output.split(`
@@ -77,6 +182,9 @@ function currentPageOrigin(output) {
     throw new Error("Uploads require an HTTP(S) page");
   return parsed.origin;
 }
+function cleanOutput(text, path, dir, name) {
+  return text.replace(/### Ran Playwright code\n```js\n[\s\S]*?\n```\n*/g, "").replaceAll(path, name).replaceAll(dir, "<upload>");
+}
 async function receiveUpload(options) {
   const record = { name: null, size: null, sha256: null, origin: null, result: "rejected" };
   let dir;
@@ -84,12 +192,14 @@ async function receiveUpload(options) {
     const p = options.payload;
     if (validName(p?.name))
       record.name = p.name;
+    if (UPLOAD_MODES.includes(p?.mode))
+      record.mode = p.mode;
     if (options.policy === undefined)
       throw new Error("Uploads are disabled on this listener");
     validateUploadPolicy(options.policy);
     if (options.args.length !== 1 || options.args[0] !== "upload")
-      throw new Error("Upload takes stdin bytes, not host paths or CLI options");
-    if (!p || !validName(p.name) || typeof p.contentType !== "string" || typeof p.data !== "string" || Object.keys(p).some((k) => !["name", "contentType", "data"].includes(k)))
+      throw new Error("Upload takes file bytes, not host paths or CLI options");
+    if (!p || !validName(p.name) || typeof p.contentType !== "string" || typeof p.data !== "string" || Object.keys(p).some((k) => !["name", "contentType", "data", "mode", "target"].includes(k)) || p.mode !== undefined && !UPLOAD_MODES.includes(p.mode) || p.target !== undefined && !validTarget(p.target) || (p.mode === "into" || p.mode === "drop") && p.target === undefined || (p.mode === "auto" || p.mode === "chooser") && p.target !== undefined)
       throw new Error("Invalid upload payload");
     const limit = options.policy.maxBytes ?? MAX_UPLOAD_BYTES;
     if (p.data.length > 4 * Math.ceil(limit / 3) || /[^A-Za-z0-9+/=]/.test(p.data))
@@ -106,16 +216,31 @@ async function receiveUpload(options) {
       throw new Error("Could not inspect the upload page");
     record.origin = currentPageOrigin(tabs.stdout);
     dir = await mkdtemp(join(tmpdir(), "rech-upload-"));
-    const path = join(dir, randomBytes(16).toString("hex") + (p.contentType === "image/png" ? ".png" : ".svg"));
+    const path = join(dir, p.name);
     await writeFile(path, bytes, { mode: 384, flag: "wx" });
     record.result = "failed";
-    const result = await options.run(["upload", path]);
-    record.result = result.status === 0 && !/^### Error\b/m.test(result.stdout) ? "completed" : "failed";
+    const failed = (r) => r.status !== 0 || /^### Error\b/m.test(r.stdout);
+    const script = async (mode) => {
+      const file = join(dir, randomBytes(8).toString("hex") + ".js");
+      await writeFile(file, uploadScript(mode, p.target, path, p), { mode: 384, flag: "wx" });
+      return options.run(["run-code", "--filename", file]);
+    };
+    const mode = p.mode ?? "auto";
+    let result = mode === "auto" || mode === "chooser" ? await options.run(["upload", path]) : await script(mode);
+    const noChooser = (r) => /No file chooser visible|only be used when there is related modal state/.test(r.stdout + r.stderr);
+    if (mode === "auto" && failed(result) && noChooser(result))
+      result = await script("auto");
+    if (mode === "into" && !failed(result) && result.stdout.match(/^### Result\n(.*)$/m)?.[1]?.includes(CLICKED)) {
+      const filled = await options.run(["upload", path]);
+      result = noChooser(filled) ? { status: 1, stdout: "", stderr: `Clicking ${p.target} opened no file chooser. Point --into at the file input or the button that opens it (see rech snapshot).
+` } : filled;
+    }
+    record.result = failed(result) ? "failed" : "completed";
     return {
       ...result,
       status: record.result === "completed" ? 0 : 1,
-      stdout: result.stdout.replaceAll(path, p.name),
-      stderr: result.stderr.replaceAll(path, p.name)
+      stdout: cleanOutput(result.stdout, path, dir, p.name),
+      stderr: cleanOutput(result.stderr, path, dir, p.name)
     };
   } catch (error) {
     return { status: 1, stdout: "", stderr: (error instanceof Error ? error.message : "Upload failed") + `
@@ -142,7 +267,7 @@ async function readRequestJson(req) {
         break;
       size += value.byteLength;
       if (size > MAX_REQUEST_BYTES)
-        throw new Error("Request exceeds 3 MiB");
+        throw new Error(`Request exceeds ${MAX_REQUEST_BYTES / 1024 / 1024} MiB`);
       chunks.push(value);
     }
   } catch (error) {
@@ -156,10 +281,14 @@ async function readRequestJson(req) {
 export {
   MAX_REQUEST_BYTES,
   MAX_UPLOAD_BYTES,
+  UPLOAD_MODES,
   UPLOAD_TYPES,
+  UPLOAD_USAGE,
   currentPageOrigin,
   prepareStdinUpload,
+  prepareUpload,
   readRequestJson,
   receiveUpload,
+  uploadScript,
   validateUploadPolicy
 };

package/scoped-upload.ts

@@ -1,23 +1,32 @@
 import { createHash, randomBytes } from 'node:crypto';
 import { mkdtemp, writeFile, rm } from 'node:fs/promises';
-import { join } from 'node:path';
+import { basename, join } from 'node:path';
 import { tmpdir } from 'node:os';
 
-export const MAX_UPLOAD_BYTES = 2 * 1024 * 1024;
-// Base64 plus metadata. Bound JSON input before parsing, not just decoded bytes.
-export const MAX_REQUEST_BYTES = 3 * 1024 * 1024;
-export const UPLOAD_TYPES = ['image/png', 'image/svg+xml'] as const;
+export const MAX_UPLOAD_BYTES = 10 * 1024 * 1024;
+// Base64 (4/3) plus metadata. Bound JSON input before parsing, not just decoded bytes.
+export const MAX_REQUEST_BYTES = 14 * 1024 * 1024;
+export const UPLOAD_TYPES = ['image/png', 'image/jpeg', 'image/gif', 'image/webp', 'image/svg+xml'] as const;
+const EXTENSION_TYPES: Record<string, string> = { png: 'image/png', jpg: 'image/jpeg', jpeg: 'image/jpeg', gif: 'image/gif', webp: 'image/webp', svg: 'image/svg+xml' };
+/**
+ * How the file reaches the page. auto: the open file chooser, else the page's only file input.
+ * chooser: the file chooser a previous `rech click` opened. into: a file input (hidden ones too),
+ * or a button that opens a file chooser when clicked. drop: a drag-and-drop zone. paste: an editor
+ * that takes pasted images (the target, else the focused element).
+ */
+export const UPLOAD_MODES = ['auto', 'chooser', 'into', 'drop', 'paste'] as const;
+export type UploadMode = typeof UPLOAD_MODES[number];
 export type UploadPolicy = { maxBytes?: number; contentTypes?: string[] };
-export type UploadPayload = { name: string; contentType: string; data: string };
+export type UploadPayload = { name: string; contentType: string; data: string; mode?: UploadMode; target?: string };
 export type UploadResult = { status: number; stdout: string; stderr: string };
-export type UploadAudit = { name: string | null; size: number | null; sha256: string | null; origin: string | null; result: string };
+export type UploadAudit = { name: string | null; size: number | null; sha256: string | null; origin: string | null; result: string; mode?: UploadMode };
 
 export function validateUploadPolicy(value: unknown): asserts value is UploadPolicy {
   const p = value as UploadPolicy;
   if (!p || typeof p !== 'object' || Array.isArray(p) || Object.keys(p).some(k => !['maxBytes', 'contentTypes'].includes(k))
     || (p.maxBytes !== undefined && (!Number.isSafeInteger(p.maxBytes) || p.maxBytes < 1 || p.maxBytes > MAX_UPLOAD_BYTES))
     || (p.contentTypes !== undefined && (!Array.isArray(p.contentTypes) || !p.contentTypes.length || p.contentTypes.some(t => !UPLOAD_TYPES.includes(t as any)))))
-    throw new Error('uploads must be an object with optional maxBytes (1..2097152) and contentTypes (image/png, image/svg+xml)');
+    throw new Error(`uploads must be an object with optional maxBytes (1..${MAX_UPLOAD_BYTES}) and contentTypes (${UPLOAD_TYPES.join(', ')})`);
 }
 
 function validName(name: unknown): name is string {
@@ -25,7 +34,15 @@ function validName(name: unknown): name is string {
     && name !== '.' && name !== '..' && !name.startsWith('-') && !/[\\/:\x00-\x1f\x7f]/.test(name);
 }
 
+/** A snapshot ref (e12, f1e3) or a selector, the targets `rech click` takes; never a host path. */
+function validTarget(target: unknown): target is string {
+  return typeof target === 'string' && target.length > 0 && target.length <= 512 && !/[\x00-\x1f\x7f]/.test(target);
+}
+
 function matchesType(bytes: Buffer, type: string): boolean {
+  if (type === 'image/jpeg') return bytes.length >= 4 && bytes[0] === 0xff && bytes[1] === 0xd8 && bytes[2] === 0xff;
+  if (type === 'image/gif') return bytes.length >= 6 && ['GIF87a', 'GIF89a'].includes(bytes.toString('ascii', 0, 6));
+  if (type === 'image/webp') return bytes.length >= 12 && bytes.toString('ascii', 0, 4) === 'RIFF' && bytes.toString('ascii', 8, 12) === 'WEBP';
   if (type === 'image/png') return bytes.length >= 33 && bytes.subarray(0, 8).equals(Buffer.from([137,80,78,71,13,10,26,10]))
     && bytes.readUInt32BE(8) === 13 && bytes.toString('ascii', 12, 16) === 'IHDR';
   if (type === 'image/svg+xml') {
@@ -39,32 +56,123 @@ function matchesType(bytes: Buffer, type: string): boolean {
   return false;
 }
 
-export async function prepareStdinUpload(args: string[], input: AsyncIterable<Uint8Array>): Promise<{ args: string[]; upload: UploadPayload }> {
+export const UPLOAD_USAGE = `Usage: rech upload <file> [how]   (the file is read on this machine; only its bytes are sent)
+  (no flag)              the file chooser a click opened, else the page's only <input type=file>
+  --into <ref|selector>  a file input (hidden ones too), or a button that opens a file chooser
+  --drop <ref|selector>  a drag-and-drop zone
+  --paste [ref|selector] an editor that takes pasted images (default: the focused element)
+  --name <file>          read the bytes from stdin instead:  rech upload --name shot.png < shot.png
+Types: ${UPLOAD_TYPES.join(', ')}, up to ${MAX_UPLOAD_BYTES / 1024 / 1024} MiB. Get refs from rech snapshot.`;
+
+/**
+ * Client side of `rech upload`: read the file here (a path argument, or stdin with --name) and
+ * send only its bytes and metadata. The host never sees a client path, and no payload field can
+ * name a host file.
+ */
+export async function prepareUpload(args: string[], stdin: AsyncIterable<Uint8Array> | null, readLocal: (path: string) => Promise<Uint8Array> = path => Bun.file(path).bytes()): Promise<{ args: string[]; upload: UploadPayload }> {
   const sessions = args.filter(a => /^-s=[a-zA-Z0-9_-]{1,64}$/.test(a));
   const options = args.filter(a => !sessions.includes(a));
   if (options.shift() !== 'upload') throw new Error('Expected upload command');
   const fields: Record<string, string> = {};
+  let path: string | undefined, mode: UploadMode = 'auto', target: string | undefined;
+  const setMode = (next: UploadMode) => { if (mode !== 'auto') throw new Error(`Pick one of --into, --drop, --paste.`); mode = next; };
   while (options.length) {
     const option = options.shift()!;
-    const match = option.match(/^--(name|content-type)(?:=(.*))?$/);
-    if (!match || fields[match[1]] !== undefined) throw new Error('Usage: rech upload --name icon.png [--content-type image/png] < icon.png (stdin only; no path argument)');
-    const value = match[2] ?? options.shift();
-    if (!value || value.startsWith('--')) throw new Error(`Missing value for --${match[1]}`);
-    fields[match[1]] = value;
+    const match = option.match(/^--(name|content-type|into|drop|paste|chooser)(?:=(.*))?$/);
+    if (!match) {
+      if (option.startsWith('-') || path !== undefined) throw new Error(path !== undefined ? `One file per upload; unexpected ${option}` : `Unknown option ${option}`);
+      path = option;
+      continue;
+    }
+    const [, flag, inline] = match;
+    if (flag === 'chooser') { setMode('chooser'); continue; }
+    // --paste's target is optional (the focused element); the others need a value.
+    const value = inline ?? (flag === 'paste' && (!options[0] || options[0].startsWith('-')) ? '' : options.shift());
+    if (value === undefined || (value === '' && flag !== 'paste') || value.startsWith('--')) throw new Error(`Missing value for --${flag}.`);
+    if (flag === 'into' || flag === 'drop' || flag === 'paste') { setMode(flag); if (value) target = value; continue; }
+    if (fields[flag] !== undefined) throw new Error(`--${flag} given twice`);
+    fields[flag] = value;
   }
-  if (!validName(fields.name)) throw new Error('upload requires --name with a plain filename (no path)');
-  const contentType = fields['content-type'] ?? (fields.name.toLowerCase().endsWith('.png') ? 'image/png' : fields.name.toLowerCase().endsWith('.svg') ? 'image/svg+xml' : '');
-  if (!UPLOAD_TYPES.includes(contentType as any)) throw new Error('Upload content type must be image/png or image/svg+xml');
-  const chunks: Buffer[] = [];
-  let size = 0;
-  for await (const chunk of input) {
-    size += chunk.byteLength;
-    if (size > MAX_UPLOAD_BYTES) throw new Error('Upload exceeds 2 MiB');
-    chunks.push(Buffer.from(chunk));
+  if (target !== undefined && !validTarget(target)) throw new Error('Upload target must be a snapshot ref (e12) or a selector');
+  if (path === undefined && !stdin) throw new Error(`upload needs a file.`);
+  const name = fields.name ?? (path !== undefined ? basename(path) : undefined);
+  if (!validName(name)) throw new Error(path !== undefined ? 'The file name must be a plain name; rename the file or pass --name' : 'Reading stdin needs --name with a plain filename (no path)');
+  const contentType = fields['content-type'] ?? EXTENSION_TYPES[name.toLowerCase().split('.').pop() ?? ''] ?? '';
+  if (!UPLOAD_TYPES.includes(contentType as any)) throw new Error(`Upload content type must be one of ${UPLOAD_TYPES.join(', ')} (from the file extension, or --content-type)`);
+  let bytes: Buffer;
+  if (path !== undefined) {
+    bytes = Buffer.from(await readLocal(path).catch((e: any) => { throw new Error(`Cannot read ${path}: ${e?.code === 'ENOENT' ? 'no such file' : e?.message ?? e}`); }));
+    if (bytes.length > MAX_UPLOAD_BYTES) throw new Error(`Upload exceeds ${MAX_UPLOAD_BYTES / 1024 / 1024} MiB`);
+  } else {
+    const chunks: Buffer[] = [];
+    let size = 0;
+    for await (const chunk of stdin!) {
+      size += chunk.byteLength;
+      if (size > MAX_UPLOAD_BYTES) throw new Error(`Upload exceeds ${MAX_UPLOAD_BYTES / 1024 / 1024} MiB`);
+      chunks.push(Buffer.from(chunk));
+    }
+    bytes = Buffer.concat(chunks);
   }
-  const bytes = Buffer.concat(chunks);
-  if (!matchesType(bytes, contentType)) throw new Error('Upload bytes do not match the content type (PNG or UTF-8 SVG without DTD/entities required)');
-  return { args: ['upload', ...sessions], upload: { name: fields.name, contentType, data: bytes.toString('base64') } };
+  if (!matchesType(bytes, contentType)) throw new Error(`Upload bytes are not ${contentType} (SVG must be UTF-8 without DTD/entities)`);
+  const upload: UploadPayload = { name, contentType, data: bytes.toString('base64') };
+  if (mode !== 'auto') upload.mode = mode;
+  if (target !== undefined) upload.target = target;
+  return { args: ['upload', ...sessions], upload };
+}
+
+/** @deprecated stdin form only; kept for callers of the old name. */
+export const prepareStdinUpload = (args: string[], input: AsyncIterable<Uint8Array>) => prepareUpload(args, input, () => Promise.reject(new Error('stdin only')));
+
+/** What the `into` script returns after clicking a button that should open a file chooser. */
+const CLICKED = 'rech-upload: clicked, filling the file chooser';
+
+/** The locator a CLI target names, as playwright-cli resolves it: refs use the snapshot's aria-ref engine. */
+const locatorFor = (target: string) => `page.locator(${JSON.stringify(/^(f\d+)?e\d+$/.test(target) ? `aria-ref=${target}` : target)})`;
+
+/**
+ * The run-code script that delivers a staged file for `into`, `drop`, `paste`, or the auto
+ * fallback (`auto`: the page's only file input). Every value is embedded with JSON.stringify,
+ * so neither the target nor the file name can inject code; `file` is a server-owned path.
+ */
+export function uploadScript(mode: Exclude<UploadMode, 'chooser'>, target: string | undefined, file: string, payload: Pick<UploadPayload, 'name' | 'contentType' | 'data'>): string {
+  const fileJson = JSON.stringify(file);
+  // The page gets the bytes as a File, as if the user dragged or pasted it from outside.
+  const bytes = `{ data: ${JSON.stringify(payload.data)}, name: ${JSON.stringify(payload.name)}, type: ${JSON.stringify(payload.contentType)} }`;
+  const makeTransfer = `({ data, name, type }) => { const bytes = Uint8Array.from(atob(data), c => c.charCodeAt(0)); const dt = new DataTransfer(); dt.items.add(new File([bytes], name, { type })); return dt; }`;
+  if (mode === 'auto') return `async page => {
+  const inputs = page.locator('input[type=file]');
+  const count = await inputs.count();
+  if (count !== 1) throw new Error(count ? count + ' file inputs on this page: pick one with --into <ref>' : 'No file chooser is open and the page has no file input. Name the upload button: rech upload <file> --into <ref>');
+  await inputs.setInputFiles(${fileJson});
+  return "Set on the page's file input";
+}`;
+  if (mode === 'into') return `async page => {
+  const target = ${locatorFor(target!)};
+  if (await target.evaluate(el => el instanceof HTMLInputElement && el.type === 'file')) {
+    await target.setInputFiles(${fileJson});
+    return 'Set on the file input';
+  }
+  // Not an input: click it. playwright-cli takes the file chooser that opens as its modal state,
+  // which the follow-up \`upload\` fills (see receiveUpload).
+  await target.click();
+  return ${JSON.stringify(CLICKED)};
+}`;
+  if (mode === 'drop') return `async page => {
+  const target = ${locatorFor(target!)};
+  const transfer = await page.evaluateHandle(${makeTransfer}, ${bytes});
+  for (const type of ['dragenter', 'dragover', 'drop']) await target.dispatchEvent(type, { dataTransfer: transfer });
+  return 'Dropped onto the target';
+}`;
+  return `async page => {
+  ${target ? `const target = ${locatorFor(target)}; await target.focus(); const element = await target.elementHandle();` : `const element = await page.evaluateHandle(() => document.activeElement || document.body);`}
+  const handled = await element.evaluate((el, file) => {
+    const make = ${makeTransfer};
+    const event = new ClipboardEvent('paste', { clipboardData: make(file), bubbles: true, cancelable: true });
+    el.dispatchEvent(event);
+    return event.defaultPrevented;
+  }, ${bytes});
+  return handled ? 'Pasted; the page handled it' : 'Pasted, but nothing on the page handled the paste: try --drop or --into';
+}`;
 }
 
 export function currentPageOrigin(output: string): string {
@@ -76,6 +184,14 @@ export function currentPageOrigin(output: string): string {
   return parsed.origin;
 }
 
+/**
+ * What the client gets back: the original name for the staged file, never the private dir, and
+ * without the echoed script (for drop/paste it embeds the whole file as base64).
+ */
+function cleanOutput(text: string, path: string, dir: string, name: string): string {
+  return text.replace(/### Ran Playwright code\n```js\n[\s\S]*?\n```\n*/g, '').replaceAll(path, name).replaceAll(dir, '<upload>');
+}
+
 /** No payload field is ever used as a host path. run() is a server-owned CLI runner,
  * not caller-supplied code. Audit records the selected origin immediately before upload.
  */
@@ -88,11 +204,15 @@ export async function receiveUpload(options: {
   try {
     const p = options.payload as UploadPayload;
     if (validName(p?.name)) record.name = p.name;
+    if (UPLOAD_MODES.includes(p?.mode as UploadMode)) record.mode = p.mode;
     if (options.policy === undefined) throw new Error('Uploads are disabled on this listener');
     validateUploadPolicy(options.policy);
-    if (options.args.length !== 1 || options.args[0] !== 'upload') throw new Error('Upload takes stdin bytes, not host paths or CLI options');
+    if (options.args.length !== 1 || options.args[0] !== 'upload') throw new Error('Upload takes file bytes, not host paths or CLI options');
     if (!p || !validName(p.name) || typeof p.contentType !== 'string' || typeof p.data !== 'string'
-      || Object.keys(p).some(k => !['name', 'contentType', 'data'].includes(k))) throw new Error('Invalid upload payload');
+      || Object.keys(p).some(k => !['name', 'contentType', 'data', 'mode', 'target'].includes(k))
+      || (p.mode !== undefined && !UPLOAD_MODES.includes(p.mode)) || (p.target !== undefined && !validTarget(p.target))
+      || ((p.mode === 'into' || p.mode === 'drop') && p.target === undefined) || ((p.mode === 'auto' || p.mode === 'chooser') && p.target !== undefined))
+      throw new Error('Invalid upload payload');
     const limit = options.policy.maxBytes ?? MAX_UPLOAD_BYTES;
     if (p.data.length > 4 * Math.ceil(limit / 3) || /[^A-Za-z0-9+/=]/.test(p.data))
       throw new Error('Upload exceeds maxBytes or has invalid base64');
@@ -106,13 +226,32 @@ export async function receiveUpload(options: {
     if (tabs.status !== 0) throw new Error('Could not inspect the upload page');
     record.origin = currentPageOrigin(tabs.stdout);
     dir = await mkdtemp(join(tmpdir(), 'rech-upload-')); // 0700; never served by /files
-    const path = join(dir, randomBytes(16).toString('hex') + (p.contentType === 'image/png' ? '.png' : '.svg'));
+    // The page sees the original name (validName: a plain name, so it stays inside the private dir).
+    const path = join(dir, p.name);
     await writeFile(path, bytes, { mode: 0o600, flag: 'wx' });
     record.result = 'failed';
-    const result = await options.run(['upload', path]);
-    record.result = result.status === 0 && !/^### Error\b/m.test(result.stdout) ? 'completed' : 'failed';
+    const failed = (r: UploadResult) => r.status !== 0 || /^### Error\b/m.test(r.stdout);
+    const script = async (mode: Exclude<UploadMode, 'chooser'>) => {
+      const file = join(dir!, randomBytes(8).toString('hex') + '.js');
+      await writeFile(file, uploadScript(mode, p.target, path, p), { mode: 0o600, flag: 'wx' });
+      return options.run(['run-code', '--filename', file]);
+    };
+    const mode = p.mode ?? 'auto';
+    let result = mode === 'auto' || mode === 'chooser' ? await options.run(['upload', path]) : await script(mode);
+    // No chooser open: the page's only file input, the common case that needs no click at all.
+    // The CLI's wording for "no file chooser is open" (older builds: "No file chooser visible").
+    const noChooser = (r: UploadResult) => /No file chooser visible|only be used when there is related modal state/.test(r.stdout + r.stderr);
+    if (mode === 'auto' && failed(result) && noChooser(result)) result = await script('auto');
+    // The script's return value, not its echoed source (which contains the marker too).
+    if (mode === 'into' && !failed(result) && result.stdout.match(/^### Result\n(.*)$/m)?.[1]?.includes(CLICKED)) {
+      const filled = await options.run(['upload', path]);
+      result = noChooser(filled)
+        ? { status: 1, stdout: '', stderr: `Clicking ${p.target} opened no file chooser. Point --into at the file input or the button that opens it (see rech snapshot).\n` }
+        : filled;
+    }
+    record.result = failed(result) ? 'failed' : 'completed';
     return { ...result, status: record.result === 'completed' ? 0 : 1,
-      stdout: result.stdout.replaceAll(path, p.name), stderr: result.stderr.replaceAll(path, p.name) };
+      stdout: cleanOutput(result.stdout, path, dir, p.name), stderr: cleanOutput(result.stderr, path, dir, p.name) };
   } catch (error) {
     return { status: 1, stdout: '', stderr: (error instanceof Error ? error.message : 'Upload failed') + '\n' };
   } finally {
@@ -131,7 +270,7 @@ export async function readRequestJson(req: Request): Promise<any> {
       const { done, value } = await reader.read();
       if (done) break;
       size += value.byteLength;
-      if (size > MAX_REQUEST_BYTES) throw new Error('Request exceeds 3 MiB');
+      if (size > MAX_REQUEST_BYTES) throw new Error(`Request exceeds ${MAX_REQUEST_BYTES / 1024 / 1024} MiB`);
       chunks.push(value);
     }
   } catch (error) { await reader.cancel().catch(() => {}); throw error; }

package/serve.js

@@ -1038,7 +1038,8 @@ export async function serve() {
       };
       if (filteredArgs[0] === "upload") {
         const result = await receiveUpload({
-          policy: listener.uploads, payload: body.upload, args: filteredArgs,
+          // The management key can already run any code, so uploads need no extra opt-in there.
+          policy: listener.uploads ?? (listener.profiles === "*" ? {} : undefined), payload: body.upload, args: filteredArgs,
           audit: event => log(`upload: ${JSON.stringify({ listener: listener.name, profile: scopedProfile ?? body.identity?.profile ?? null, ...event })}`),
           run: async uploadArgs => {
             const child = Bun.spawn([bin, ...binArgs, ...uploadArgs, `-s=${namespacedSession}`], {
@@ -1048,7 +1049,7 @@ export async function serve() {
             try {
               const result = Promise.all([child.exited, new Response(child.stdout).text(), new Response(child.stderr).text()]);
               const [status, stdout, stderr] = await Promise.race([result, new Promise<never>((_, reject) => {
-                timer = setTimeout(() => { child.kill(); reject(new Error("Upload command timed out")); }, 30_000);
+                timer = setTimeout(() => { child.kill(); reject(new Error("Upload command timed out")); }, 60_000);
               })]);
               return { status, stdout, stderr };
             } finally { clearTimeout(timer); }

package/serve.ts

@@ -1038,7 +1038,8 @@ export async function serve() {
       };
       if (filteredArgs[0] === "upload") {
         const result = await receiveUpload({
-          policy: listener.uploads, payload: body.upload, args: filteredArgs,
+          // The management key can already run any code, so uploads need no extra opt-in there.
+          policy: listener.uploads ?? (listener.profiles === "*" ? {} : undefined), payload: body.upload, args: filteredArgs,
           audit: event => log(`upload: ${JSON.stringify({ listener: listener.name, profile: scopedProfile ?? body.identity?.profile ?? null, ...event })}`),
           run: async uploadArgs => {
             const child = Bun.spawn([bin, ...binArgs, ...uploadArgs, `-s=${namespacedSession}`], {
@@ -1048,7 +1049,7 @@ export async function serve() {
             try {
               const result = Promise.all([child.exited, new Response(child.stdout).text(), new Response(child.stderr).text()]);
               const [status, stdout, stderr] = await Promise.race([result, new Promise<never>((_, reject) => {
-                timer = setTimeout(() => { child.kill(); reject(new Error("Upload command timed out")); }, 30_000);
+                timer = setTimeout(() => { child.kill(); reject(new Error("Upload command timed out")); }, 60_000);
               })]);
               return { status, stdout, stderr };
             } finally { clearTimeout(timer); }