preview-card

name

preview_card

description

Compose a finished run's social SHARE CARD (the chart background + dark scrim + hero headline) and rasterize it to PNG so it can be eyeballed without opening the report GUI in a browser. Use it to check the thing the GUI's client-side PNG actually ships — most importantly, whether the chart lines survive the translucent scrim (a scrim dark enough for the light headline can crush the dark chart lines below the WCAG 1.4.11 3:1 floor, which renders as a near-blank card). Reads a run's summary.json + charts/tokens_saved.bg.svg; writes charts/share_card.svg (always) and charts/share_card.png (best-effort raster).

clawback share-card preview

Run .skills/scripts/preview_card.sh from the project root. It composes the exact card the report GUI would let a user download/post for a run, so you can SEE it without driving the browser.

.skills/scripts/preview_card.sh runs/<run>            # -> charts/share_card.{svg,png}
.skills/scripts/preview_card.sh runs/<run> --out /tmp # write the pair elsewhere

What it does

1. benchmark/bin/preview_card.js --in <run> reads summary.json (→ deriveHeroModel, the same hero logic the GUI uses) and the bare chart charts/tokens_saved.bg.svg, encodes the chart as a data: URL exactly as the GUI does, and writes the composed charts/share_card.svg (chart background → translucent dark scrim → hero headline/sub/tagline).
2. The wrapper then rasterizes that SVG to charts/share_card.png, preferring headless Google Chrome (true 1200×630, renders the nested chart), falling back to macOS qlmanage Quick Look (offline, but pads to a square — the card is the top 630px; the white strip below is padding). If neither is present it leaves just the SVG with a note to open it in a browser.

Why SVG, then a best-effort PNG

The shipped share PNG is rasterized browser-side from this same SVG (share_card.js svgToPngBlob, via canvas). Adding a Node rasterizer would pull a native dependency the product avoids — so the SVG is the source of truth and the PNG here is only a convenience for eyeballing. If the lines are crushed under the scrim in this SVG, they are crushed in the shipped PNG too.

What to look for

• Chart lines read? The two cumulative lines + the shaded wedge should be visible behind the headline — that is the whole point of the chart bg. If they vanish into the scrim, the scrim is too dark for the line colours (WCAG 1.4.11 wants ≥3:1 for graphical objects); the fix lives in share_card.js (shareCardSvg) and/or the bare line colours in benchmark/bin/plot.js.
• Headline + sub read? The percentage, the token sub-line, and the tagline must stay legible (≥3:1 large text) — a scrim light enough for the lines can in turn wash these out. Both constraints have to hold at once.

Not shipped

benchmark/, scripts/, and .skills/ are dev tooling — none ship in the npm tarball (package.json files: bin, src, README.md, LICENSE).