feat: terminal UI polish and capture improvements #10
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
added 2 commits
January 14, 2026 23:34
- Add ui.ts module wrapping @clack/prompts for styled CLI output - Animated spinner with progress counter during screenshot capture - Intro banner with version, styled outro messages - Color-coded error/success/warning messages - Note boxes for important information (session key info) - Replace old logger.ts with new ui module
🦋 Changeset detectedLatest commit: 479fb8c The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
added 12 commits
January 14, 2026 23:44
Settings changed in the toolbar Settings modal (colorScheme, viewport, deviceScaleFactor) were not being persisted to config.json. Also updates CLAUDE.md to remove references to deleted files.
Re-find element fresh inside page.evaluate() instead of using stale ElementHandle. When HA applies dark theme, it re-renders components creating new DOM elements - the old handle pointed to stale nodes with light-mode styles. Also adds --light/--dark flags to config command and creates separate browser contexts per color scheme for proper media query emulation.
Highlight the ability to capture both color schemes in one run with pixel-perfect backgrounds as a crucial differentiator.
browser.disconnected only fires when the browser process terminates, not when the window is closed. Chrome often keeps running in the background, causing the CLI to hang. Now we listen for page close events and explicitly close the browser when the last page closes.
Screenshots now retry up to 5 times when they fail (e.g., selector not found). Uses exponential backoff: 500ms, 1s, 2s, 3s, 5s between attempts to handle slow-loading pages and dynamic content.
Logo now scales down on smaller screens: - 640px and below: 180px max - 400px and below: 140px max Also reduces hero name font size on mobile for better balance.
Unified positioning across all touchpoints: - README: "Screenshots that stay true" headline - Landing page: Same headline with "Your UI evolves" tagline - Meta description: Consistent messaging for SEO
Changed colorScheme behavior: - Both (undefined): captures light and dark variants (now default) - Auto: uses browser's color scheme preference - Light/Dark: explicit single scheme UI order updated to: Both, Auto, Light, Dark
- Full-page screenshot: omit selector to capture entire scrollable page - New docs/api/config.md with complete configuration reference - Documents all config options, color schemes, selectors, padding
omachala
changed the title
Codecov Report❌ Patch coverage is
📢 Thoughts on this report? Let us know! |
added 11 commits
January 15, 2026 14:22
- heroshot sync <pattern> matches by id, name, or filename - Case-insensitive substring matching - Multiple matches sync all matching screenshots
- Per-screenshot viewports: desktop, tablet, mobile, or custom WIDTHxHEIGHT - Combined with colorScheme: 1 config → 6 screenshots (3 sizes × 2 themes) - Suffix logic: single variant = no suffix, multiple = -viewport-colorScheme - Document filename as template (base name with automatic suffixes) - Add Viewport Variants feature card to landing page
- README: 3×5×3×2 = 90 screenshots math, not visual regression - Landing: tagline shows the multiplication power - IDEA.md: scale problem section (810 manual actions vs one command)
- Add .heroshot/config.json for landing page screenshots - Generate 6 variants: desktop/tablet/mobile x light/dark - Add 'See It In Action' showcase section to landing page - Add update-screenshots.yml workflow for manual regeneration
- Change selector from full page to .VPHero - Add padding and maskPadding for cleaner screenshots - Rename files from landing-* to hero-* - Add link to config.json in showcase subtitle
omachala
force-pushed
the
feat/terminal-ui
branch
from
1738497 to
fa6c766
Compare
added 6 commits
January 15, 2026 20:39
- Extract showcase CSS to separate file - Improve "See It In Action" copy - Remove screenshot labels (self-explanatory) - Replace terminal widget with simple CTA button - Add tablet breakpoint for hero logo (200px at ≤960px) - Update hero screenshots with proper tablet sizing - Add ColorScheme type to toolbar types - Refactor SettingsModal onclick handlers to use setColorScheme function - Fix config typo (table -> tablet)
omachala
added a commit
that referenced
this pull request
Jan 18, 2026
## Summary
- Beautiful terminal UI with `@clack/prompts` - animated spinner,
progress counter, styled messages
- Full-page screenshots by omitting selector (uses Playwright `fullPage:
true`)
- "Both" color scheme is now the default - captures light and dark
variants automatically
- **Viewport variants** - `viewports: ["desktop", "tablet", "mobile"]`
per-screenshot for multi-size capture
- **`heroshot sync <pattern>`** - filter screenshots by id, name, or
filename (case-insensitive substring match)
- Retry flaky screenshots with exponential backoff (500ms to 5s, 5
attempts)
- Exit CLI gracefully when browser window is closed manually
- Save browser settings (viewport, colorScheme, scale) from toolbar UI
to config
- Dark mode background detection for padding mask
## Viewport Variants
One config entry → multiple screenshots:
```json
{
"filename": "dashboard.png",
"viewports": ["desktop", "tablet", "mobile"]
}
```
Combined with default colorScheme (both), generates 6 files:
- `dashboard-desktop-light.png`, `dashboard-desktop-dark.png`
- `dashboard-tablet-light.png`, `dashboard-tablet-dark.png`
- `dashboard-mobile-light.png`, `dashboard-mobile-dark.png`
## Docs & Polish
- Align messaging: "Screenshots that stay true. Your UI evolves, your
screenshots follow."
- Add CLI reference for `--light`/`--dark` flags and default command
behavior
- Create comprehensive config.json documentation with viewports section
- Clarify `filename` is a template (base name, suffixes added
automatically)
- Add Viewport Variants feature card to landing page
- Document `heroshot sync [pattern]` command
- Responsive hero logo on mobile viewports
- Fix moon icon color to match other feature icons (orange)
## Test fixes
- Update e2e test for new colorScheme behavior (undefined = "both")
- Exclude `ui.ts` from coverage (CLI display module)
---------
Co-authored-by: Ondrej Machala <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
@clack/prompts- animated spinner, progress counter, styled messagesfullPage: true)viewports: ["desktop", "tablet", "mobile"]per-screenshot for multi-size captureheroshot sync <pattern>- filter screenshots by id, name, or filename (case-insensitive substring match)Viewport Variants
One config entry → multiple screenshots:
{ "filename": "dashboard.png", "viewports": ["desktop", "tablet", "mobile"] }Combined with default colorScheme (both), generates 6 files:
dashboard-desktop-light.png,dashboard-desktop-dark.pngdashboard-tablet-light.png,dashboard-tablet-dark.pngdashboard-mobile-light.png,dashboard-mobile-dark.pngDocs & Polish
--light/--darkflags and default command behaviorfilenameis a template (base name, suffixes added automatically)heroshot sync [pattern]commandTest fixes
ui.tsfrom coverage (CLI display module)