Skip to content

docs(media): 80-second walkthrough video and re-rendered GIFs for 1.8.0 - #77

Merged
danoszz merged 2 commits into
mainfrom
media/walkthrough-1.8
Oct 20, 2026
Merged

danoszz merged 2 commits into
mainfrom
media/walkthrough-1.8

Conversation

@danoszz

@danoszz danoszz commented Oct 20, 2026

Copy link
Copy Markdown
Owner

Demo media for 1.8.0, after #63. No version bump. CHANGELOG entries are under [Unreleased] → Docs (and one line under Fixed).

The walkthrough (assets/walkthrough.mp4, 82 s, 1.5 MB, H.264, no audio, captions burned in and in assets/walkthrough.vtt, poster assets/walkthrough-poster.jpg):

  1. npx penthera: the setup wizard on a scratch copy of tests/fixtures/init/app
  2. penthera http://127.0.0.1:8765 --offline: the mock server
  3. penthera ui --demo: setup, then Simple mode (verdict, first problem), then Advanced (triage matrix, a finding)
  4. The fix loop: the first diff, Apply, then Stop
  5. Proof → owner report, then that downloaded report in the terminal

node scripts/media/walkthrough.mjs re-renders all of it. The terminal parts are VHS tapes in scripts/media/tapes/. The dashboard part runs headless Chrome over CDP, building on scripts/dashboard-screenshots.mjs and its fragment login (#70), and records with Page.startScreencast. That is the mechanism Playwright's video uses, so this adds no Playwright dependency. It uses demo data only: --demo, the mock server, a scratch git repo with a [email protected] identity, and every server on 127.0.0.1. npx is a shell function inside the tape, so the clip runs this checkout and never fetches from npm.

GIFs

  • scan.tape now writes the README hero assets/demo.gif directly (it used to write demo-scan.gif), and scans with --offline.
  • The agents and deps-diff tapes were broken on main: they rendered a Cannot find module …/bin/penthera.js stack trace, because they used a relative path after cd. Both are fixed, and demo-agents.gif and demo-deps-diff.gif are committed.
  • The tapes now use a black and white theme with the #0000ed accent, to match the dashboard.

Workflow: demo-media.yml renders the video after the tapes (CHROME=google-chrome, preinstalled on ubuntu-latest), uploads it with the GIFs, and adds it to the media PR. The script fails if the video goes over 8 MB, and it warns if the length falls outside 60 to 90 s. I have not run the workflow on GitHub; a dry run from the Actions tab would confirm it on Linux.

One UI fix (its own commit): in Advanced mode, a run transcript showed a stray null under its title, because Node.append(null) prints "null". It showed up in the recording.

Checks: npm run audit:internal passes every gate: 1034 tests, pack 195 files, 716 KB packed against the 781 KB budget, and 0 broken links in 354. Assets are not in files. Lint is clean, and scripts/ci/provenance.mjs passes.

Not in this PR: the CLI says "ai tooling" in lower case under "What next", and the owner report spells "defence". Both are product copy, left for a separate change.

🤖 Generated with Claude Code

danoszz and others added 2 commits October 20, 2026 19:38
runView passed `easy ? section : null` straight to Node.append(), which
prints a null as the text "null". Spread the Simple-only section instead.

AI-Assisted: Claude Code with Claude Opus 5.5; found the stray text while recording the walkthrough and wrote the fix
Co-Authored-By: Claude Opus 5.5 <[email protected]>
- scripts/media/walkthrough.mjs renders assets/walkthrough.mp4 (with a
  poster and .vtt captions): npx penthera, an offline scan of the mock
  server, penthera ui --demo in Simple and Advanced mode, one fix approved,
  the owner report. The dashboard part is headless Chrome over CDP, recorded
  with Page.startScreencast; the terminal parts are VHS tapes in
  scripts/media/tapes/. Demo data only, every server on 127.0.0.1.
- The Demo media workflow renders the video too and adds it to its PR.
- scan.tape writes the README hero (assets/demo.gif) directly and scans
  with --offline. The agents and deps-diff tapes rendered a "Cannot find
  module" error (relative bin path after cd); they use an absolute path.
- Tapes use a black and white theme with the #0000ed accent, as the
  dashboard does.
- README and docs/index.md link the video under the screenshots.

AI-Assisted: Claude Code with Claude Opus 5.5; wrote the recording script and tapes, rendered the media and the doc links
Co-Authored-By: Claude Opus 5.5 <[email protected]>
@danoszz
danoszz merged commit 069f4f1 into main Oct 20, 2026
17 checks passed
@danoszz
danoszz deleted the media/walkthrough-1.8 branch October 20, 2026 17:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant