Skip to content

Improve Select Element screenshots with visual context#175

Merged
neonwatty merged 3 commits into
mean-weasel:mainfrom
sudo-eugene:codex/selected-element-screenshot-context-main
May 18, 2026
Merged

Improve Select Element screenshots with visual context#175
neonwatty merged 3 commits into
mean-weasel:mainfrom
sudo-eugene:codex/selected-element-screenshot-context-main

Conversation

@sudo-eugene
Copy link
Copy Markdown
Contributor

@sudo-eugene sudo-eugene commented May 18, 2026

Refs #172

What changed

Select Element screenshots now have an optional surrounding-context mode that can capture a nearby container and draw a border-only rounded highlight around the selected element. The default remains the original tight element crop, and teams opt into more context with data-element-context-max-area.

The review screen and docs now point people to that setting, and GitHub issues explain the highlight using the exact resolved color. The local check config also now recognizes the existing semantic-release workflow usage so the pre-PR check suite passes.

Why this shape (and not the obvious alternative)

The useful triage behavior is the larger contextual screenshot, but making that the default would change the existing Select Element behavior for every install and could make captures larger or slower. Keeping the default at the selected element, then letting teams expand context explicitly, preserves the current behavior while still supporting AI-assisted review workflows.

The highlight is a border using the widget accent color instead of an overlay. An overlay can obscure the actual element styling, which is exactly the detail the screenshot is meant to preserve.

This branch is built directly on current main and does not include the full CSS-path metadata work or the private fixture cleanup work from the other open PRs.

Out of scope

This does not add a new selector metadata format. It only improves the visual evidence captured by Select Element screenshots.


Test plan

  • git diff --check passed.
  • npm run format:check passed.
  • make check passed. ESLint still reports the existing file-size warnings for src/widget/capture-flow.ts and src/widget/screenshot.ts; the critical audit gate passed with moderate-only audit output.
  • NODE_OPTIONS=--no-experimental-webstorage make test passed: 13 files, 236 tests. Plain make test hit this machine's experimental Node localStorage behavior before the rerun.
  • make build-all passed.
  • CI=true make test-e2e-shard SHARD=1/2 passed: 89 tests.
  • CI=true make test-e2e-shard SHARD=2/2 passed: 89 tests.
  • NODE_OPTIONS=--no-experimental-webstorage npx vitest run test/api.test.ts passed after the final caption wording change.

@neonwatty neonwatty added this pull request to the merge queue May 18, 2026
Merged via the queue into mean-weasel:main with commit 9334838 May 18, 2026
7 checks passed
@github-actions
Copy link
Copy Markdown

🎉 This PR is included in version 1.36.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants