Skip to content

Modernize the comparison UI and add a review workflow - #18

Merged
andiwand merged 1 commit into
mainfrom
modernize-compare-page
Aug 28, 2026
Merged

Modernize the comparison UI and add a review workflow#18
andiwand merged 1 commit into
mainfrom
modernize-compare-page

Conversation

@andiwand

@andiwand andiwand commented Aug 28, 2026

Copy link
Copy Markdown
Member

Reworks the pages served by compare-html-server so that a regression review can be done from the compare page itself, and moves the markup out of Python f-strings into Jinja templates plus static assets (shipped via [tool.setuptools.package-data]).

Compare page

  • Update reference button (and u) copies the monitored file over the reference one, then reloads both panes and the diff.
  • Accepted indicator: a file whose reference was updated is marked ✓ accepted next to its live status for the rest of the session. The mark is dropped again if the monitored file changes afterwards. In-memory only, nothing is written to disk.
  • Previous / next navigation with a position counter (5 / 9) and a diffs only toggle that skips files that already match.
  • View modes (A / A|B / B), a collapsible and expandable diff panel, and keyboard shortcuts (←→ jk 1 2 3 d u r Esc ?) that also work while the focus is inside a pane.
  • The diff strip became usable: raw difference images are almost black, so differing pixels are painted red, differing regions are drawn as overlay bars (a handful of pixels disappears when the image is scaled into a 72px column), a marker tracks the visible part of the document, clicking jumps both panes to that position, and it reports where the first difference is.
  • Scroll sync is attached on every iframe load — previously the listeners were registered on the pre-navigation window and dropped again.

Overview page

  • The per-status counts moved into the filter buttons (All 9 · Differences 6 · Pending 0 · Same 3 · Accepted 1) instead of a separate chip row that named the same states in a different order.
  • The status cell is a plain table cell again, so the columns line up.
  • Added an Accepted filter, toasts instead of alert(), and polling that patches rows in place and only reloads when the set of files actually changed.

Fixes found on the way

  1. A comparison could start before submit() had stored its future, so compare() raised RuntimeError("Path not submitted for comparison") inside the worker and the file stayed on pending forever. Reproduced on every run.
  2. A failing comparison (file vanished, render error) left the same permanent pending; it is now logged and reported as different.
  3. Screenshots are taken in a 10000px tall window, so a typical page was ~5% content and ~95% blank and every position derived from a diff was off by that factor ("first diff at 24%" for a difference at 51%). Renders are now cropped to the content, which also fixes html-render-diff's first error at X% output.
  4. Rendered diffs are cached by both inputs' mtimes; previously every request drove the browser again, and the compare page needs the image and its statistics.
  5. Paths are resolved against their root before serving or copying.

Compatibility

update_ref is now POST /api/update_ref/<path>. The previous GET /update_ref/<path> and /status are kept for scripted use.

Tested manually against --driver chrome, including from a clean install of the package to confirm the templates and static files are packaged.

🤖 Generated with Claude Code

Move the pages out of Python f-strings into Jinja templates and static
assets, and turn the compare page into something a review can actually be
done in: update the reference from the page, see whether a diff was
accepted, and step through the documents.

Compare page:
- "Update reference" copies the monitored file over the reference one
- files whose reference was updated are marked accepted for the session;
  the mark is dropped again when the monitored file changes afterwards
- previous/next navigation with a position counter and a "diffs only"
  toggle that skips files that already match
- view modes (A / A|B / B), a collapsible diff panel and keyboard
  shortcuts, which also work while the focus is inside a pane
- the diff strip paints differing pixels red, draws the differing regions
  as overlay bars (a few pixels vanish when the image is scaled into the
  column), tracks the visible part of the document and jumps both panes to
  a clicked position

Overview page: the per-status counts moved into the filter buttons, the
status cell is a plain table cell again so the columns line up, and
statuses are patched in place instead of reloading the whole page.

Fixes found on the way:
- a comparison could start before submit() had stored its future, which
  raised inside the worker and left the file on "pending" forever
- a failing comparison left the same permanent "pending"
- screenshots are cropped to the content, so positions and areas derived
  from a diff refer to the page instead of the very tall render window
- rendered diffs are cached by the inputs' mtimes instead of re-rendering
  per request
- paths are resolved against their root before serving or copying

update_ref is now POST /api/update_ref/<path>; the previous GET endpoint
and /status are kept for scripted use.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019rpRWyT4az4Lz1irRRWrPD
@andiwand
andiwand merged commit 346d800 into main Aug 28, 2026
6 checks passed
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