Skip to content

Redesign the compare report as a single-page triage UI#53

Merged
jeremyfelt merged 1 commit into
trunkfrom
report-redesign
Jun 16, 2026
Merged

Redesign the compare report as a single-page triage UI#53
jeremyfelt merged 1 commit into
trunkfrom
report-redesign

Conversation

@jeremyfelt

Copy link
Copy Markdown
Member

Replaces the flat per-comparison report pages with one static reports/index.html that embeds every result as JSON (window.REGLANCE) and renders three views client-side from the location hash — no framework, no network access (opens straight from disk).

Views

  • Overview — results grouped by page, changed-only by default, diff thumbnails, +added −removed HTML counts, search, and full keyboard triage (worst-first j/k queue, Enter to compare, space quick look, h HTML diff, ? shortcuts).
  • Comparison — swipe, side-by-side, onion skin, diff overlay, and blink modes.
  • HTML diff — unified diff with line numbers, hunk headers, and collapsed unchanged regions.

Auto light/dark via CSS light-dark(); the "Quiet" design direction from the handoff.

Generator changes

  • report.mjs: new buildHtmlDiff() emits changed-line counts and unified-diff hunk JSON (replacing the boolean Yes/No signal); generateReport() groups per-slug results into one entry per page and writes the single page with run metadata (compared/baseline timestamps, duration).
  • compare.mjs: compareSlug() returns HTML add/del/hunks inline and no longer writes per-result report or html-diff files; compare() gathers run metadata and builds the single report.

Templates

New index.html shell plus assets/reglance.css and assets/app.js (vanilla renderer). Removes the old report.html, the index table, diff-viewer.html, html-diff.html, and their stylesheets/script.

Notes

  • Data-derived values (page keys, URLs, raw HTML source) are rendered via textContent, and the embedded JSON neutralizes </script> — verified by tests and a headless-browser smoke check.
  • Tests rewritten for the new API (npm test → 111 passing); npm run lint clean. eslint ignores the design-handoff prototypes.
  • The design_handoff_reglance_report/ reference bundle is intentionally not included in this branch.

🤖 Generated with Claude Code

Replace the flat per-comparison report pages with one static
reports/index.html that embeds every result as JSON (window.REGLANCE)
and renders three views client-side from the location hash, with no
framework and no network access:

- Overview: results grouped by page, changed-only by default, diff
  thumbnails, +added/-removed HTML counts, search, and full keyboard
  triage (worst-first queue).
- Comparison: swipe, side-by-side, onion skin, diff overlay, and blink
  modes.
- HTML diff: unified diff with line numbers, hunk headers, and collapsed
  unchanged regions.

Generator changes:
- report.mjs: buildHtmlDiff() emits changed-line counts and unified-diff
  hunk JSON (replacing the boolean Yes/No signal); generateReport()
  groups per-slug results into one entry per page and writes the single
  page with run metadata (compared/baseline timestamps, duration).
- compare.mjs: compareSlug() returns HTML add/del/hunks inline and no
  longer writes per-result report or html-diff files; compare() gathers
  run metadata and builds the single report.

Templates: new index.html shell plus assets/reglance.css (the "Quiet"
direction, auto light/dark) and assets/app.js (vanilla renderer). Remove
the old report.html, index.html table, diff-viewer.html, html-diff.html,
and their stylesheets/script.

Tests and docs updated; eslint ignores the design handoff prototypes.

Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
@jeremyfelt jeremyfelt merged commit b220a65 into trunk Jun 16, 2026
2 checks passed
@jeremyfelt jeremyfelt deleted the report-redesign branch June 16, 2026 19:21
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