diff --git a/ventures/preview-sidecar/.gitignore b/ventures/preview-sidecar/.gitignore new file mode 100644 index 0000000..c18dd8d --- /dev/null +++ b/ventures/preview-sidecar/.gitignore @@ -0,0 +1 @@ +__pycache__/ diff --git a/ventures/preview-sidecar/README.md b/ventures/preview-sidecar/README.md new file mode 100644 index 0000000..85eb567 --- /dev/null +++ b/ventures/preview-sidecar/README.md @@ -0,0 +1,109 @@ +# preview-sidecar + +A dependency-free localhost port watcher: it notices when you start a dev +server, opens a preview pane pointed at it, and can stamp a timestamped +screenshot receipt of what was actually on screen. + +Inspired by [anthropics/claude-code#53997](https://github.com/anthropics/claude-code/issues/53997) +("Bring back local preview for agent-built apps"), closed as not planned. +This does not modify Claude Code or any agent CLI. It is a standalone +sidecar: a Python script you run next to whatever started the dev server. + +## Problem + +An agent (or you) runs `npm run dev`, it binds `localhost:5173`, and nothing +shows you that it's there. You tab-hunt for the port, open it by hand, and if +you want proof of what rendered, you take a screenshot yourself. This watches +a bounded list of common dev ports, opens a preview the moment one answers, +and gives you a one-command way to capture dated evidence of what it showed. + +## Install + +Requires Python 3.9+. No dependencies, no install step — copy `sidecar.py` +anywhere. The `screenshot` command additionally needs a Chromium-family +browser (Chrome, Chromium, or Edge) already installed on the machine; it is +not bundled. + +```sh +# From the notplanned checkout: +python3 ventures/preview-sidecar/demo.py +python3 -m unittest discover -s ventures/preview-sidecar -p 'test_*.py' -v +``` + +For your own project, copy `sidecar.py` to a trusted location and run it +from there, e.g. alongside `npm run dev`. + +## Usage + +```sh +# Watch the default common dev ports (3000, 5173, 8080, ...) and auto-open a +# preview pane the moment one starts answering. +python3 sidecar.py watch + +# Watch specific ports or a range instead. +python3 sidecar.py watch --ports 3000,5173 +python3 sidecar.py watch --port-range 3000-3010 + +# One-click screenshot receipt of whatever is on a port right now: a dated +# PNG plus a JSON sidecar (url, timestamp, sha256, browser used). +python3 sidecar.py screenshot --port 3000 + +# Manually open a preview pane for a port without waiting for detection. +python3 sidecar.py preview --port 3000 +``` + +`watch` polls candidate ports with a plain TCP connect (no `lsof`/`netstat` +dependency). The first time a port starts answering, it writes a small local +HTML file with an iframe pointed at `http://127.0.0.1:` and opens it in +your default browser (`--no-open` to just log the event instead), plus +appends a JSON line to `events.jsonl` in `--out` so detections are +inspectable after the fact. + +`screenshot` launches the browser headless, saves `receipt--