👻 How I Built GhostPR: Turning User Screen Recordings into Verified Git Pull Requests with Kiro

Milmann A — Sat, 31 Oct 2026 22:32:26 +0000

👻 Target Hackathon: Kiroween 2026
— Frankenstein Category ($100k Prize Pool)
Mandatory Hashtags: #KiroweenHackathon26 #AWS #Kiro #Playwright #OpenSource
Repository: https://github.com/Miladmet/ghost-pr

Author: Milmann Admettre (@admettre
)

The Universal Frontend Nightmare: "Cannot Reproduce"

Every frontend engineer and engineering manager has lived this scenario: A user reports an obscure bug. They upload a 20-second screen recording showing a broken checkout modal or a glitchy video canvas. The QA ticket gets created, and an engineer spends 3 hours trying to recreate the exact environment, state, and click sequence.

Half the time, the ticket gets closed with the dreaded label:
Closed: Cannot Reproduce (Works on My Machine).

What if a bug report didn’t just contain a video, but automatically converted itself into a reproducible Playwright E2E test, diagnosed the codebase, patched the bug, and opened a ready-to-merge GitHub Pull Request?

That is the vision behind GhostPR (AutoFix AI).

In this post, I’ll walk through how I used Kiro Desktop IDE and Spec-Driven Development to stitch together video streams, headless browser automation, and AST code healing into a unified CLI engine for the Kiroween 2026 Frankenstein Category.

Why GhostPR is a "Frankenstein" Creation

The Kiroween Frankenstein Category challenges developers to take seemingly incompatible, disparate components and weld them into a coherent, powerful creation.

GhostPR brings together four wildly different systems:

The Senses (Video & DOM Streams): Browser screen recordings stored on Cloudflare R2 via QuickCast.
The Laboratory (Headless Automation): @playwright/test synthesizing deterministic TypeScript E2E specs.
The Brain (Spec-Driven AI): Kiro steering directives enforcing invariant assertions and defensive patching.
The Hands (Version Control): GitHub Octokit automating isolated git branch creation and verified Pull Requests.

None of these tools were designed to talk to each other out of the box. GhostPR acts as the neural bridge connecting them into an autonomous, closed-loop pipeline.

The Secret Weapon: Kiro Spec-Driven Development

When building an autonomous tool that writes and modifies code, LLM hallucinations can be catastrophic. If an AI agent attempts to patch code without proving the bug exists first, it risks breaking unrelated features.

To solve this, I built GhostPR strictly using Kiro's Spec-Driven Development paradigm:

Architectural Boundaries in .kiro/steering/steering.md

Before writing a single line of JavaScript, I created .kiro/steering/steering.md. This established non-negotiable architectural guardrails:

Zero Cloud GPU: All video processing must run locally via native FFmpeg binaries ($0.00/mo infrastructure cost).
Deterministic Time Sync: Video keyframes and DOM interaction markers must be anchored to relative timestamps.
Invariant Scoped Syntax: Playwright specs must use scoped test.step() syntax with strict DOM assertions.
Defensive AST Patching: Patches must favor optional chaining (?.) and safe fallback states.

Formal Requirements in .kiro/specs/ghost-pr-spec.md

I codified the 4-stage pipeline into 6 verifiable requirements (REQ-1 through REQ-6), ensuring each stage had a defined contract:

REQ-1: Ingest .webm stream from Cloudflare R2 without cloud GPU compute.
REQ-2: Extract 4 visual keyframes and parse interaction telemetry.
REQ-3: Synthesize tests/repro_.spec.ts.
REQ-4: Search target repository AST for error tokens.
REQ-5: Apply defensive patch and verify green execution.
REQ-6: Create Git branch fix/ghost-pr- and dispatch Pull Request.
How Kiro IDE Caught 4 Critical Architectural Gaps

One of the most impressive moments during development was when I loaded GhostPR into Kiro Desktop IDE and ran an architectural audit.

Kiro didn’t just check for syntax errors; it analyzed the entire dataflow against our steering directives and identified 4 subtle architectural gaps:

The "Disconnected Execution" Gap (Critical):
synth-test.js was generating the Playwright spec, but had hardcoded failureConfirmed: true without actually executing Playwright. Kiro pointed out that our self-healing loop was asserting a false positive:

"Stage 2 is asserting a lie. REQ-5 depends on running the test to confirm red state before diagnosing."

The Fix: We wired executePlaywrightSpec() directly into synthesizeTest(), setting failureConfirmed: !execResult.passed.

The Late pageerror Listener:
The error trap was declared inside a test.step() block after page.goto(). Kiro caught that any exception thrown during initial page boot or hydration would be missed.

The Fix: Hoisted the listener to the very top of the test body before navigation:

typescript
test('Autonomous E2E reproduction and state verification', async ({ page }) => {
// Hoist error trap BEFORE navigation to capture boot & hydration exceptions
const pageErrors = [];
page.on('pageerror', err => pageErrors.push(err.message));
await page.goto(targetUrl, { waitUntil: 'domcontentloaded' });
...

CWD Relative Path Drift:
Normalized all input and output paths upfront with path.resolve() so GhostPR runs identically from any working directory.

Stale Script Cleanup:
Removed a dead "start": "node src/server.js" entry in package.json and pointed it directly to src/cli.js.

After these 4 fixes were applied, Kiro inspected the codebase again and delivered the official sign-off:

"GhostPR is ready for competition submission. The red-to-green self-healing loop is now genuinely closed."

The 4 Stages in Action: A 30-Second Walkthrough

Here is what happens when you run a single CLI command:

bash
node src/cli.js --session "qc_bt6mrt8n" --repo "./" --dry-run
Stage 1: Zero-Cloud-GPU Visual Ingestion

GhostPR streams the .webm recording from Cloudflare R2 and extracts visual keyframes at key intervals using local FFmpeg binaries. It parses embedded interaction markers—capturing the exact DOM targets clicked and input values entered.

Stage 2: Autonomous Playwright Spec Synthesis (Red State)

GhostPR generates tests/repro_qc_bt6mrt8n.spec.ts. It immediately runs the spec in headless Chromium. Because the unpatched bug exists, Playwright fails—confirming that the test genuinely reproduces the failure.

Stage 3: AST Diagnosis & Defensive Patching (Green State)

With the exact error message and failing selector in hand, GhostPR scans the codebase, locates the offending line, and synthesizes a defensive AST patch (e.g. shielding null pointer exceptions with optional chaining).
It reapplies the Playwright test. The test passes green.

Stage 4: Verified Git Pull Request Dispatch

GhostPR checks out an isolated branch (fix/ghost-pr-qc_bt6mrt8n), commits the reproduction test and the patch, and uses Octokit to open a GitHub Pull Request with the video keyframes and Playwright test proof embedded in the PR description.

Key Takeaways from Building with Kiro
Spec-Driven Development Prevents AI Drift: Defining .kiro/steering/steering.md upfront acted as an architectural anchor. Whenever I asked Kiro to review or refine code, it evaluated changes against our specifications rather than hallucinating new patterns.
Local-First is Faster and Cheaper: By keeping FFmpeg and Playwright local, GhostPR incurs $0.00/month in cloud compute costs and executes complete bug reproductions in under 25 seconds.
Closing the Loop Matters: AI that generates code without running tests is just an expensive auto-complete. GhostPR's superpower is the Red-to-Green verification loop—it never submits a PR unless the synthesized test fails first and passes after.
Try GhostPR & Explore the Code

GhostPR is fully open-source under the MIT License:

🐙 GitHub: https://github.com/Miladmet/ghost-pr
📜 Kiro Steering & Specs: Explore .kiro/steering/steering.md
💡 Hackathon Entry: Kiroween 2026 Devpost

Built by Milmann Admettre for Kiroween 2026.

DEV Community: Milmann A

👻 How I Built GhostPR: Turning User Screen Recordings into Verified Git Pull Requests with Kiro