feat(cli): sweep viewports in one invocation

[totigm]

Stacked on #126 → #125 → #118. Base is feat/cli-compare, so the diff shows only this work.

npx @humanjs/cli demo https://your-app.com --viewport 1440x900,390x844 --record tour.gif
# → tour-1440x900.gif
# → tour-390x844.gif

--viewport now takes a list and the command runs once per size. It applies to every command, so a responsive regression check is one line:

npx @humanjs/cli replay flow.json --viewport 1440x900,390x844 --headless

This is not hypothetical. The session that produced the original MCP feedback was verifying a landing page at 1440×900 and 390×844 by running everything twice and keeping the two invocations in sync by hand.

The filename detail that would have bitten

Suffixing goes before the extension, and .spec.ts is treated as the two-part extension it is:

Input	Correct	What path.extname would give
tour.gif	tour-390x844.gif	same
flow.spec.ts	flow-390x844.spec.ts	flow.spec-390x844.ts ✗

The wrong one is not a cosmetic problem — .spec-390x844.ts no longer ends in .spec.ts, so the file stops being recognised as a Playwright test and silently becomes a standalone script. suffixFilename reuses the same suffix list resolveRecordFormat matches on, so the two cannot drift apart, and there is a test for each.

Single-size behaviour is untouched

One viewport is the overwhelmingly common case and looks exactly as it did: no ── size ── banner, and the output keeps the exact filename requested. The suffix only appears when there is more than one size to disambiguate.

Also: demo was silent

Run without --record, it printed nothing at all — which reads as though it never ran, especially headless where there was no window to watch either. It now closes with toured https://example.com at 800×600 in 11.2s.

Verification

112 unit tests in @humanjs/cli (was 95): list parsing, duplicate collapsing, whole-list rejection on one bad entry, options.viewport still pointing at the first size for single-size callers, and suffixing across every supported extension including both two-part ones.

End to end: the sweep above wrote sweep-1440x900.gif (98 KB) and sweep-390x844.gif (84 KB) under per-size banners; a single --viewport 800x600 printed the new summary line with no banner and no suffix.

Whole suite: lint, typecheck (11/11), test (10/10), build (8/8), check:exports (15/15).

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
humanjs	Ready	Preview	Sep 7, 2026 5:46am UTC