Temporal Video Scrubber & Causality AST Graph
Playwright Reproduction Test Synthesizer in Live Terminal
Self-Healing Surgical Patch & Real-Time Green Pass Verification

Inspiration

Every engineering team has experienced the friction of receiving a 10-second screen recording on Slack or Jira with the message: "The submit button broke, please fix."

Without console logs or server stack traces, engineers lose up to 30% of their sprint velocity:

Scrubbing ambiguous videos frame-by-frame
Trying to reverse-engineer client-side state
Grepping blindly through tens of thousands of lines of code

We asked: What if an AI could watch a screen recording like forensic flight data, extract user clicks, isolate the root-cause line of code in the AST, and prove remediation with a verified Playwright reproduction test?

That kernel became ChronoTrace AI.

What It Does

ChronoTrace AI transforms ambiguous video bug reports into deterministic, verifiable software fixes across four synchronized quadrants:

Temporal Video Scrubber & Frame Archaeology: Parses user actions frame-by-frame with dynamic cursor tracking overlays and glowing bounding boxes marking the target DOM element under the pointer.
Deterministic AST Root-Cause Localization: Visualizes the 4-stage causality propagation chain: $$\text{User Trigger} \longrightarrow \text{DOM Component} \longrightarrow \text{AST Node} \longrightarrow \text{Runtime Exception}$$ Pinpoints the exact file and fault line in the repository (e.g., src/features/cart/reducer.ts:42).
Playwright Reproduction Test Synthesizer: Synthesizes an executable Playwright reproduction test script that simulates user interactions. Runs inside a streaming virtual terminal with live stdout and exit codes.
Self-Healing Diff & Verification Runner: Generates a surgical side-by-side patch diff. Clicking "Apply Patch & Verify" re-runs the Playwright test suite against the patched source in real time, validating that the bug is permanently eliminated with 0 regressions.
Built-in Benchmark Suite & Drag-and-Drop: Pre-loaded with 3 reproducible bug benchmarks (The Spinning Checkout Trap, The Z-Index Modal Prison, Negative Inventory Underflow) plus custom MP4/WebM video upload support.

How We Built It

Frontend & Architecture: Next.js 15 (App Router), React 19, TypeScript 5.7, and Tailwind CSS. Temporal Canvas Player: Custom HTML5 canvas engine with coordinate interpolation for sub-100ms scrubbing sync. Autonomous Test Synthesis: Algorithmic parser translating visual bounding boxes and temporal clicks into deterministic Playwright locator assertions (page.getByRole(), expect().toBeVisible()). Deployment: Production serverless edge build hosted on Vercel with zero cold starts. Devpost Learn Discipline: Built strictly using the challengepost/learn-ai-basics sequence (1-start $\rightarrow$ 2-scope $\rightarrow$ 3-prd $\rightarrow$ 4-spec $\rightarrow$ 5-build $\rightarrow$ 6-ship).

Challenges We Ran Into

Eliminating AI Hallucinations: Traditional LLMs guess speculative solutions when asked to "fix a video bug." By applying inverted planning and synthesizing the Playwright reproduction test first, the AI is strictly bound by whether the test transitions from red to green.
Sub-100ms Temporal Synchronization: Scrubbing video frames while synchronously updating DOM bounding boxes, AST causality nodes, and line numbers required an event-driven timestamp listener with zero UI lag.
Strict Proof-of-Concept Scoping: Resisting scope creep (such as trying to support every web framework at once) and focusing on perfecting the 1-thing core journey with unmatched fidelity.

What We Learned (Devpost Learn Methodology)

The Devpost Learn curriculum fundamentally changed our approach to AI-assisted software development: The Power of Upfront Planning: By defining and approving scope.md, prd.md, and spec.md before writing any code, we avoided architectural drift and knew our exact acceptance criteria. The 1-Thing Rule: Sizing our proof-of-concept to do one complete, cohesive task end-to-end made the final product far more reliable and impressive than a dozen half-finished ideas.

What's Next for ChronoTrace AI

Direct GitHub Action / CI bot that comments with synthesized Playwright tests on new bug reports
Bidirectional source mapping for React Native and Flutter mobile recordings
One-click PR creation via GitHub REST API