webview-preview 1.2.0 → 1.2.1

package/AGENTS.md

@@ -76,6 +76,12 @@ npx webview-preview /screen <steps to reach it> annotate:review
 
 - It opens a **real window** and **waits for the person** — there is no run limit. Start it in the background (or
   tell the user to run it) and wait for the process to end; do not poll the window.
+- Put the steps that reach the screen (sign-in macro, navigation) **before** `annotate`: after a full reload they run
+  again, so the person does not end up on a sign-in page while you fix things.
+- With `--keep-open` the person sends notes in **rounds** and the process keeps running: each round prints
+  `annotate <name>: sent (round N) · …` and its file paths at once. Watch the process output for these lines (a
+  monitor / tail on its output), fix, and let the person look at the result in the same window (hot reload); the
+  last round says `done` and the process ends.
 - Read the stdout summary first: one line per note with the component, `file:line` and the note's text. The full
   data is in `<prefix>annotate-review.json` next to the snapshots; pictures are `annotate-review.png` (with markers)
   and `annotate-review-e1.png` … (each element). Open a picture only after the JSON.

package/README.md

@@ -303,7 +303,8 @@ the other engines without `headless`.
 | Notes | `N` | The list of notes. It also opens when you pick an element, with the cursor in the note's text. |
 | Freeze | `F` | Counts down 3 s (on the button) — hover what has to stay open meanwhile. Then animations stop and the page no longer hears the mouse leave or focus go (`mouseleave`, `pointerout`, `blur`, `focusout`, mouse moves), so tooltips and menus stay open to be picked. `F` again unfreezes. A menu that closes on a timer or by its own logic can still close. |
 | Key bindings | — | Click an action, press the new key. Saved for the next runs in your user settings (`~/.config/webview-preview/annotate.json` on Linux, `%APPDATA%\webview-preview\` on Windows, `~/Library/Application Support/webview-preview/` on macOS). |
-| Done / Cancel | `Ctrl+Enter` | Done writes the report; Cancel or closing the window ends with nothing. |
+| Done / Cancel | `Ctrl+Enter` | Done writes the report and ends the step (the window closes when the run ends); Cancel or closing the window ends with nothing. |
+| Send | `Ctrl+Enter` | With `--keep-open` only: writes the report for the notes so far right away, clears the panel and **keeps the window open** — keep checking the page while it reloads with your fixes. Done (the tick) then sends what is left and ends. |
 
 - **Click** — a new note; **Shift+click** — adds the element to the open note ("align these two"); clicking an
   element that already has a note opens that note.
@@ -311,12 +312,21 @@ the other engines without `headless`.
 - **Escape** closes the notes card; the notes stay. The **general note** at the bottom is about the whole screen.
 - **Several pages:** go to another screen (turn Pick off, navigate, turn it on) — the notes stay, also when the page
   reloads. Elements are cut out the moment you pick them; coming back to a page shows their markers again.
+- **Full reloads** (a dev server reloading the page after a change, which loses a session kept in memory): the
+  steps before `annotate` run again — sign in, open the screen — then the page goes back to the address you were on
+  and the panel comes back with your notes. Snapshots, `print:` and asserts are not repeated; a replayed step that
+  fails (you were still signed in, say) only prints `replay: …` and does not fail the run.
 - Keys follow the physical key, so they work in any keyboard layout.
 
 ![Two notes: the second one is about two buttons at once and is open in the notes card](assets/readme/annotate-notes.png)
 
 ![Freeze: the tooltip that appears on hover stays open, so it can be picked](assets/readme/annotate-freeze.png)
 
+**One round or many.** By default the window closes after Done. With `--keep-open` (or `annotate: { keepOpen: true }`
+in the config) every Send is a round of its own: the summary is printed and the files are written at once, named
+`annotate-<name>`, then `annotate-<name>-2`, `-3` …; the status says `sent`, the last one `done`. Good for working
+with someone fixing things while you look — the dev server's hot reload shows the fixes in the same window.
+
 **What you get.** A summary on stdout, one line per note:
 
 ```

package/bin/webview-preview.mjs

@@ -80,6 +80,7 @@ Options:
   --init <code>    run code before the page's own scripts, on every load (repeatable)
   --init-file <f>  same, from a file (repeatable)
   --private <css>  annotate: hide these elements' text and pixels in the report too (repeatable)
+  --keep-open      annotate: a Send button reports the notes and keeps the window open for more
   --mock-file <f>  answer fetch/XHR requests from a .json/.mjs file of mocks (repeatable);
                    every request is listed in window.__webviewPreviewRequests
   --log-requests   only list fetch/XHR requests in window.__webviewPreviewRequests
@@ -126,6 +127,10 @@ const parseArgs = argv => {
 			options.headed = true;
 			continue;
 		}
+		if (arg === "--keep-open") {
+			options.keepOpen = true;
+			continue;
+		}
 		if (arg === "--report") {
 			options.report = true;
 			continue;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "webview-preview",
-	"version": "1.2.0",
-	"description": "Open your UI in the engine your desktop app really runs on (WebKitGTK, Edge/WebView2, WebKit), drive it with steps and save PNG snapshots.",
+	"version": "1.2.1",
+	"description": "Check a Tauri or Wails UI in the engine it really runs on — WebKitGTK, Edge (WebView2), WebKit — from the command line: steps, snapshots, baselines, and an annotate window to point at elements and say what to change.",
 	"license": "MIT",
 	"author": "n0t4u404",
 	"repository": {
@@ -14,9 +14,19 @@
 		"webview",
 		"webkitgtk",
 		"webview2",
+		"webkit",
+		"playwright",
 		"screenshot",
 		"visual-testing",
-		"playwright"
+		"visual-regression",
+		"ui-testing",
+		"annotation",
+		"design-review",
+		"developer-tools",
+		"cli",
+		"ai-agents",
+		"react",
+		"vue"
 	],
 	"type": "module",
 	"main": "./src/index.mjs",
@@ -54,5 +64,6 @@
 	},
 	"devDependencies": {
 		"playwright-core": "^1.64.1"
-	}
+	},
+	"homepage": "https://github.com/n0t4u404/webview-preview#readme"
 }

package/src/core/annotate-report.mjs

@@ -40,6 +40,7 @@ export const writeAnnotationReport = ({ annotation, out, prefix, engine, url, ba
 		baseUrl,
 		name: annotation.name,
 		status: annotation.status,
+		round: annotation.round ?? 1,
 		page: {
 			url: result?.url ?? url,
 			route: routeOf(result?.url ?? url, baseUrl),
@@ -58,7 +59,7 @@ export const writeAnnotationReport = ({ annotation, out, prefix, engine, url, ba
 		delete result.url;
 		delete result.viewport;
 	}
-	const base = path.join(out, `${prefix}annotate-${annotation.name}`);
+	const base = path.join(out, `${prefix}annotate-${annotation.name}${annotation.round > 1 ? `-${annotation.round}` : ""}`);
 	writeFileSync(`${base}.md`, markdown(report));
 	delete report.baseUrl;
 	writeFileSync(`${base}.json`, JSON.stringify(report, null, "\t"));

package/src/core/server.mjs

@@ -36,6 +36,16 @@ const stopProcessTree = child => {
 	}
 }
 
+const STOP_TIMEOUT_MS = 3000;
+
+const waitForClose = async (port, host) => {
+	const deadline = Date.now() + STOP_TIMEOUT_MS;
+	while (Date.now() < deadline) {
+		if (!await isPortOpen(port, host)) return;
+		await new Promise(resolve => setTimeout(resolve, 100));
+	}
+}
+
 export const startServer = async server => {
 	if (!server) return () => {}
 	const { command, port, host = "localhost", cwd = process.cwd(), readyTimeoutMs = DEFAULT_READY_TIMEOUT_MS } = server;
@@ -51,12 +61,13 @@ export const startServer = async server => {
 	const stop = () => {
 		running.delete(stop);
 		stopProcessTree(child);
+		return waitForClose(port, host);
 	}
 	running.add(stop);
 	try {
 		await waitForPort(port, host, readyTimeoutMs);
 	} catch (error) {
-		stop();
+		await stop();
 		throw error;
 	}
 	return stop;

package/src/engines/playwright.mjs

@@ -19,7 +19,7 @@ const loadPlaywright = async () => {
 export const runPlaywright = async ({
 	engine, url, steps, init = [], size, locale,
 	colorScheme, isMotionReduced = false, out, prefix, scale,
-	snapMargin = 8, isHeaded = false, waitForTimeoutMs = WAIT_FOR_TIMEOUT_MS, timeoutMs = TIMEOUT_MS, log
+	snapMargin = 8, isHeaded = false, waitForTimeoutMs = WAIT_FOR_TIMEOUT_MS, timeoutMs = TIMEOUT_MS, onAnnotation, log
 }) => {
 	const deadline = timeoutMs > 0 ? Date.now() + timeoutMs : Infinity;
 	const playwright = await loadPlaywright();
@@ -81,51 +81,75 @@ export const runPlaywright = async ({
 			}
 		}
 
+		const report = annotation => {
+			annotations.push(annotation);
+			onAnnotation?.(annotation);
+		}
+
 		const annotate = async step => {
-			const base = `${prefix}annotate-${step.value}`;
-			const images = {}
+			let round = 1;
+			const base = () => `${prefix}annotate-${step.value}${round > 1 ? `-${round}` : ""}`;
+			let images = {}
 			let draft = null;
+			let lastUrl = null;
 			await page.evaluate(step.start);
 			for (;;) {
 				if (page.isClosed()) {
-					annotations.push({ name: step.value, status: "cancelled", result: null });
+					report({ name: step.value, status: "cancelled", result: null, round });
 					return;
 				}
 				if (Date.now() > deadline) {
-					annotations.push({ name: step.value, status: "cancelled", result: null });
+					report({ name: step.value, status: "cancelled", result: null, round });
 					throw new Error(`timed out after ${timeoutMs} ms`);
 				}
 				const text = await page.evaluate(step.check).catch(() => null);
 				const answer = text && text !== "missing" ? JSON.parse(text) : null;
 				if (text === "missing") {
+					for (const earlier of step.replay ?? []) {
+						try {
+							await runStep(earlier);
+						} catch (error) {
+							log.error(`replay: ${error.message.split("\n")[0]}`);
+						}
+					}
+					if (lastUrl && page.url() !== lastUrl) {
+						await page.evaluate(`location.href = ${JSON.stringify(lastUrl)}`).catch(() => undefined);
+						await page.waitForTimeout(JS_SETTLE_MS);
+					}
 					await page.evaluate(`${draft ? `window.${step.restoreKey} = ${JSON.stringify(draft)};` : ""}${step.start}`).catch(() => undefined);
 				} else if (answer?.status === "open") {
+					if (answer.url) lastUrl = answer.url;
 					if (answer.draft) draft = answer.draft;
 					if (answer.captures?.length) {
 						await page.evaluate(step.hide).catch(() => undefined);
 						await page.waitForTimeout(80);
 						for (const capture of answer.captures) {
-							const image = await cutOut(capture.rect, path.join(out, `${base}-${capture.id}.png`));
+							const image = await cutOut(capture.rect, path.join(out, `${base()}-${capture.id}.png`));
 							if (image) images[capture.id] = image;
 						}
 						await page.evaluate(step.show).catch(() => undefined);
 					}
 				} else if (answer) {
-					const annotation = { ...answer, name: step.value, scale: scale ?? 1 }
-					if (annotation.status === "done" && annotation.result) {
-						await page.screenshot({ path: path.join(out, `${base}.png`) });
-						annotation.image = `${base}.png`;
+					const annotation = { ...answer, name: step.value, round, scale: scale ?? 1 }
+					const isSent = annotation.status === "sent";
+					if ((annotation.status === "done" || isSent) && annotation.result) {
+						await page.screenshot({ path: path.join(out, `${base()}.png`) });
+						annotation.image = `${base()}.png`;
 						await page.evaluate(step.cleanup).catch(() => undefined);
 						await page.waitForTimeout(160);
 						for (const [id, element] of Object.entries(annotation.result.elements)) {
 							element.image = element.isLive
-								? await cutOut(element.rect, path.join(out, `${base}-${id}.png`)) ?? images[id] ?? null
+								? await cutOut(element.rect, path.join(out, `${base()}-${id}.png`)) ?? images[id] ?? null
 								: images[id] ?? null;
 						}
-						await page.evaluate(step.dispose).catch(() => undefined);
+						if (!isSent) await page.evaluate(step.dispose).catch(() => undefined);
 					}
-					annotations.push(annotation);
-					return;
+					report(annotation);
+					if (!isSent) return;
+					round += 1;
+					images = {}
+					draft = null;
+					await page.evaluate(step.resume).catch(() => undefined);
 				}
 				await new Promise(resolve => setTimeout(resolve, step.pollMs));
 			}

package/src/engines/webkitgtk.mjs

@@ -13,7 +13,7 @@ export const runWebkitGtk = ({
 	url, steps, init = [], size, colorScheme,
 	isMotionReduced = false, out, prefix, snapMargin = 8,
 	isHeaded = false, isStorageKept = false,
-	waitForTimeoutMs = WAIT_FOR_TIMEOUT_MS, timeoutMs = TIMEOUT_MS, log
+	waitForTimeoutMs = WAIT_FOR_TIMEOUT_MS, timeoutMs = TIMEOUT_MS, onAnnotation, log
 }) => new Promise((resolve, reject) => {
 	if (!isWebkitGtkAvailable()) {
 		reject(new Error("WebKitGTK engine needs Linux with python3-gi and WebKit2 4.1 (gir1.2-webkit2-4.1)"));
@@ -62,7 +62,10 @@ export const runWebkitGtk = ({
 			const value = JSON.parse(line.slice(tab + 1));
 			if (kind === "saved") saved.push(value);
 			else if (kind === "film") films.push(value);
-			else if (kind === "annotate") annotations.push(value);
+			else if (kind === "annotate") {
+				annotations.push(value);
+				onAnnotation?.(value);
+			}
 			else if (kind === "print") log.info(value);
 			else if (kind === "error") log.error(value);
 			else if (kind === "init-errors") reportInitErrors(value, log);

package/src/engines/webkitgtk.py

@@ -119,6 +119,9 @@ def main():
         return False
 
     def step_failed(message):
+        if state.get("replaying"):
+            emit("error", f"replay: {message}")
+            return
         state["failed"] = True
         emit("error", message)
 
@@ -332,9 +335,12 @@ def main():
         GLib.idle_add(run_step)
 
     def annotate(step):
-        base = f"annotate-{step['value']}"
-        images = {}
-        memory = {"draft": None}
+        memory = state.setdefault("annotate_memory", {}).setdefault(
+            step["value"], {"draft": None, "round": 1, "images": {}, "url": None}
+        )
+
+        def base():
+            return f"annotate-{step['value']}" + (f"-{memory['round']}" if memory["round"] > 1 else "")
 
         def later(callback, ms):
             GLib.timeout_add(ms, lambda: (callback(), False)[1])
@@ -347,45 +353,65 @@ def main():
             code = (f"window.{step['restoreKey']} = {json.dumps(draft)};" if draft else "") + step["start"]
             evaluate(code, lambda _: again(), lambda _: again())
 
+        def replay():
+            resume = {**step, "isResume": True}
+            steps[state["index"]:state["index"]] = [*step["replay"], resume]
+            state["replaying"] = True
+            next_step()
+
+        def go_back_then_restart():
+            url = memory["url"]
+            if not url:
+                return restart()
+            code = f"if (location.href !== {json.dumps(url)}) location.href = {json.dumps(url)};"
+            evaluate(code, lambda _: later(restart, args.js_settle_ms), lambda _: restart())
+
         def grab(captures):
             def shoot():
                 for capture in captures:
-                    path = crop(f"{base}-{capture['id']}", capture["rect"], False)
+                    path = crop(f"{base()}-{capture['id']}", capture["rect"], False)
                     if path:
-                        images[capture["id"]] = os.path.basename(path)
+                        memory["images"][capture["id"]] = os.path.basename(path)
                 evaluate(step["show"], lambda _: again(), lambda _: again())
 
             evaluate(step["hide"], lambda _: later(shoot, ANNOTATE_SETTLE_MS), lambda _: shoot())
 
         def finish_annotate(answer):
-            state["annotating"] = None
+            is_sent = answer.get("status") == "sent"
+            if not is_sent:
+                state["annotating"] = None
             result = answer.get("result")
             width = view.get_allocated_width()
-            answer.update(name=step["value"], scale=full_pixbuf().get_width() / width if width else 1)
-            if answer.get("status") != "done" or not result:
+            answer.update(name=step["value"], round=memory["round"], scale=full_pixbuf().get_width() / width if width else 1)
+            if answer.get("status") not in ("done", "sent") or not result:
                 emit("annotate", answer)
                 return next_step()
-            save(base, full_pixbuf(), False)
-            answer["image"] = f"{args.prefix}{base}.png"
+            save(base(), full_pixbuf(), False)
+            answer["image"] = f"{args.prefix}{base()}.png"
 
             def crops():
                 for element_id, element in result["elements"].items():
-                    path = crop(f"{base}-{element_id}", element["rect"], False) if element.get("isLive") else None
-                    element["image"] = os.path.basename(path) if path else images.get(element_id)
+                    path = crop(f"{base()}-{element_id}", element["rect"], False) if element.get("isLive") else None
+                    element["image"] = os.path.basename(path) if path else memory["images"].get(element_id)
                 emit("annotate", answer)
-                evaluate(step["dispose"], lambda _: next_step(), lambda _: next_step())
+                if not is_sent:
+                    return evaluate(step["dispose"], lambda _: next_step(), lambda _: next_step())
+                memory.update(draft=None, images={}, round=memory["round"] + 1)
+                evaluate(step["resume"], lambda _: again(), lambda _: again())
 
             evaluate(step["cleanup"], lambda _: later(crops, ANNOTATE_SETTLE_MS * 2), lambda _: crops())
 
         def poll():
             def on_value(text):
                 if text == "missing":
-                    return restart()
+                    return replay() if step.get("replay") else restart()
                 if not text or text == "null":
                     return again()
                 answer = json.loads(text)
                 if answer.get("status") != "open":
                     return finish_annotate(answer)
+                if answer.get("url"):
+                    memory["url"] = answer["url"]
                 if answer.get("draft"):
                     memory["draft"] = answer["draft"]
                 if answer.get("captures"):
@@ -395,6 +421,9 @@ def main():
             evaluate(step["check"], on_value, lambda _: again())
 
         state["annotating"] = step["value"]
+        if step.get("isResume"):
+            state["replaying"] = False
+            return go_back_then_restart()
         evaluate(step["start"], lambda _: poll(), lambda error: (step_failed(f"annotate failed: {error}"), next_step()))
 
     def run_step():
@@ -500,6 +529,13 @@ def main():
 
     sys.stdout.flush()
     sys.stderr.flush()
+    try:
+        view.terminate_web_process()
+        window.destroy()
+        while Gtk.events_pending():
+            Gtk.main_iteration_do(False)
+    except Exception:
+        pass
     os._exit(1 if state["failed"] else 0)
 
 

package/src/index.d.ts

@@ -66,7 +66,7 @@ export interface PreviewConfig {
 	globals?: Record<string, unknown>;
 	locale?: string;
 	macros?: Record<string, Step[] | string[]>;
-	annotate?: { private?: string[] }
+	annotate?: { private?: string[]; keepOpen?: boolean }
 	failOnError?: boolean;
 }
 
@@ -93,6 +93,7 @@ export type InitEntry = string | { file: string }
 
 export interface PreviewOptions extends PreviewConfig {
 	private?: string | string[];
+	keepOpen?: boolean;
 	target?: string;
 	steps?: Step[] | string[];
 	initFile?: string | string[];
@@ -136,7 +137,8 @@ export interface AnnotationElement {
 export interface Annotation {
 	version: 1;
 	name: string;
-	status: "done" | "cancelled";
+	status: "done" | "sent" | "cancelled";
+	round: number;
 	page: { url: string; route: string; engine: Exclude<Engine, "auto">; size: { width: number; height: number }; scale: number; takenAt: string }
 	image: string | null;
 	notes: { id: number; text: string; elements: string[]; url: string; isFrozen: boolean }[];

package/src/index.mjs

@@ -74,7 +74,14 @@ export const preview = async (options = {}) => {
 	const parsedSteps = parseSteps(expandMacros(merged.steps.length ? merged.steps : DEFAULTS.steps, macros));
 	const savedKeys = parsedSteps.some(step => step.kind === "annotate") ? loadAnnotateKeys() : null;
 	const privateSelectors = [...(config.annotate?.private ?? []), ...[].concat(options.private ?? [])].map(String);
-	const steps = parsedSteps.map(step => step.kind === "annotate" ? annotateStep(step.value, savedKeys, privateSelectors) : step);
+	const keepOpen = !!(options.keepOpen ?? config.annotate?.keepOpen);
+	const REPLAYED = new Set(["js", "jsnow", "wait", "waitfor", "key", "type", "hover", "click", "offline", "online", "latency"]);
+	const steps = parsedSteps.map((step, index) => step.kind === "annotate"
+		? {
+			...annotateStep(step.value, savedKeys, privateSelectors, keepOpen),
+			replay: parsedSteps.slice(0, index).filter(earlier => REPLAYED.has(earlier.kind) && !earlier.assert).map(earlier => ({ ...earlier, isReplay: true }))
+		}
+		: step);
 	const out = path.resolve(baseDir, merged.out);
 	const url = resolveUrl(merged.target ?? merged.url ?? "/", merged.baseUrl);
 	const sizes = parseSizes(merged.size);
@@ -134,6 +141,31 @@ export const preview = async (options = {}) => {
 		const hasAnnotate = steps.some(step => step.kind === "annotate");
 		for (const size of sizes) {
 			if (sizes.length > 1) output.log.info(`size ${size}`);
+			const reports = [];
+			const handleAnnotation = async annotation => {
+				try {
+					await resolveSources(annotation, baseDir);
+				} catch (error) {
+					output.log.error(`annotate: source files not resolved — ${error.message}`);
+				}
+				if (annotation.keys) {
+					try {
+						output.log.info(`annotate keys saved → ${saveAnnotateKeys(annotation.keys)}`);
+					} catch (error) {
+						output.log.error(`annotate: keys not saved — ${error.message}`);
+					}
+				}
+				delete annotation.keys;
+				for (const line of formatAnnotation(annotation)) output.log.info(line);
+				if (annotation.status !== "done" && annotation.status !== "sent") {
+					result.annotations.push(annotation);
+					return;
+				}
+				const files = writeAnnotationReport({ annotation, out, prefix: sizes.length > 1 ? `${prefix}${size}-` : prefix, engine, url, baseUrl: merged.baseUrl, size: parseSize(size) });
+				output.log.info(`  → ${files.json}`);
+				output.log.info(`  → ${files.markdown}`);
+				result.annotations.push(files.report);
+			}
 			const run = await runEngine(engine, {
 				url,
 				steps: [...steps, consoleStep],
@@ -149,34 +181,14 @@ export const preview = async (options = {}) => {
 				isHeaded: merged.headed === undefined ? hasAnnotate : !!merged.headed,
 				isStorageKept: !!merged.keepStorage,
 				waitForTimeoutMs: Number(merged.waitTimeout ?? 10000),
+				onAnnotation: annotation => reports.push(handleAnnotation(annotation)),
 				timeoutMs: merged.timeout !== undefined ? Number(merged.timeout)
 					: hasAnnotate ? 0
 						: runTimeoutMs([...steps, consoleStep], Number(merged.waitTimeout ?? 10000)),
 				log: output.log
 			});
 			result.saved.push(...run.saved);
-			for (const annotation of run.annotations ?? []) {
-				try {
-					await resolveSources(annotation, baseDir);
-				} catch (error) {
-					output.log.error(`annotate: source files not resolved — ${error.message}`);
-				}
-				if (annotation.keys) {
-					try {
-						output.log.info(`annotate keys saved → ${saveAnnotateKeys(annotation.keys)}`);
-					} catch (error) {
-						output.log.error(`annotate: keys not saved — ${error.message}`);
-					}
-				}
-				delete annotation.keys;
-				for (const line of formatAnnotation(annotation)) output.log.info(line);
-				if (annotation.status === "done") {
-					const files = writeAnnotationReport({ annotation, out, prefix: sizes.length > 1 ? `${prefix}${size}-` : prefix, engine, url, baseUrl: merged.baseUrl, size: parseSize(size) });
-					output.log.info(`  → ${files.json}`);
-					output.log.info(`  → ${files.markdown}`);
-					result.annotations.push(files.report);
-				} else result.annotations.push(annotation);
-			}
+			await Promise.all(reports);
 			for (const film of run.films ?? []) {
 				try {
 					output.log.info(stitchFilm(film, snapMargin));
@@ -207,7 +219,7 @@ export const preview = async (options = {}) => {
 		if (report) baseLog.info(`report → ${report}`);
 		return { engine, url, sizes, ...result, consoleErrors, failedAsserts, report, failed }
 	} finally {
-		stopServer();
+		await stopServer();
 	}
 }
 

package/src/page/annotate/format.mjs

@@ -1,9 +1,10 @@
 export const formatAnnotation = annotation => {
 	const lines = [];
 	const { name, status, result } = annotation;
-	if (status !== "done" || !result) return [`annotate ${name}: cancelled`];
+	if ((status !== "done" && status !== "sent") || !result) return [`annotate ${name}: cancelled`];
 	const elementCount = Object.keys(result.elements).length;
-	lines.push(`annotate ${name}: done · ${result.notes.length} note(s) · ${elementCount} element(s)${result.generalNote ? " · 1 general note" : ""}${result.maskedCount ? ` · ${result.maskedCount} private element(s) hidden` : ""}`);
+	const round = annotation.round > 1 || status === "sent" ? ` (round ${annotation.round ?? 1})` : "";
+	lines.push(`annotate ${name}: ${status}${round} · ${result.notes.length} note(s) · ${elementCount} element(s)${result.generalNote ? " · 1 general note" : ""}${result.maskedCount ? ` · ${result.maskedCount} private element(s) hidden` : ""}`);
 	for (const note of result.notes) {
 		const targets = note.elements.map(id => {
 			const element = result.elements[id];

package/src/page/annotate/icons.mjs

@@ -7,6 +7,7 @@ export const ICONS = {
 	freeze: icon("<path d='m10 20-1.25-2.5L6 18'/><path d='M10 4 8.75 6.5 6 6'/><path d='m14 20 1.25-2.5L18 18'/><path d='m14 4 1.25 2.5L18 6'/><path d='m17 21-3-6h-4'/><path d='m17 3-3 6 1.5 3'/><path d='M2 12h6.5L10 9'/><path d='m20 10-1.5 2 1.5 2'/><path d='M22 12h-6.5L14 15'/><path d='m4 10 1.5 2L4 14'/><path d='m7 21 3-6-1.5-3'/><path d='m7 3 3 6h4'/>"),
 	notes: icon("<path d='M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z'/><path d='M7 11h10'/><path d='M7 15h6'/><path d='M7 7h8'/>"),
 	keys: icon("<path d='M10 8h.01'/><path d='M12 12h.01'/><path d='M14 8h.01'/><path d='M16 12h.01'/><path d='M18 8h.01'/><path d='M6 8h.01'/><path d='M7 16h10'/><path d='M8 12h.01'/><rect width='20' height='16' x='2' y='4' rx='2'/>"),
+	send: icon("<path d='M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z'/><path d='m21.854 2.147-10.94 10.939'/>"),
 	done: icon("<path d='M20 6 9 17l-5-5'/>"),
 	cancel: icon("<path d='M18 6 6 18'/><path d='m6 6 12 12'/>")
 }

package/src/page/annotate/index.mjs

@@ -14,7 +14,7 @@ export const ANNOTATE_KEY = "__webviewPreviewAnnotate";
 export const ANNOTATE_POLL_MS = 250;
 export const ANNOTATE_CLEANUP = `window.${ANNOTATE_KEY}?.cleanup?.()`;
 
-export const annotateStart = (name, keys = null, privateSelectors = []) => `(${annotatePanel})(${JSON.stringify({ key: ANNOTATE_KEY, name, markup: MARKUP, styles: STYLES, icons: ICONS })}, {
+export const annotateStart = (name, keys = null, privateSelectors = [], keepOpen = false) => `(${annotatePanel})(${JSON.stringify({ key: ANNOTATE_KEY, name, markup: MARKUP, styles: STYLES, icons: ICONS, keepOpen })}, {
 	keys: (${pageKeys})(${JSON.stringify(keys)}),
 	selectors: (${pageSelectors})(${JSON.stringify(privateSelectors)}),
 	react: (${pageReact})(),
@@ -29,17 +29,19 @@ export const ANNOTATE_CHECK = `(() => {
 		const draft = state.version !== state.sentVersion ? (state.sentVersion = state.version, state.draft()) : null;
 		const captures = state.captures.splice(0);
 		if (captures.length) state.capturing = captures;
-		return draft || captures.length ? JSON.stringify({ status: "open", draft, captures }) : null;
+		const url = location.href !== state.sentUrl ? (state.sentUrl = location.href) : null;
+		return draft || captures.length || url ? JSON.stringify({ status: "open", draft, captures, url }) : null;
 	}
 	return JSON.stringify({ status: state.status, result: state.result, keys: state.keys });
 })()`;
 
 export const annotateRestore = draft => `window.${ANNOTATE_KEY}Draft = ${JSON.stringify(draft)};`;
 
-export const annotateStep = (name, keys, privateSelectors = []) => ({
+export const annotateStep = (name, keys, privateSelectors = [], keepOpen = false) => ({
 	kind: "annotate",
 	value: name,
-	start: annotateStart(name, keys, privateSelectors),
+	start: annotateStart(name, keys, privateSelectors, keepOpen),
+	resume: `window.${ANNOTATE_KEY}?.resume?.()`,
 	check: ANNOTATE_CHECK,
 	hide: `window.${ANNOTATE_KEY}?.setHidden?.(true)`,
 	show: `window.${ANNOTATE_KEY}?.setHidden?.(false)`,

package/src/page/annotate/keys.mjs

@@ -7,7 +7,7 @@ export function pageKeys(saved) {
 		["toggle", "Show / hide tools"],
 		["parent", "Outline the parent"],
 		["child", "Back to the child"],
-		["done", "Done"]
+		["done", "Done (Send with --keep-open)"]
 	];
 	const bindings = { ...DEFAULT_KEYS, ...(saved ?? {}) }
 

package/src/page/annotate/markup.mjs

@@ -16,6 +16,7 @@ export const MARKUP = `
 				<button type="button" class="tool freeze" data-action="freeze" data-tip="Freeze">${ICONS.freeze}<span class="badge freeze-badge"></span></button>
 				<button type="button" class="tool keys" data-tip="Key bindings">${ICONS.keys}</button>
 				<div class="divider"></div>
+				<button type="button" class="tool accent send" data-action="done" data-tip="Send the notes — the window stays open" hidden>${ICONS.send}</button>
 				<button type="button" class="tool accent done" data-action="done" data-tip="Done">${ICONS.done}</button>
 				<button type="button" class="tool cancel" data-tip="Cancel">${ICONS.cancel}</button>
 			</div></div></div>

package/src/page/annotate/panel.mjs

@@ -1,4 +1,4 @@
-export function annotatePanel({ key, name, markup, styles, icons: ICONS }, { keys, selectors, react, vue, dom }) {
+export function annotatePanel({ key, name, markup, styles, icons: ICONS, keepOpen = false }, { keys, selectors, react, vue, dom }) {
 	const { DEFAULT_KEYS, KEY_ACTIONS, bindings, showKey, comboOf, actionFor } = keys;
 	const { textOf, describe, shortName, buildSelector, lookOf, isPrivate, privateElements } = selectors;
 	const componentOf = element => react.componentOf(element) ?? vue.componentOf(element);
@@ -300,6 +300,7 @@ export function annotatePanel({ key, name, markup, styles, icons: ICONS }, { key
 	}
 
 	const pick = (element, isAdding) => {
+		if (state.status !== "open") return;
 		hovered = null;
 		showOutline(null);
 		const id = elementId(element);
@@ -336,6 +337,7 @@ export function annotatePanel({ key, name, markup, styles, icons: ICONS }, { key
 		const action = button.dataset.action;
 		if (action === "toggle") return isCollapsed ? "Show tools" : "Hide tools";
 		if (action === "pick") return isPicking ? "Pick elements — on" : "Pick elements — off";
+		if (button.classList.contains("done") && keepOpen) return "Finish — sends what is left and closes the window";
 		if (action === "freeze") return isFrozen ? "Unfreeze" : freezeTimer ? "Freezing… press again to stop" : `Freeze in ${FREEZE_SECONDS} s — hover what has to stay open`;
 		return button.dataset.tip;
 	}
@@ -344,7 +346,7 @@ export function annotatePanel({ key, name, markup, styles, icons: ICONS }, { key
 		const action = button.dataset.action;
 		tip.replaceChildren();
 		tip.append(tipText(button));
-		if (action && bindings[action]) {
+		if (action && bindings[action] && !(keepOpen && button.classList.contains("done"))) {
 			const shortcut = document.createElement("kbd");
 			shortcut.textContent = showKey(bindings[action]);
 			tip.append(shortcut);
@@ -380,7 +382,7 @@ export function annotatePanel({ key, name, markup, styles, icons: ICONS }, { key
 			["Shift+click", "add to the open note"],
 			[`Alt+wheel, ${showKey(bindings.parent)} ${showKey(bindings.child)}`, "parent / child"],
 			[showKey(bindings.pick), "pick on / off"],
-			[showKey(bindings.done), "done"]
+			[showKey(bindings.done), keepOpen ? "send" : "done"]
 		];
 		parts.forEach(([keys, text], index) => {
 			const shortcut = document.createElement("kbd");
@@ -559,7 +561,7 @@ export function annotatePanel({ key, name, markup, styles, icons: ICONS }, { key
 	}
 
 	const run = action => {
-		if (action === "done") finish("done");
+		if (action === "done") keepOpen ? send() : finish("done");
 		else if (action === "freeze") toggleFreeze();
 		else if (action === "pick") setPicking(!isPicking);
 		else if (action === "toggle") setCollapsed(!isCollapsed);
@@ -576,6 +578,7 @@ export function annotatePanel({ key, name, markup, styles, icons: ICONS }, { key
 	}
 
 	const onKey = event => {
+		if (state.status !== "open") return;
 		const fromUs = isOurs(event);
 		const combo = comboOf(event);
 		if (listeningFor) {
@@ -645,6 +648,45 @@ export function annotatePanel({ key, name, markup, styles, icons: ICONS }, { key
 		frame = requestAnimationFrame(tick);
 	}
 
+	const send = () => {
+		if (state.status !== "open" || (notes.length === 0 && !general.value.trim())) return;
+		setFrozen(false);
+		try {
+			state.result = collect();
+		} catch (error) {
+			state.result = { notes: [], generalNote: general.value.trim() || null, url: location.href, viewport: { width: innerWidth, height: innerHeight }, elements: {}, error: String(error) }
+		}
+		state.status = "sent";
+		activeNote = null;
+		syncMasks();
+		drawMasks();
+		drawPicks();
+		for (const part of [dock, tip, outline]) part.style.display = "none";
+		state.cleanup = () => {
+			picks.style.display = "none";
+		}
+		state.resume = () => {
+			notes.length = 0;
+			records.clear();
+			for (const entry of markers.values()) {
+				entry.box.remove();
+				entry.marker.remove();
+			}
+			markers.clear();
+			pending.clear();
+			nextElement = 1;
+			nextNote = 1;
+			general.value = "";
+			picks.style.display = "";
+			for (const part of [dock, tip, outline]) part.style.display = "";
+			state.result = null;
+			state.status = "open";
+			changed();
+			showSheet(null);
+			update();
+		}
+	}
+
 	const finish = status => {
 		if (state.status !== "open") return;
 		setFrozen(false);
@@ -681,7 +723,9 @@ export function annotatePanel({ key, name, markup, styles, icons: ICONS }, { key
 	freezeButton.addEventListener("click", () => run("freeze"));
 	toggleButton.addEventListener("click", () => run("toggle"));
 	keysButton.addEventListener("click", () => showSheet(openSheet === "keys" ? null : "keys"));
-	$(".done").addEventListener("click", () => run("done"));
+	$(".done").addEventListener("click", () => finish("done"));
+	$(".send").addEventListener("click", () => send());
+	$(".send").hidden = !keepOpen;
 	$(".cancel").addEventListener("click", () => finish("cancelled"));
 	$(".reset-keys").addEventListener("click", () => {
 		Object.assign(bindings, DEFAULT_KEYS);

package/src/page/annotate/styles.mjs

@@ -29,12 +29,14 @@ export const STYLES = `
 	button { font: inherit; color: inherit }
 	.tool { position: relative; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: #939393; background: none; border: none; border-radius: 8px; cursor: pointer; transition: color 0.2s ease-out, background-color 0.2s ease-out }
 	.tool:hover { color: #ffffff }
+	.tool[hidden] { display: none }
 	.tool[aria-pressed="true"] { color: #ffffff; background: rgba(255, 255, 255, 0.08) }
 	.tool.accent { color: #0a77ff }
 	.tool.accent:hover { color: #3d95ff }
 	.tool[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed }
 	.tool[aria-disabled="true"]:hover { color: #939393 }
-	.tool:focus-visible, .button:focus-visible, .kbd:focus-visible, textarea:focus-visible { outline: none; box-shadow: 0 0 0 2px #0a0a0a, 0 0 0 4px #0a77ff }
+	.tool:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #0a77ff }
+	.button:focus-visible, .kbd:focus-visible, textarea:focus-visible { outline: none; box-shadow: 0 0 0 2px #0a0a0a, 0 0 0 4px #0a77ff }
 	.tip { position: fixed; z-index: 2; padding: 4px 8px; border-radius: 8px; background: #111111; border: 1px solid rgba(255, 255, 255, 0.05); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); white-space: nowrap; font-size: 12px; pointer-events: none; display: none }
 	.tip kbd { margin-left: 8px; color: #939393; font: 11px ui-monospace, monospace }
 	.sheet { width: 300px; max-width: calc(100vw - 72px); max-height: calc(100vh - 16px); overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; transition: opacity 0.2s ease-out, transform 0.2s ease-out }