redpencil 0.1.0__tar.gz

redpencil-0.1.0/.github/workflows/tests.yml

@@ -0,0 +1,19 @@
+name: tests
+
+on:
+  push:
+  pull_request:
+
+jobs:
+  e2e:
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+    steps:
+      - uses: actions/checkout@v4
+      - uses: astral-sh/setup-uv@v6
+        with:
+          python-version: "3.12"
+      - name: Chromium
+        run: uv run --no-project --with playwright playwright install --with-deps chromium
+      - name: Tests
+        run: uv run --no-project --with pytest --with playwright pytest -q tests

redpencil-0.1.0/.gitignore

@@ -0,0 +1,12 @@
+.review/
+dist/
+__pycache__/
+.pytest_cache/
+.DS_Store
+# local only: notes in Italian with client names, real reports, personal paths
+AGENTS.md
+esempi/
+docs/*
+!docs/img/
+docs/img/*
+!docs/img/demo.gif

redpencil-0.1.0/CHANGELOG.md

@@ -0,0 +1,18 @@
+# Changelog
+
+## 0.1.0
+
+First release.
+
+- Comment on a page in the browser: selected text, a spot (right-click) or a
+  box dragged over the page, with a screenshot of it through the extension.
+- ▷ sends the comments to your agent session waiting with `--wait`, or to a
+  background agent (`--agent claude|codex|opencode`).
+- The page updates live while the agent works, without losing what you are
+  typing; left alone when a dev server with live reload already does it.
+- Whole sites (`--site`, `--source`) through the Chrome extension or a
+  snippet, with comments kept per page.
+- `--wait` starts the review server when it isn't running; a server started
+  this way stops after 15 minutes nobody uses it.
+- `--prompt`, `--work`, `--skill` to fit the background agent to a project.
+- Panel in English, or Italian with `--lang it`.

redpencil-0.1.0/LICENSE

@@ -0,0 +1,23 @@
+MIT License
+
+Copyright (c) 2026 the redpencil authors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+The panel's icons come from Lucide (https://lucide.dev), ISC License.

redpencil-0.1.0/PKG-INFO

@@ -0,0 +1,139 @@
+Metadata-Version: 2.5
+Name: redpencil
+Version: 0.1.0
+Summary: Review an html page or a site in the browser: comment on it, and your coding agent fixes it while you watch.
+Project-URL: Homepage, https://github.com/zupolgec/redpencil
+Project-URL: Issues, https://github.com/zupolgec/redpencil/issues
+License-Expression: MIT
+License-File: LICENSE
+Requires-Python: >=3.10
+Description-Content-Type: text/markdown
+
+# redpencil
+
+Review a page your coding agent made, right in the browser. Select some text,
+or right-click a spot, or drag a box over the page, and write what's wrong.
+Press ▷ and the comments go back to your agent session, which fixes them while
+the page updates in front of you, without losing what you are typing or where
+you are.
+
+![A comment on a page, ▷, and the agent fixes it while you watch](https://raw.githubusercontent.com/zupolgec/redpencil/main/docs/img/demo.gif)
+
+Works with a single html file (a report, a mockup), a folder of pages, or a
+whole site served by something else (Laravel Herd, a dev server, a staging
+site). No dependencies: one Python file (standard library only) and one
+JavaScript file.
+
+## Quick start
+
+Ask your agent session (Claude Code, Codex, opencode...) to run, in the
+background:
+
+    uvx redpencil report.html --open --wait
+
+It starts the review server, opens the page in your browser and waits. When
+you press ▷ it returns, printing the comments and how to record the outcome of
+each one; your agent works on them and runs the same command again for the
+next round.
+
+The server stops by itself after 15 minutes nobody uses it (no page open, no
+session waiting; `--idle N` to change it). The panel then says so, and asking
+your agent to open the review again brings it back: the page reconnects by
+itself. You can also start the server alone, without `--wait`, and leave it
+running. Every comment shows its state in the panel (queued, working, done,
+answered) and the agent's reply.
+
+(Or, from the repository: `uvx --from git+https://github.com/zupolgec/redpencil redpencil ...`.)
+
+## A whole site
+
+    redpencil --site https://my-site.test --source ~/code/my-site --wait
+
+The panel reaches the site in one of two ways:
+
+- **Chrome extension** (`extension/`): open `chrome://extensions`, turn on
+  developer mode, "Load unpacked", pick the `extension` folder
+  (`scripts/build_extension.py` makes the zip for the Chrome Web Store). On the site,
+  click the extension's icon once: from then on its pages show the panel
+  whenever a review of that site is running.
+- **Snippet**: add the `<script>` printed at start to your layout.
+
+Comments are kept per page, and the panel lists the open ones on the other
+pages. Your agent edits the source (templates, content, styles); the page
+updates by itself, or is left alone when a dev server with live reload (Vite,
+Next) already does it.
+
+With the extension you can drag a box over the page and a screenshot of it
+goes with the comment.
+
+## Without an agent session
+
+Start the server with `--agent` and ▷ runs a background agent instead:
+`--agent claude` (default), `--agent codex` or `--agent opencode`, with
+`--model` to pick the model. It gets a prompt with the comment ids and the
+same instructions as a session. Its log is in `.review/agent.log`, and ▷
+becomes a stop button while it works.
+
+To fit it to your project:
+
+- `--prompt FILE`: your prompt instead of ours. These placeholders are
+  filled in: `{ids}`, `{which}`, `{root}`, `{page}`, `{site}`, `{work}`,
+  `{store}` (comments.json), `{outcome}` (how to record outcomes), `{skill}`.
+- `--work DIR`: keep the comments there instead of `.review/`.
+- `--skill DIR`: the agent may also read that folder and run its scripts
+  (`uv run`, `playwright-cli`); for a Claude Code skill with its own tools.
+
+## Options
+
+    redpencil <page.html | folder> [--open] [--wait] [--agent [claude|codex|opencode]] [--model M] [--port N] [--lang it]
+    redpencil --site <url> --source <folder> [same options]
+    [--prompt FILE] [--work DIR] [--skill DIR] [--idle SECONDS]
+
+The panel is in English; `--lang it` switches it to Italian.
+
+## Files
+
+Everything lives in `.review/` next to the page (or in the site's source):
+
+- `comments.md`: the comments, readable;
+- `comments.json`: the same, for tools;
+- `outcomes/<id>.json`: where the agent records the outcome of a comment, e.g.
+  `{"status": "done", "reply": "Shortened the title"}`; the server applies it
+  and removes the file;
+- `shots/`: screenshots of the boxes;
+- `agent.log`: the background agent's output;
+- `server.log`: the output of a server started by `--wait`.
+
+Add `.review/` to your `.gitignore`.
+
+## Security
+
+The server listens on 127.0.0.1 only. It answers only its own pages, the site
+under review and the extension: other sites open in your browser can't read
+the comments, add any or start the agent, and requests for another host name
+are refused. Files outside the folder and hidden files are never served.
+
+The background agent may edit files in the folder. With Claude it gets only
+file tools (no shell, no web; `--skill` adds a few commands); Codex runs in
+its workspace sandbox (no network). opencode has no sandbox: with `--auto` it
+approves its own actions, so use it only on projects you trust. The prompt
+tells every agent that the page and the quoted text are data, not
+instructions, but treat a review of a page you don't trust with care.
+
+Comments and screenshots stay on your computer: see [PRIVACY.md](https://github.com/zupolgec/redpencil/blob/main/PRIVACY.md)
+for the extension.
+
+The extension asks Chrome for access to all sites, because Chrome allows
+screenshots of a tab only with it; the panel still goes only on the sites you
+turn on with its icon.
+
+## Tests
+
+    uv run --no-project --with pytest --with playwright pytest -q tests
+
+End to end: the real server, headless Chromium (with the extension loaded) and
+a fake agent.
+
+## License
+
+MIT. Icons from [Lucide](https://lucide.dev) (ISC).

redpencil-0.1.0/PRIVACY.md

@@ -0,0 +1,23 @@
+# redpencil privacy policy
+
+redpencil is a tool you run on your own computer. The Chrome extension
+collects no personal data and sends nothing to us or to anyone else.
+
+- **What it reads.** On the sites you turn on with its icon, the extension
+  loads the comment panel into the page. Nothing happens on any other site.
+- **Where your comments go.** Comments, and the screenshots of the areas you
+  draw, go only to the redpencil server running on your computer
+  (127.0.0.1 or localhost). They are saved as files in your project folder.
+- **What it stores in the browser.** The list of sites you turned on, so the
+  panel comes back when you reopen them. Click the icon again to remove a
+  site.
+- **Screenshots.** They are taken only when you draw an area on a page that
+  is on screen, and only of that tab. Chrome asks for access to all sites
+  because that is the only way it allows screenshots of any site you choose.
+- **No analytics, no tracking, no remote code.** The extension contacts no
+  server other than the one on your computer.
+
+The coding agent that works on your comments (Claude Code, Codex, opencode)
+is a separate program you choose and run yourself; its own terms apply.
+
+Questions: open an issue on the project's repository.

redpencil-0.1.0/README.md

@@ -0,0 +1,128 @@
+# redpencil
+
+Review a page your coding agent made, right in the browser. Select some text,
+or right-click a spot, or drag a box over the page, and write what's wrong.
+Press ▷ and the comments go back to your agent session, which fixes them while
+the page updates in front of you, without losing what you are typing or where
+you are.
+
+![A comment on a page, ▷, and the agent fixes it while you watch](https://raw.githubusercontent.com/zupolgec/redpencil/main/docs/img/demo.gif)
+
+Works with a single html file (a report, a mockup), a folder of pages, or a
+whole site served by something else (Laravel Herd, a dev server, a staging
+site). No dependencies: one Python file (standard library only) and one
+JavaScript file.
+
+## Quick start
+
+Ask your agent session (Claude Code, Codex, opencode...) to run, in the
+background:
+
+    uvx redpencil report.html --open --wait
+
+It starts the review server, opens the page in your browser and waits. When
+you press ▷ it returns, printing the comments and how to record the outcome of
+each one; your agent works on them and runs the same command again for the
+next round.
+
+The server stops by itself after 15 minutes nobody uses it (no page open, no
+session waiting; `--idle N` to change it). The panel then says so, and asking
+your agent to open the review again brings it back: the page reconnects by
+itself. You can also start the server alone, without `--wait`, and leave it
+running. Every comment shows its state in the panel (queued, working, done,
+answered) and the agent's reply.
+
+(Or, from the repository: `uvx --from git+https://github.com/zupolgec/redpencil redpencil ...`.)
+
+## A whole site
+
+    redpencil --site https://my-site.test --source ~/code/my-site --wait
+
+The panel reaches the site in one of two ways:
+
+- **Chrome extension** (`extension/`): open `chrome://extensions`, turn on
+  developer mode, "Load unpacked", pick the `extension` folder
+  (`scripts/build_extension.py` makes the zip for the Chrome Web Store). On the site,
+  click the extension's icon once: from then on its pages show the panel
+  whenever a review of that site is running.
+- **Snippet**: add the `<script>` printed at start to your layout.
+
+Comments are kept per page, and the panel lists the open ones on the other
+pages. Your agent edits the source (templates, content, styles); the page
+updates by itself, or is left alone when a dev server with live reload (Vite,
+Next) already does it.
+
+With the extension you can drag a box over the page and a screenshot of it
+goes with the comment.
+
+## Without an agent session
+
+Start the server with `--agent` and ▷ runs a background agent instead:
+`--agent claude` (default), `--agent codex` or `--agent opencode`, with
+`--model` to pick the model. It gets a prompt with the comment ids and the
+same instructions as a session. Its log is in `.review/agent.log`, and ▷
+becomes a stop button while it works.
+
+To fit it to your project:
+
+- `--prompt FILE`: your prompt instead of ours. These placeholders are
+  filled in: `{ids}`, `{which}`, `{root}`, `{page}`, `{site}`, `{work}`,
+  `{store}` (comments.json), `{outcome}` (how to record outcomes), `{skill}`.
+- `--work DIR`: keep the comments there instead of `.review/`.
+- `--skill DIR`: the agent may also read that folder and run its scripts
+  (`uv run`, `playwright-cli`); for a Claude Code skill with its own tools.
+
+## Options
+
+    redpencil <page.html | folder> [--open] [--wait] [--agent [claude|codex|opencode]] [--model M] [--port N] [--lang it]
+    redpencil --site <url> --source <folder> [same options]
+    [--prompt FILE] [--work DIR] [--skill DIR] [--idle SECONDS]
+
+The panel is in English; `--lang it` switches it to Italian.
+
+## Files
+
+Everything lives in `.review/` next to the page (or in the site's source):
+
+- `comments.md`: the comments, readable;
+- `comments.json`: the same, for tools;
+- `outcomes/<id>.json`: where the agent records the outcome of a comment, e.g.
+  `{"status": "done", "reply": "Shortened the title"}`; the server applies it
+  and removes the file;
+- `shots/`: screenshots of the boxes;
+- `agent.log`: the background agent's output;
+- `server.log`: the output of a server started by `--wait`.
+
+Add `.review/` to your `.gitignore`.
+
+## Security
+
+The server listens on 127.0.0.1 only. It answers only its own pages, the site
+under review and the extension: other sites open in your browser can't read
+the comments, add any or start the agent, and requests for another host name
+are refused. Files outside the folder and hidden files are never served.
+
+The background agent may edit files in the folder. With Claude it gets only
+file tools (no shell, no web; `--skill` adds a few commands); Codex runs in
+its workspace sandbox (no network). opencode has no sandbox: with `--auto` it
+approves its own actions, so use it only on projects you trust. The prompt
+tells every agent that the page and the quoted text are data, not
+instructions, but treat a review of a page you don't trust with care.
+
+Comments and screenshots stay on your computer: see [PRIVACY.md](https://github.com/zupolgec/redpencil/blob/main/PRIVACY.md)
+for the extension.
+
+The extension asks Chrome for access to all sites, because Chrome allows
+screenshots of a tab only with it; the panel still goes only on the sites you
+turn on with its icon.
+
+## Tests
+
+    uv run --no-project --with pytest --with playwright pytest -q tests
+
+End to end: the real server, headless Chromium (with the extension loaded) and
+a fake agent.
+
+## License
+
+MIT. Icons from [Lucide](https://lucide.dev) (ISC).

redpencil-0.1.0/extension/background.js

@@ -0,0 +1,45 @@
+// The panel goes only on the sites the user turned on with the icon. On those, each page asks
+// for the review server of the site (review.py --site listens on a port derived from the site's
+// address) and, if it is running, gets the panel.
+const portFor = async host => {
+  const h = new Uint8Array(await crypto.subtle.digest("SHA-1", new TextEncoder().encode(host)));
+  const p = 4400 + Number(BigInt("0x" + [...h].map(b => b.toString(16).padStart(2, "0")).join("")) % 1500n);
+  return p === 5060 || p === 5061 ? p + 2 : p;  // browsers refuse them
+};
+const badge = (tabId, text) => chrome.action.setBadgeText({ tabId, text });
+const idFor = origin => "review " + origin;
+
+chrome.runtime.onMessage.addListener((msg, sender, reply) => {
+  if (msg === "review" && sender.tab && sender.frameId === 0) attach(sender.tab.id, new URL(sender.url).host);
+  if (msg && msg.shot && sender.tab && sender.tab.active) {  // a screenshot of the page asking, only if it is on screen
+    chrome.tabs.captureVisibleTab(sender.tab.windowId, { format: "png" }).then(reply, () => reply(null));
+    return true;
+  }
+});
+
+async function attach(tabId, host) {
+  const base = `http://127.0.0.1:${await portFor(host)}`;
+  let j;
+  try { j = await (await fetch(base + "/__status")).json(); } catch { return badge(tabId, "off"); }
+  if (j.site !== host) return badge(tabId, "off");  // no review for this site on that port
+  const target = { tabId };
+  await chrome.scripting.executeScript({ target, func: (base, lang) => { window.__rv = { base, lang }; }, args: [base, j.lang] });
+  await chrome.scripting.executeScript({ target, files: ["review.js"] });
+  badge(tabId, "on");
+}
+
+// turns a site on: from now on its pages look for their review
+async function enable(origin) {
+  await chrome.scripting.registerContentScripts([{ id: idFor(origin), matches: [origin + "/*"], js: ["content.js"], runAt: "document_idle" }]);
+}
+
+chrome.action.onClicked.addListener(async tab => {
+  const origin = new URL(tab.url).origin;
+  // asked first, while it is still the user's click (no prompt if already granted). Chrome allows
+  // screenshots of a tab only with access to all sites; the panel still goes only where turned on
+  if (!(await chrome.permissions.request({ origins: ["<all_urls>"] }))) return;
+  const on = (await chrome.scripting.getRegisteredContentScripts({ ids: [idFor(origin)] })).length;
+  if (on) await chrome.scripting.unregisterContentScripts({ ids: [idFor(origin)] });
+  else await enable(origin);
+  chrome.tabs.reload(tab.id);
+});

redpencil-0.1.0/extension/bridge.js

@@ -0,0 +1,7 @@
+// On review pages served by review.py (127.0.0.1) the panel is not part of the extension:
+// it asks for screenshots through here.
+document.documentElement.dataset.rvBridge = "1";
+addEventListener("message", e => {
+  if (e.source !== window || !e.data || e.data.rv !== "shot") return;
+  chrome.runtime.sendMessage({ shot: true }, url => postMessage({ rv: "shot-done", id: e.data.id, url }, "*"));
+});

redpencil-0.1.0/extension/content.js

@@ -0,0 +1,2 @@
+// Asks the extension to put the review panel on this page, if the site is under review.
+chrome.runtime.sendMessage("review");

redpencil-0.1.0/extension/icons/icon.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+  <rect width="128" height="128" rx="28" fill="#dc2626"/>
+  <g transform="translate(22 22) scale(3.5)" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/>
+    <path d="m15 5 4 4"/>
+  </g>
+</svg>

redpencil-0.1.0/extension/manifest.json

@@ -0,0 +1,47 @@
+{
+  "manifest_version": 3,
+  "name": "redpencil",
+  "version": "0.1.0",
+  "description": "Comment on the pages of a site you are reviewing and let your agent fix them.",
+  "icons": {
+    "16": "icons/16.png",
+    "32": "icons/32.png",
+    "48": "icons/48.png",
+    "128": "icons/128.png"
+  },
+  "permissions": [
+    "scripting",
+    "storage"
+  ],
+  "host_permissions": [
+    "http://127.0.0.1/*",
+    "http://localhost/*"
+  ],
+  "optional_host_permissions": [
+    "<all_urls>"
+  ],
+  "background": {
+    "service_worker": "background.js"
+  },
+  "action": {
+    "default_title": "redpencil: turn the comments on or off for this site",
+    "default_icon": {
+      "16": "icons/16.png",
+      "32": "icons/32.png",
+      "48": "icons/48.png",
+      "128": "icons/128.png"
+    }
+  },
+  "content_scripts": [
+    {
+      "matches": [
+        "http://127.0.0.1/*",
+        "http://localhost/*"
+      ],
+      "js": [
+        "bridge.js"
+      ],
+      "run_at": "document_start"
+    }
+  ]
+}

redpencil-0.1.0/extension/review.js

@@ -0,0 +1 @@
+../src/review.js

redpencil-0.1.0/pyproject.toml

@@ -0,0 +1,27 @@
+[project]
+name = "redpencil"
+version = "0.1.0"
+description = "Review an html page or a site in the browser: comment on it, and your coding agent fixes it while you watch."
+readme = "README.md"
+license = "MIT"
+requires-python = ">=3.10"
+dependencies = []
+
+[project.urls]
+Homepage = "https://github.com/zupolgec/redpencil"
+Issues = "https://github.com/zupolgec/redpencil/issues"
+
+[project.scripts]
+redpencil = "redpencil:main"
+
+[build-system]
+requires = ["hatchling"]
+build-backend = "hatchling.build"
+
+# one file for the server, one for the panel: src/ stays usable as plain scripts (the skills run it from there)
+[tool.hatch.build.targets.wheel]
+bypass-selection = true
+
+[tool.hatch.build.targets.wheel.force-include]
+"src/review.py" = "redpencil/__init__.py"
+"src/review.js" = "redpencil/review.js"

redpencil-0.1.0/scripts/build_extension.py

@@ -0,0 +1,20 @@
+"""Builds the Chrome Web Store zip of the extension: review.js copied from src/ (no links),
+the version taken from pyproject.toml. Usage: python -I scripts/build_extension.py [out dir]"""
+import json, pathlib, sys, tomllib, zipfile
+
+ROOT = pathlib.Path(__file__).resolve().parent.parent
+EXT = ROOT / "extension"
+out = pathlib.Path(sys.argv[1] if len(sys.argv) > 1 else ROOT / "dist")
+version = tomllib.loads((ROOT / "pyproject.toml").read_text())["project"]["version"]
+manifest = json.loads((EXT / "manifest.json").read_text())
+manifest["version"] = version
+out.mkdir(parents=True, exist_ok=True)
+zip_path = out / f"redpencil-extension-{version}.zip"
+with zipfile.ZipFile(zip_path, "w", zipfile.ZIP_DEFLATED) as z:
+    z.writestr("manifest.json", json.dumps(manifest, indent=2))
+    for f in sorted(EXT.rglob("*")):
+        rel = f.relative_to(EXT)
+        if f.is_dir() or rel.name == "manifest.json" or any(p.startswith(".") for p in rel.parts) or f.suffix == ".svg":
+            continue
+        z.writestr(str(rel), f.resolve().read_bytes())  # resolve(): the link to src/review.js becomes a file
+print(zip_path)

redpencil-0.1.0/scripts/record_demo.py

@@ -0,0 +1,77 @@
+"""Records the README gif: a comment on a page, ▷, the agent fixes it while the page updates.
+Headless Chromium and the tests' fake agent. Usage:
+  uv run --no-project --with playwright python -I scripts/record_demo.py docs/img/demo.gif"""
+import json, os, pathlib, shutil, socket, subprocess, sys, tempfile, time, urllib.request
+
+from playwright.sync_api import sync_playwright
+
+ROOT = pathlib.Path(__file__).resolve().parent.parent
+out = pathlib.Path(sys.argv[1]).resolve()
+PAGE = """<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Bianchi Bakery</title>
+<style>body{font:18px/1.6 Georgia,serif;margin:0;background:#faf7f2;color:#2b2620}
+header{padding:18px 48px;border-bottom:1px solid #e7dfd3;font-weight:bold}main{max-width:620px;padding:40px 48px}
+h1{font-size:44px;line-height:1.15;margin:0 0 18px}.hours{background:#fff;border:1px solid #e7dfd3;border-radius:10px;padding:14px 20px}</style>
+</head><body><header>Bianchi Bakery</header><main>
+<h1 id="title">Bread, focaccia and pastries, baked fresh every single morning since 1962</h1>
+<p>Stone-ground flour and sourdough, from our oven to your table.</p>
+<div class="hours"><b>Opening hours</b><br>Monday to Saturday, 7am to 1pm and 4pm to 7:30pm.</div>
+</main></body></html>"""
+
+with tempfile.TemporaryDirectory() as tmp:
+    tmp = pathlib.Path(tmp)
+    site = tmp / "bakery"
+    site.mkdir()
+    (site / "index.html").write_text(PAGE)
+    (site / ".review").mkdir()
+    (site / ".review" / "script.json").write_text(json.dumps([
+        {"wait": 2}, {"replace": ["index.html", "Bread, focaccia and pastries, baked fresh every single morning since 1962",
+                                  "Fresh bread every morning since 1962"]},
+        {"wait": 1}, {"outcome": ["@ID", "done", "Shortened the title to six words."]}]))
+    s = socket.socket(); s.bind(("127.0.0.1", 0)); port = s.getsockname()[1]; s.close()
+    env = dict(os.environ, REVIEW_AGENT=f"{sys.executable} -I {ROOT / 'tests' / 'fake_agent.py'}")
+    srv = subprocess.Popen([sys.executable, "-I", str(ROOT / "src" / "review.py"), str(site), "--port", str(port), "--agent"],
+                           env=env, stdout=subprocess.DEVNULL, stderr=subprocess.DEVNULL)
+    url = f"http://127.0.0.1:{port}/"
+    for _ in range(50):
+        try:
+            urllib.request.urlopen(url + "__status"); break
+        except OSError:
+            time.sleep(0.1)
+    try:
+        with sync_playwright() as p:
+            b = p.chromium.launch()
+            ctx = b.new_context(viewport={"width": 1100, "height": 620}, record_video_dir=str(tmp / "video"),
+                                record_video_size={"width": 1100, "height": 620})
+            page = ctx.new_page()
+            page.goto(url)
+            page.wait_for_selector("#rv-side")
+            page.wait_for_timeout(1200)
+            h1 = page.locator("#title").bounding_box()
+            page.mouse.move(h1["x"] + 200, h1["y"] + 30, steps=15)
+            page.wait_for_timeout(400)
+            page.mouse.click(h1["x"] + 200, h1["y"] + 30, button="right")
+            page.wait_for_selector("#rv-dlg textarea")
+            page.wait_for_timeout(500)
+            page.locator("#rv-dlg textarea").press_sequentially("Too long, keep it to a few words", delay=55)
+            page.wait_for_timeout(500)
+            page.locator("#rv-dlg textarea").press("Enter")
+            page.wait_for_timeout(800)
+            cid = json.loads((site / ".review" / "comments.json").read_text())[0]["id"]
+            f = site / ".review" / "script.json"
+            f.write_text(f.read_text().replace("@ID", cid))
+            run = page.locator("#rv-run").bounding_box()
+            page.mouse.move(run["x"] + 15, run["y"] + 15, steps=20)
+            page.wait_for_timeout(300)
+            page.locator("#rv-run").click()
+            page.wait_for_function("() => document.querySelector('#title').textContent.startsWith('Fresh')", timeout=15000)
+            page.wait_for_selector("#rv-items .it .ans:not([hidden]), #rv-items .done", timeout=15000)
+            page.wait_for_timeout(2500)
+            video = page.video.path()
+            ctx.close()
+            b.close()
+        subprocess.run(["ffmpeg", "-y", "-loglevel", "error", "-i", str(video), "-vf",
+                        "fps=12,scale=880:-1:flags=lanczos,split[a][b];[a]palettegen=max_colors=96[p];[b][p]paletteuse=dither=bayer:bayer_scale=4",
+                        str(out)], check=True)
+        print(out, f"{out.stat().st_size // 1024} KB")
+    finally:
+        srv.terminate()