VHS demo tapes per release #70

New issue

Closed

opened 2026-05-23 20:55:30 +00:00 by coilysiren · 1 comment

coilysiren commented

2026-05-23 20:55:30 +00:00

Owner

Originally filed by @coilysiren on 2026-04-29T08:55:06Z - https://github.com/coilysiren/repo-recall/issues/32

🤖 Filed by Claude Code on Kai's behalf.

Goal

Every release of repo-recall ships a VHS demo tape that records the dashboard rendering against synthetic fixtures. The tape file is committed to the repo; the rendered GIF is attached to the GitHub Release.

This makes the README's screenshots auto-refresh (no stale visuals) and gives every release a 10-second "what does this look like" answer for someone landing cold. Charm-aesthetic, recruiter-legible, low ongoing cost.

Approach

Add tapes/ directory at repo root. Start with three tapes:
- tapes/dashboard.tape — boot the binary against the demo-mode fixtures, scroll the dashboard, click into a repo, click into a session.
- tapes/cli.tape — repo-recall --version, repo-recall --help, exit codes.
- tapes/refresh.tape — trigger a manual refresh, watch the WebSocket update.
Add make tapes and make tapes-check Makefile targets that render each tape into docs/tapes/*.gif. Output is committed so GitHub renders it inline.
CI workflow tapes.yml that runs on every push to main. Renders all tapes, compares the GIF byte-equality to committed output, fails if drifted. Pre-commit hook regenerates locally so commits stay in sync.
Release workflow attaches each rendered GIF as a release asset.

After MCP App rewrite (#1)

Once repo-recall is an MCP App, the dashboard moves from "browser tab" to "widget rendered in Claude Desktop / ChatGPT." The tape needs to record that surface instead. Either:

Boot a host (mcp-preview) and record the widget rendering, OR
Render the widget HTML into a headless browser via headless_chrome and record THAT.

Stick with browser-tab recording until the rewrite lands; pivot the tapes when it does.

Done when

3 tapes committed to tapes/.
make tapes regenerates all three from a clean checkout.
README embeds the dashboard GIF.
Release workflow attaches GIFs to each GitHub Release.
Pre-commit hook keeps the rendered GIFs in sync with tape sources.

Why

README screenshots go stale. VHS-rendered tapes regenerate on every release; the picture stays honest.
Recruiters skim. A 10-second GIF on the README beats a 200-word "how it works" section.
Charm-stack alignment with the rest of Kai's tooling.

Out of scope

Replacing the existing screenshot PNGs in docs/. Keep them; tapes augment, not replace.
Full end-to-end test recording. VHS is a recording tool, not a test framework. Keep tests/smoke.rs doing the actual coverage.

References

https://github.com/charmbracelet/vhs
https://github.com/charmbracelet/vhs/blob/main/examples
repo-recall issue #1 (Long-running daemon mode + MCP App)

🤖 Filed by Claude Code on Kai's behalf.

_Originally filed by @coilysiren on 2026-04-29T08:55:06Z - [https://github.com/coilysiren/repo-recall/issues/32](https://github.com/coilysiren/repo-recall/issues/32)_ > 🤖 Filed by Claude Code on Kai's behalf. ## Goal Every release of repo-recall ships a [VHS](https://github.com/charmbracelet/vhs) demo tape that records the dashboard rendering against synthetic fixtures. The tape file is committed to the repo; the rendered GIF is attached to the GitHub Release. This makes the README's screenshots auto-refresh (no stale visuals) and gives every release a 10-second "what does this look like" answer for someone landing cold. Charm-aesthetic, recruiter-legible, low ongoing cost. ## Approach 1. Add `tapes/` directory at repo root. Start with three tapes: - `tapes/dashboard.tape` — boot the binary against the demo-mode fixtures, scroll the dashboard, click into a repo, click into a session. - `tapes/cli.tape` — `repo-recall --version`, `repo-recall --help`, exit codes. - `tapes/refresh.tape` — trigger a manual refresh, watch the WebSocket update. 2. Add `make tapes` and `make tapes-check` Makefile targets that render each tape into `docs/tapes/*.gif`. Output is committed so GitHub renders it inline. 3. CI workflow `tapes.yml` that runs on every push to `main`. Renders all tapes, compares the GIF byte-equality to committed output, fails if drifted. Pre-commit hook regenerates locally so commits stay in sync. 4. Release workflow attaches each rendered GIF as a release asset. ## After MCP App rewrite (#1) Once repo-recall is an MCP App, the dashboard moves from "browser tab" to "widget rendered in Claude Desktop / ChatGPT." The tape needs to record that surface instead. Either: - Boot a host (mcp-preview) and record the widget rendering, OR - Render the widget HTML into a headless browser via `headless_chrome` and record THAT. Stick with browser-tab recording until the rewrite lands; pivot the tapes when it does. ## Done when - 3 tapes committed to `tapes/`. - `make tapes` regenerates all three from a clean checkout. - README embeds the dashboard GIF. - Release workflow attaches GIFs to each GitHub Release. - Pre-commit hook keeps the rendered GIFs in sync with tape sources. ## Why 1. README screenshots go stale. VHS-rendered tapes regenerate on every release; the picture stays honest. 2. Recruiters skim. A 10-second GIF on the README beats a 200-word "how it works" section. 3. Charm-stack alignment with the rest of Kai's tooling. ## Out of scope - Replacing the existing screenshot PNGs in `docs/`. Keep them; tapes augment, not replace. - Full end-to-end test recording. VHS is a recording tool, not a test framework. Keep `tests/smoke.rs` doing the actual coverage. ## References - https://github.com/charmbracelet/vhs - https://github.com/charmbracelet/vhs/blob/main/examples - repo-recall issue #1 (Long-running daemon mode + MCP App) > 🤖 Filed by Claude Code on Kai's behalf.

coilysiren commented

2026-05-30 05:43:52 +00:00

Author

Owner

Iceboxed in the 2026-05-29 backlog burn-down: VHS demo tapes per release, polish nicety. Reopen anytime if it becomes real.

coilysiren

2026-05-30 05:43:52 +00:00