GhostPR (AutoFix AI)

Autonomous visual bug reproduction from screen recordings to passing Playwright E2E tests and verified Git Pull Requests with zero cloud GPU compute.

Comment

Inspiration

Every frontend engineer and engineering team has lived this frustration: a user or QA tester files a bug report with a 20-second screen recording showing a broken component. An engineer is assigned the ticket and spends 2 to 3 hours trying to reconstruct the exact environment, user inputs, and timing. Too often, the ticket gets closed with the dreaded label: "Closed: Cannot Reproduce". We asked: What if a bug recording didn’t just sit in a ticket, but autonomously reproduced itself into a typed Playwright test, diagnosed the codebase, patched the bug, and opened a verified GitHub Pull Request? That vision became GhostPR (AutoFix AI).

What it does

The Kiroween Frankenstein Category challenges developers to stitch together disparate, seemingly incompatible technologies into a unified and surprisingly coherent creation. GhostPR welds four completely separate worlds into a single, closed-loop CLI engine:

  1. The Senses (Video & Telemetry Streams): Ingests raw .webm browser screen recordings and interaction markers from Cloudflare R2 via QuickCast without expensive cloud GPUs.
  2. The Laboratory (Playwright Automation): Synthesizes deterministic TypeScript reproduction specs (tests/repro_<id>.spec.ts) and executes them to verify the failure (Red State confirmation).
  3. The Brain (Spec-Driven AST Self-Healing): Diagnoses the repository source code and applies defensive code patches guided by Kiro steering directives.
  4. The Hands (Git Version Control): Isolates changes in a fix/ghost-pr-<id> branch, commits the test and fix, and opens a structured Pull Request on GitHub via Octokit.

How we built it

GhostPR was built from the ground up in Kiro Desktop IDE, strictly adhering to Spec-Driven Development:

  • Architectural Directives (.kiro/steering/steering.md): We codified non-negotiable architectural guardrails upfront:
    1. Zero Cloud GPU: Video keyframe extraction must run locally via native FFmpeg binaries (\$0.00 infrastructure cost).
    2. Deterministic Time Synchronization: DOM interaction markers must be anchored to video timestamps.
    3. Invariant Assertions: Reproduction specs must use scoped test.step() blocks with DOM visibility and uncaught error checks.
    4. Defensive AST Patching: Patches must favor defensive shielding (optional chaining ?. and fallback state handlers).
  • Formal Contracts (.kiro/specs/ghost-pr-spec.md): Formalized requirements REQ-1 through REQ-6 defining the exact contract for each stage of the pipeline.
  • Pre-Patch Verification Hook (.kiro/hooks/pre-patch-verification.js): Enforced that no code change can be committed unless Playwright passes after patching.

Challenges we ran into

Building an autonomous code-generation pipeline presents subtle pitfalls:

  1. The False-Positive Trap: An early version assumed the generated Playwright test would reproduce the bug without actually running it. During our Kiro IDE architectural audit, the Kiro agent flagged this critical gap: > "Stage 2 is asserting a lie. Without running executePlaywrightSpec(), the self-healing loop has no confirmed failure to diagnose."
    Guided by Kiro, we dynamically wired Playwright execution into synthesizeTest(), closing the Red-to-Green loop.
  2. Hydration and Boot Exception Catching: Initially, our pageerror listener was registered after navigation had already begun. Kiro identified that any exception thrown during early DOM hydration would be missed. We hoisted the error trap before `page.goto().
  3. Cross-Directory Drift: To prevent relative path issues when run from various directories on a judge's machine, we normalized all paths upfront with `path.resolve().

Accomplishments that we're proud of

True Closed-Loop Self-Healing:* GhostPR does not guess. It proves the bug reproduces with a failing Playwright test (Red), applies the patch, and proves the bug is fixed with a passing test (Green).

  • Zero Cloud GPU (\$0.00/month Overhead): By utilizing local FFmpeg binaries and local Playwright execution, GhostPR requires zero GPU cloud clusters and runs end-to-end in under 25 seconds.
  • Live Online Web Support: GhostPR supports both local dev servers and live production deployments (such as GitHub Pages or Vercel) with instant URL resolution.
  • Full Kiro Compliance: 100% of steering directives, specs, and hooks are tracked directly in the root repository.

What we learned

Spec-Driven Development with Kiro transforms how AI agents assist developers. By defining clear architectural boundaries in .kiro/steering/ before prompting the model, we eliminated hallucinations and ensured every piece of synthesized code adhered to production standards.

What's next for GhostPR (AutoFix AI)

  • Multi-File AST Transformations: Expanding code-fixer.js to handle complex cross-component state updates in Next.js and React Server Components.
  • Continuous CI/CD Bot: Packaging GhostPR into a GitHub Action that automatically triggers whenever a user submits a video bug report on a GitHub Issue.
  • Automated Video Timestamp Annotation: Automatically baking video replay links directly into Playwright trace files for seamless visual debugging.

Built With

Share this project:

Updates

Submission history