ReplayLoop

Inspiration 💡

Software teams waste over 80% of debugging time trying to reproduce reported UI bugs. Reports are vague ("the checkout button doesn't work"), stack traces are missing, and developers struggle to recreate identical state transitions. Traditional AI coding assistants (like Copilot or Cursor) fail in these scenarios because they attempt to fix code blindly, without empirical runtime verification or visual proof. We built ReplayLoop to completely eliminate the "cannot reproduce" problem by turning vague reports into deterministic, verified AI patches.

What it does ⚙️

ReplayLoop is an autonomous, zero-touch self-healing engine. When a bug is reported, ReplayLoop:

1. Reproduces UI Bugs Visually: Uses Playwright to automatically execute user interaction sequences, capturing stack traces, screenshots, and WebM video recordings of the failure.
2. Generates Failing Assertions: Converts runtime exceptions into deterministic Vitest test suites (RED state).
3. Synthesizes AST Patches: Feeds minimal AST (Abstract Syntax Tree) context and stack traces to OpenAI Codex / GPT-5.6 to generate semantic repair intents.
4. Verifies Fixes Deterministically: Applies the patch locally and re-runs test suites to ensure a 100% test pass rate (GREEN state), outputting post-fix visual proof.

How we built it 🏗️

ReplayLoop is built as a clean, decoupled TypeScript monorepo using pnpm workspaces:

• Target App: A Vite + React application injected with deterministic bugs.
• Playwright Runner: A Node.js orchestration layer providing headless Chromium automation and screencast recording.
• Patch Engine: A custom engine that leverages OpenAI Codex APIs and ts-morph for precise AST manipulation.
• Dashboard: A Next.js 14 frontend to visualize the live healing sessions.

To rigorously prove the engine generalizes, we built a hidden tournament of 8 distinct runtime bugs (ranging from infinite useEffect loops to recursive call stack leaks). ReplayLoop successfully healed all 8 without any hardcoded knowledge or benchmark-specific rules.

Challenges we ran into 🚧

The biggest challenge was moving away from standard LLM string replacement. Traditional String.replace() approaches suffer from "line drift", formatting mismatches, and syntax corruption. We solved this by forcing the LLM to output a generic semantic RepairIntent (e.g., replace_node, wrap_try_catch), which our local PatchEngine translates into deterministic AST tree mutations using the ts-morph compiler API. This guarantees syntax integrity and allowed us to achieve a 100% success rate on our generalization tournament.

Accomplishments that we're proud of 🏆

Achieving a 100% success rate on our 8-bug Autonomous Repair Tournament. ReplayLoop successfully healed complex issues—like a React useEffect infinite dependency loop and a recursive call stack leak—completely autonomously. We are also incredibly proud of our Local AST Fallback Engine, which ensures offline deterministic repairs if network connectivity drops.

What we learned 🧠

We learned that the key to reliable AI coding agents is deterministic verification. LLMs inevitably hallucinate code, but by trapping the AI inside a deterministic test loop (Vitest) and a visual DOM loop (Playwright), we can reject bad patches and force the model to try again until it achieves a verified GREEN state.

What's next for ReplayLoop 🚀

Integrating directly into CI/CD pipelines (e.g., GitHub Actions) and ticketing systems (Jira/Linear). Imagine a bug report coming in, and ReplayLoop automatically commenting on the ticket with a video reproduction, the root cause analysis, and a verified Pull Request containing the AST patch.

Built With

• ast
• next.js
• openai
• playwright
• react
• ts-morph
• typescript
• vite
• vitest