legioncodeinc/webapp-capture
Finish product demos recorded by Webapp Capture: ElevenLabs voiceover, Replicate or free B-roll intro video, and the final ffmpeg stitch.
Changelog
All notable changes to the Webapp Capture plugin are documented here. The format follows Keep a Changelog and the project uses Semantic Versioning.
[Unreleased]
[2.0.0] - 2026-10-23
Added
- Demo actions for real app flows:
selectby option label,checkanduncheck, pointerdragbetween selectors or points with stepped moves, nativedragTo,scrollElementfor calendar grids and other scroll containers (x,y, orintoView),waitFora selector or text, andconfirmDialog, which clicks the named button only when the dialog text matchesexpectand otherwise cancels. - Read-only per-scene
verifychecks (visible, hidden, text, count). - A write ledger: scenes that can change data are declared in
writes[]with a description and an expected effect, and each needs user approval.writes-report.jsoncompares the expected effect with the actual checks, and later write scenes are skipped after a mismatch or failure. - Retakes:
<output.demo>/<slug>.ledger.jsonremembers attempted writes. A rerun that would repeat them is refused and lists them;--retake(orRETAKE=1) records into<slug>-take-N. findings.mdwith a failure screenshot for every failed or mismatched scene.- A DOM cursor overlay for headless video (
video.cursor), cursor parking after clicks and drags (video.parkAt), and cursor restore after navigation. timeline.json, an editablesegments.tsv(reorder, trim, delete, or splice clips fromclips/),assembly.confwith an end frame hold (video.endHoldMs, default 1500), and scene titles intitles.srt.- Narration fit report (
narration/fit.md) at the plan pace, and Eleven v4 clip texts: one file per cue, bracketed audio tags kept, SSML breaks converted with a warning, domains spelled out, and a manifest without a hardcoded model id. demo/build-cues.mjsto rebuild captions, titles, and narration after editing segments, anddemo/review-demo.mjsfor per-scene contact sheets and a masked text-hit review.- Unit tests for demo plans, narration, nested output paths, and
make-video.sh, plus a real Chromium test of the new actions and verify checks. - Finish demos in ChatGPT:
/webapp-capture handoffrunsdemo/chatgpt-handoff.mjs, which packages a reviewed demo withCHATGPT-INSTRUCTIONS.md, an intro brief andfinish_video.py. The script places one ElevenLabs clip per caption line at its cue time, puts an intro in front, shifts captions, and writesfinished/demo-final.mp4. demo-intro-videoskill: intro and B-roll from free stock sites (licenses and APIs checked 2026-10-23) or seven Replicate video models, with prompt patterns and frame review.- Bundled
replicate_videoMCP server, ported from Character Action Studio 1.0.0 (Legion Code Inc., AGPL-3.0-or-later) with its schemas, model guides, production doctor, frame review script and tests. ChatGPT desktop manifests (plugin.json,mcp.json,.codex-plugin/plugin.json) load the same folder. - Easier Replicate token setup: an optional sensitive
userConfigfield in Claude Code (claude plugin configure webapp-capture@legioncodeinc, or/pluginthen Installed then Configure options), andset_token.py, which saves the token with hidden typing to an owner-only file outside every project that the MCP launcher reads when the environment variable is unset. - README sections: common prompts, finishing in ChatGPT, what runs in parallel, free B-roll sites, and pricing and selling on Upwork and Fiverr (sources checked 2026-10-23).
- The beginner path uses the Claude desktop app's Code tab: Claude installs the free tools after a permission prompt, and the app's Terminal panel is used once to add the plugin marketplace. Terminal use is an optional alternative.
- Six numbered beginner guides in
docs/(install, first demo video, screenshots and audits, finishing in ChatGPT, making money, fixing problems), each with next and previous links and step checks, plus a guide index, tables of contents in both READMEs, and a ChatGPT local marketplace file (.agents/plugins/marketplace.json). The branded PDF now holds all six guides and a reference appendix, with a clickable contents page and PDF bookmarks. docs/USAGE-GUIDE.md, a usage guide with Mermaid diagrams covering what the plugin installs, a first run, every route, and the demo safety model, plus a Legion Code Inc. branded PDF of it built bytools/build-guide-pdf.mjs.
Changed
-
record-demo.mjsnever waits for network idle (realtime pages never go idle) and relies onwaitForinstead. -
make-video.shis a static template that assembles fromsegments.tsv, preflights every output, and refuses linked inputs or existing outputs. -
routes.discoverdefaults tonav-linksstarting fromroutes.startPath, and the intake asks for the real post-login landing page. -
doctor.mjswarns when an output path repeats the config folder (for examplelibrary/design/library/design) and suggests the relative path, and notes that the earliest cookie expiry may be renewed by a refresh token. -
The default cut in
segments.tsvis anchored on the clip length measured withffprobe: it starts when navigation began, dropping the blank page Playwright records first, and ends at the true end of the clip instead of losing the last moments of each scene. -
The demo guard judges drag ends and dropdowns on their own name, so containers are no longer refused for the text of what they hold.
-
playwright-coreandplaywrightrequire 1.63 or newer, matching the lockfile and therecordVideo.showActionsoption the recorder uses. -
Chromium tests skip with a clear message when no Chromium build is installed.
Security
- Demo outputs (ledger,
findings.md, reports, cue files, review sheets) are written owner-only withO_NOFOLLOWand a link-count check, so a symlink or hard link planted in the output folder is refused. - The demo guard resolves the real control text from the DOM before every pointer action; the built-in deny list always applies, and credential fields and secret-looking values are always refused.
- Each scene's visible text is scanned for emails, phone numbers, and
redact.patterns; only masked hits are stored.
[1.1.0] - 2026-09-22
Added
- Recursive
crawl-linksroute discovery with route caps, pathname filtering, and route-family tab exclusions. - Explicitly approved local or seeded onboarding plans that run once before screenshot or inventory shards and capture evidence before each step.
- Ordered screenshot-manifest merging so successful retry runs supersede earlier errors or truncations.
- Optional project context files and onboarding screenshots in Claude Design handoffs.
Changed
- Tab capture reloads the base route and resolves the current tab before each click, preventing state from leaking between captures.
- Scroll-container selection favors substantial overflow regions and ignores short nested controls.
- Token exports report the configured capture theme instead of assuming dark mode.
- Sharp is updated to 0.35.4 and the documented Node.js minimum is aligned to 20.9.
Security
- Onboarding validates every action before navigation, retains the built-in destructive-click denylist when custom rules are added, rejects secret-looking live fields, and confines onboarding evidence to the screenshots directory.
[1.0.0] - 2026-09-15
Added
/webapp-capturecommand: orchestrator instructions for demo, screenshots, library, audit, all, and doctor routes, with intake, dry run, watchdogs, verification, reporting, and a Ship Gate.webapp-capture-stingerskill: foundation, demo, component library, and inconsistency audit guides; reference tables; describe, merge, and reconcile prompt templates; an 83-source research archive with a cited distillation.webapp-capture-worker-beeagent for delegated capture runs.- Scripts:
doctor,save-session(human login, sessionStorage sidecar),parallel(memory-capped sharding),screenshots, inventory (extract,cluster,tokens,tokens-dtcg,sheets,prepare-describe,prepare-merge,validate-merge,build),demo/record-demowith ffmpeg assembly, andaudit(visual and code). - Safety: read-only crawling, off-origin navigation blocking, theme guard, text redaction seeded from GitHub secret scanning patterns and the OWASP never-log list, screenshot masks, demo plan approval gate, destructive-target and secret-field guards.
- Candidate design tokens in the DTCG Format Module 2025.10 shape.
- Claude Design handoff:
inventory/design-handoff.mjspackages the library, tokens, audits, page screenshots, and the shadcn/ui map with a filledCLAUDE-DESIGN-INSTRUCTIONS.mdbrief into one zip (lossless WebP images), delivered at the end of every library-based route. - shadcn/ui map route:
inventory/shadcn-prepare.mjs, mapping and theme prompts, a shadcn/ui catalog, andinventory/shadcn-build.mjs, which validates every mapping and writesSHADCN-MAP.md,shadcn-map.json, and an OKLCHglobals.csstheme draft.
Security
- Session files are written owner-only, checked for gitignore coverage by
save-sessionanddoctor, and never read by the agent.
Designed and built by Legion Code Inc.