Skip to content

docs: add Web UI screenshot to README#184

Merged
pftg merged 1 commit intomasterfrom
docs/add-web-ui-screenshot
Apr 12, 2026
Merged

docs: add Web UI screenshot to README#184
pftg merged 1 commit intomasterfrom
docs/add-web-ui-screenshot

Conversation

@pftg
Copy link
Copy Markdown
Collaborator

@pftg pftg commented Apr 12, 2026

Summary

Add screenshot of the SnapDiff Web UI report to README, showing side-by-side baseline vs current comparison.

Context

This was the #1 finding across 6 rounds of brutal honesty review (12+ reviewers). Every round flagged: "a visual testing gem with zero screenshots in the README." Text-only changes plateaued at 7/10 — this is the change needed to push past that.

Screenshot is compressed with pngquant (521KB → 106KB).

Test plan

  • Image renders on GitHub README
  • No code changes

🤖 Generated with Claude Code

Summary by Sourcery

Documentation:

  • Document the SnapDiff Web UI report with an embedded screenshot and clearer description of its viewing modes and controls.

Summary by CodeRabbit

  • Documentation
    • Added a visual screenshot preview to the README's "Web UI for Reviewing Screenshot Changes" section, providing users with a clear visual reference of the interface alongside its feature descriptions (view modes, zoom, annotation toggle, keyboard navigation, and search).

@sourcery-ai
Copy link
Copy Markdown
Contributor

sourcery-ai Bot commented Apr 12, 2026

Reviewer's guide (collapsed on small PRs)

Reviewer's Guide

This PR updates the README to include a compressed screenshot of the SnapDiff Web UI in the usage section, splitting one descriptive sentence into an introduction, an embedded image, and a follow-up list of UI features, with no code changes elsewhere.

File-Level Changes

Change Details Files
Embed a Web UI screenshot and clarify the surrounding description in the README usage section.
  • Split the existing single-sentence description of opening the HTML report into an introductory sentence, an embedded image, and a separate sentence listing key UI capabilities.
  • Add a Markdown image reference to the SnapDiff Web UI screenshot under docs/images/snap_diff_web_ui.png, placed immediately after the instruction to open the HTML report.
  • Ensure the descriptive text for view modes and navigation features remains present but is moved to follow the screenshot for better readability.
README.md

Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Apr 12, 2026

Warning

Rate limit exceeded

@pftg has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 20 minutes and 7 seconds before requesting another review.

Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 20 minutes and 7 seconds.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 464012ab-ecef-4e87-a540-c1d16717b980

📥 Commits

Reviewing files that changed from the base of the PR and between 320f3c9 and f67fefb.

⛔ Files ignored due to path filters (1)
  • docs/images/snap_diff_web_ui.png is excluded by !**/*.png
📒 Files selected for processing (1)
  • README.md
📝 Walkthrough

Walkthrough

Updated the README's "Web UI for Reviewing Screenshot Changes" section by adding an inline image preview from docs/images/snap_diff_web_ui.png beneath the instruction to open the HTML report, followed by the existing feature list.

Changes

Cohort / File(s) Summary
Documentation
README.md
Added inline image preview of the Web UI screenshot with adjusted text formatting to introduce the visual documentation of the HTML report's functionality.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Possibly related PRs

Poem

🐰 A screenshot blooms within our README's page,
Where UI features dance upon the stage,
No words alone can paint what eyes can see—
An image worth a thousand lines, you'll agree! 📸✨

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly and concisely describes the main change: adding a Web UI screenshot to the README documentation.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch docs/add-web-ui-screenshot

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown
Contributor

@sourcery-ai sourcery-ai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey - I've reviewed your changes and they look great!


Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
README.md (1)

116-116: Consider completing the sentence fragment.

The feature list is currently a sentence fragment. For improved readability, consider making it a complete sentence.

📝 Suggested wording improvement
-4 view modes (both/base/new/heatmap), per-image zoom, annotation toggle, keyboard navigation, and search.
+The UI includes 4 view modes (both/base/new/heatmap), per-image zoom, annotation toggle, keyboard navigation, and search.

Alternatively:

-4 view modes (both/base/new/heatmap), per-image zoom, annotation toggle, keyboard navigation, and search.
+Features: 4 view modes (both/base/new/heatmap), per-image zoom, annotation toggle, keyboard navigation, and search.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@README.md` at line 116, The README contains a sentence fragment ("4 view
modes (both/base/new/heatmap), per-image zoom, annotation toggle, keyboard
navigation, and search.")—make it a complete sentence by adding a verb and
subject; e.g., change that line to "Features include 4 view modes
(both/base/new/heatmap), per-image zoom, annotation toggle, keyboard navigation,
and search." or "Supports 4 view modes (...), per-image zoom, annotation toggle,
keyboard navigation, and search." Update the fragment text to one of these
full-sentence forms (or similar) in the README to improve readability.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@README.md`:
- Line 116: The README contains a sentence fragment ("4 view modes
(both/base/new/heatmap), per-image zoom, annotation toggle, keyboard navigation,
and search.")—make it a complete sentence by adding a verb and subject; e.g.,
change that line to "Features include 4 view modes (both/base/new/heatmap),
per-image zoom, annotation toggle, keyboard navigation, and search." or
"Supports 4 view modes (...), per-image zoom, annotation toggle, keyboard
navigation, and search." Update the fragment text to one of these full-sentence
forms (or similar) in the README to improve readability.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 230d976f-5756-4e58-9838-7c5dcbd803df

📥 Commits

Reviewing files that changed from the base of the PR and between 18bd171 and 320f3c9.

⛔ Files ignored due to path filters (1)
  • docs/images/snap_diff_web_ui.png is excluded by !**/*.png
📒 Files selected for processing (1)
  • README.md

Add screenshot of the SnapDiff Web UI report showing side-by-side
baseline vs current comparison. This was the #1 finding across 6
rounds of brutal honesty review — a visual testing gem needs visuals
in its README.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pftg pftg force-pushed the docs/add-web-ui-screenshot branch from 320f3c9 to f67fefb Compare April 12, 2026 23:48
@pftg pftg merged commit 38504bd into master Apr 12, 2026
2 checks passed
@pftg pftg deleted the docs/add-web-ui-screenshot branch April 12, 2026 23:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant