ReproSight — From Bug Screenshot to Verified Fix

Turn UI bug screenshots into reproducible failures, minimal fixes, and auditable proof.

Comment

Inspiration

Most UI bug reports begin with incomplete evidence: a screenshot, a short sentence, and “it does not work.” The difficult part is not producing a plausible patch. It is reproducing the exact user-visible failure, proving that the patch solves it, and preserving enough evidence for another developer to trust the result. We built ReproSight to give Codex an evidence-first debugging workflow: See it. Reproduce it. Fix it. Prove it. What it does ReproSight is a local-first Codex plugin that turns a visual bug report into a verified repair trail. A developer provides a screenshot, a short description, and an application URL or route. The $reprosight skill then guides Codex through a strict workflow:

  1. Capture the reported symptom and environment.
  2. Reproduce the behavior in a real browser.
  3. Create or run a regression test before changing product code.
  4. Confirm that the test fails for the reported reason.
  5. Apply the smallest justified patch.
  6. Run the unchanged test again.
  7. Store commands, exit codes, changed files, and before/after screenshots.
  8. Generate a shareable evidence report. A fix is not marked as verified unless the original failure was reproduced and the same regression test passes after the patch. ## How we built it ReproSight combines:
  9. A reusable Codex skill defining the debugging workflow and completion gates.
  10. A dependency-free Node.js evidence engine for storing runs, stages, commands, artifacts, and results.
  11. Playwright for real Chromium reproduction and regression testing.
  12. A local dashboard for reviewing the complete investigation history.
  13. Exportable HTML, Markdown, and JSON evidence reports.
  14. GitHub Actions verification on Node.js 20 and 22. Each investigation becomes an auditable case containing intake information, reproduction evidence, the failing test, patch details, passing verification, visual proof, and a final verdict. ## How Codex and GPT-5.6 were used ReproSight was built with Codex powered by GPT-5.6. Codex handled repository exploration, plugin scaffolding, implementation of the Node.js runtime and dashboard, browser reproduction, Playwright regression-test creation, minimal patching, verification, documentation, and submission assets. GPT-5.6 helped transform the original idea into an evidence-gated agent workflow: reproduce the exact symptom before editing code, require a failing regression test, constrain the patch to the smallest justified change, and accept completion only when the unchanged test passes with visible before-and-after proof. The workflow was then invoked in Codex to produce the auditable run shown in the demo, dashboard, and final report. Challenges we ran into The largest challenge was distinguishing a plausible fix from a verified fix. An agent can often recognize suspicious code immediately, but editing it before reproducing the failure weakens the evidence. We introduced explicit workflow gates requiring a failing-before result prior to patching and a passing-after result using the same regression test. Another challenge was connecting browser evidence, terminal commands, screenshots, changed files, and test outcomes into one coherent report. We created a structured run format so every artifact remains tied to a specific stage and outcome. We also kept the plugin safe for local repositories by validating paths, restricting run identifiers, preserving unrelated files, and recording exactly what changed. Accomplishments that we're proud of
  15. A complete Codex plugin invoked with $reprosight.
  16. Real browser-based failing-before and passing-after verification.
  17. A minimal-patch workflow with explicit evidence gates.
  18. A local dashboard with complete case history.
  19. Before/after screenshots connected to their corresponding test stages.
  20. Shareable HTML, Markdown, and JSON reports.
  21. A reproducible demo where the cart badge remains at 0 and changes to 1 after a one-line fix.
  22. Seven automated tests covering the evidence engine and HTTP API.
  23. Green GitHub Actions checks on Node.js 20 and 22.
  24. A public v0.1.0 release and narrated 81-second judging demo. What we learned Effective agentic debugging depends as much on workflow design as model capability. Clear evidence requirements, safe autonomy boundaries, and explicit completion criteria make Codex more reliable. Multimodal input becomes more valuable when it is connected to browser reproduction, an executable regression test, and a persistent audit trail. The best developer tools do not merely generate code—they make their conclusions inspectable. What's next for ReproSight Next, we want to add:
  25. GitHub Issues and pull-request integration.
  26. Automatic visual-difference highlighting.
  27. Playwright trace and console-log support.
  28. Mobile and multi-page reproduction.
  29. Downloadable CI evidence artifacts.
  30. Team review and approval workflows.
  31. A hosted dashboard for sharing verified runs. Our goal is to make “show me that it is fixed” a standard, automated part of every Codex debugging task. Try it Repository: https://github.com/toMYASDESIGNER/ReproSight Release v0.1.0: https://github.com/toMYASDESIGNER/ReproSight/releases/tag/v0.1.0 Demo video: https://youtu.be/cMF6H5p9rYk

Built With

Share this project:

Updates