From 029323fe97401960752ccd54bb6b05a42c2b87fc Mon Sep 17 00:00:00 2001 From: claude Date: Sat, 10 Oct 2026 10:36:31 -0700 Subject: [PATCH] Build standalone preview-sidecar tool and receipt-styled landing page Localhost port watcher: detects a newly bound dev-server port via bounded TCP probing, opens an iframe preview pane, and captures a one-click timestamped screenshot receipt via headless Chrome. No Claude Code changes, stdlib-only, 16 passing tests plus a real end-to-end dogfood (demo.py) with a genuine recorded screenshot. Landing page at ventures/preview-sidecar/site/index.html uses a receipt/ticket visual identity (narrow thermal-paper column, dotted rules, wax stamp, monospace totals) distinct from the finishline venture, with one above-the-fold signup CTA and an honest free/paid pricing section. Co-Authored-By: Claude Sonnet 5 --- ventures/preview-sidecar/.gitignore | 1 + ventures/preview-sidecar/README.md | 109 +++++++ ventures/preview-sidecar/demo-receipt.json | 10 + ventures/preview-sidecar/demo-receipt.png | Bin 0 -> 16208 bytes ventures/preview-sidecar/demo.py | 93 ++++++ ventures/preview-sidecar/demo.txt | 27 ++ ventures/preview-sidecar/sidecar.py | 276 ++++++++++++++++ ventures/preview-sidecar/site/README.md | 109 +++++++ .../preview-sidecar/site/demo-receipt.json | 10 + .../preview-sidecar/site/demo-receipt.png | Bin 0 -> 16208 bytes ventures/preview-sidecar/site/demo.txt | 27 ++ ventures/preview-sidecar/site/index.html | 305 ++++++++++++++++++ ventures/preview-sidecar/site/sidecar.py | 276 ++++++++++++++++ ventures/preview-sidecar/test_sidecar.py | 113 +++++++ 14 files changed, 1356 insertions(+) create mode 100644 ventures/preview-sidecar/.gitignore create mode 100644 ventures/preview-sidecar/README.md create mode 100644 ventures/preview-sidecar/demo-receipt.json create mode 100644 ventures/preview-sidecar/demo-receipt.png create mode 100644 ventures/preview-sidecar/demo.py create mode 100644 ventures/preview-sidecar/demo.txt create mode 100644 ventures/preview-sidecar/sidecar.py create mode 100644 ventures/preview-sidecar/site/README.md create mode 100644 ventures/preview-sidecar/site/demo-receipt.json create mode 100644 ventures/preview-sidecar/site/demo-receipt.png create mode 100644 ventures/preview-sidecar/site/demo.txt create mode 100644 ventures/preview-sidecar/site/index.html create mode 100644 ventures/preview-sidecar/site/sidecar.py create mode 100644 ventures/preview-sidecar/test_sidecar.py 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--