yas-pr-screenshots

name	yas-pr-screenshots
description	Generate before/after PNG screenshots for a YAS branch's rendering changes, push them to the yas-pr-screenshots repo, and hand back a markdown before/after table for the PR description. Use when the user wants real image screenshots (not ANSI-stripped text) attached to a YAS pull request, or asks to shoot/capture before-after statusline screenshots for a branch.

YAS PR screenshots

Render the statusline on main ("before") and on the current branch ("after") as deterministic PNGs, publish them to the public tmck-code/yas-pr-screenshots repo, and emit a markdown table that another worker (e.g. the yas-pr skill or a gh pr edit) drops into the PR body. PNGs come from DEMO_ONLY=<scenario> make demo/img (via ops/ansi_png.py — needs ImageMagick magick + a Mono Nerd Font).

Steps

1. Resolve <pr_id>. If the current branch already has a PR, use its number (gh pr view --json number -q .number). Otherwise predict the next one: gh pr list --state all --limit 1 --json number -q '.[0].number' + 1.

2. Locate the screenshots checkout. Use $YAS_PR_SCREENSHOTS_DIR if set, else a sibling ../yas-pr-screenshots, else clone [e-mail]:tmck-code/yas-pr-screenshots.git. Ensure it's on main and clean (git -C <dir> pull --ff-only). *.png is LFS-tracked there.

3. Pick variants. Always shoot kitchen-sink. Then read git diff --stat main...HEAD (and the diff) and add the variants most relevant to what changed — map area → variant:

   Branch touches	Add variant LABEL:SCENARIO:ENV
   subagents / openspec / tasks / workflows	subagents:subagents: · openspec:openspec: · tasks:tasks: · workflows:workflows:
   context fill / soft limit / token window	full-context:full-context: (or YAS_SOFT_LIMIT=)
   config parsing / errors	config-error:config-error:
   narrow width / truncation	narrow:kitchen-sink:YAS_MAX_WIDTH=40
   full width	full-width:kitchen-sink:YAS_FULL_WIDTH=1
   justify / labels	justify:kitchen-sink:YAS_JUSTIFY=1 · labels:kitchen-sink:YAS_LABELS=1
   theme / gradient / colour	theme-<name>:kitchen-sink:YAS_THEME=<name>
   glyph mode	github:kitchen-sink:YAS_GLYPH_MODE=github
   model / thinking	opus-thinking:opus-thinking: · sonnet-thinking:sonnet-thinking:

   Use the same ENV on both sides so the diff is purely the content change. Scenario names: ops/demo.py SCENARIOS (kitchen-sink, tasks, openspec, subagents, workflows, full-context, config-error, sonnet-thinking, opus-thinking, …).

4. Render + stage. From the YAS repo root run the helper with the chosen variants:

   .claude/skills/yas-pr-screenshots/scripts/shoot.sh <pr_id> <screenshots_dir> \
     'kitchen-sink:kitchen-sink:' 'narrow:kitchen-sink:YAS_MAX_WIDTH=40' 'subagents:subagents:'
   

   For each variant it renders after (current tree) and before (a throwaway main worktree), then combines the pair into ONE wide PNG — before and after side by side, each half topped by a small "before" / "after" heading, joined by a visible vertical separator strip (ImageMagick magick, deterministic). The combined image lands at screenshots/<pr_id>/<label>.png (the raw halves are also kept under screenshots/<pr_id>/{before,after}/ for reference, but the table embeds only the combined image). It prints the markdown table to stdout: a blank-headed left column holding the variant label, one row per variant. A before render that fails (scenario new to the branch) yields a "(not on main)" placeholder left half instead of aborting.

   |  | before / after |
   |--|----------------|
   | <label> | ![<label>](<url_base>/<label>.png?raw=true) |
   

   When the change is theme-wide, use the same scenario (usually kitchen-sink) across all rows and vary only YAS_THEME, labelling each row with the theme name.

5. Commit + push (outward-facing — confirm with the user first):

   git -C <dir> add screenshots/<pr_id>
   git -C <dir> commit -m "screenshots: PR #<pr_id> before/after (<branch>)"
   git -C <dir> push origin main
   

6. Hand off the table. Output the table from step 4 verbatim as the final result so the PR-authoring worker can paste it into the Screenshots / recording section. Do not edit the PR body yourself — that's the next worker's job.

Notes

• Images render only after the push lands (GitHub's LFS/image proxy may lag a few seconds).
• The embed URL is .../blob/main/screenshots/<pr_id>/<label>.png?raw=true — the ?raw=true blob form resolves LFS pointers correctly where raw.githubusercontent.com doesn't.
• Prerequisite: magick on PATH (also used for the combine step) and a Mono Nerd Font installed (see ops/ansi_png.py env knobs).