{"slug": "ai-made-code-review-the-bottleneck-attach-the-ui-to-your-pr", "title": "AI Made Code Review the Bottleneck. Attach the UI to Your PR", "summary": "A developer introduced twd-cli, a tool that records test-driven UI interactions as smooth, paced videos directly in pull requests, aiming to eliminate the manual review bottleneck created by AI-generated code. The tool captures real browser executions at full frame rate, with configurable pauses after commands, so reviewers can watch the actual flow without pulling the branch.", "body_md": "You open a frontend pull request. The diff is 400 lines, an AI agent wrote most of it, and the description says \"adds the checkout flow\". CI is green.\n\nYou read the diff. It looks reasonable. You still have no idea what the UI actually does.\n\nSo you do what you always do. You pull the branch, install dependencies, start the dev server, and click through the flow yourself.\n\nTen minutes later you approve the PR.\n\nThat ten minutes is the bottleneck now.\n\nAI made writing code dramatically faster. Reviewing frontend behavior did not.\n\nTests already reduce a large part of that uncertainty.\n\nWith [twd-js](https://twd.dev/), they execute inside a real browser, against the real DOM, with the network mocked so runs stay deterministic. A green run means the entire flow actually executed.\n\nBut a green run only tells the reviewer that the assertions passed.\n\nIt does not tell them what the user sees.\n\nWas the validation message attached to the correct field?\n\nDid the modal actually close?\n\nDoes the empty state look intentional, or does it look broken?\n\nThose are exactly the things reviewers still verify manually, and they are difficult to express as assertions alone.\n\nYour tests already drive the application through the exact flow under review.\n\nIf reviewers could simply watch that execution, they would not need to pull the branch just to understand the UI.\n\n`twd-cli`\n\ncan record the run:\n\n```\nnpx twd-cli run --record --test \"checkout flow\"\n```\n\nThat produces:\n\n```\ntwd-artifacts/checkout-flow.mp4\n```\n\nDrop the video directly into the pull request description.\n\nThe first time you try this, you discover something unexpected.\n\nThe tests finish in about a second.\n\nThe recording is technically correct.\n\nIt is also almost impossible for a human to follow.\n\nThe obvious solution is to stretch the recording afterwards.\n\nA simple ffmpeg filter can do that, but it stretches the same frames across a longer duration. As playback slows down, the effective frame rate drops.\n\n| Speed | Duration | Effective FPS |\n|---|---|---|\n| 1x | 1.00s | 30 |\n| 0.5x | 1.90s | 15.3 |\n| 0.25x | 3.90s | 7.7 |\n\nAt quarter speed, you're watching an 8 FPS video.\n\nIt also slows every moment equally. The interesting interactions and the idle time both become longer. The result is not easier to understand. It is simply slower.\n\nMost testing tools record a browser that is being driven from the outside.\n\nThe recording is a byproduct of automation, so once execution has finished, post processing is your only option.\n\nTWD works differently.\n\nIts commands execute as JavaScript inside the page itself.\n\nBecause TWD owns the command loop, it can control **when commands execute**, not just how the recording is encoded.\n\nInstead of stretching frames afterwards, it spaces out execution while the test is running.\n\nFrames are still captured at full frame rate.\n\nPauses happen only after meaningful interactions.\n\nTyping is paced character by character instead of appearing all at once.\n\nThat produces a recording that feels natural to watch without sacrificing smoothness.\n\nWhich is why recordings are paced by default:\n\n```\n# Default: 300ms pause after each command\nnpx twd-cli run --record --test \"checkout flow\"\n\n# Better for demos or stakeholder reviews\nnpx twd-cli run --record --record-pace 500 --test \"checkout flow\"\n```\n\nIn practice, values between **200ms and 500ms** are usually enough to make interactions comfortable to follow while keeping recordings concise.\n\nThe result is still a smooth 30 FPS video.\n\nOnly the moments that matter become easier to observe.\n\nThe reviewer watches the actual flow.\n\nDriven by the actual tests.\n\nRunning against the actual application.\n\nNot a screen recording someone remembered to make.\n\nNot a Loom video that becomes outdated after the next commit.\n\nThe recording is regenerated every time the tests run.\n\nThe review changes from:\n\n\"Does this diff look correct?\"\n\nto:\n\n\"Is this the behavior we actually wanted?\"\n\nThat is the question worth a human's attention.\n\nEvery improvement in software development moves the bottleneck somewhere else.\n\nToday, AI has made writing code significantly faster.\n\nFrontend review is still largely manual because reviewers need to understand behavior, not just source code.\n\nA green checkmark confirms that the tests passed.\n\nIt does not show what happened.\n\nBrowser based tests can produce something much more valuable than a success badge.\n\nThey can produce evidence.\n\nSometimes, that evidence is a short video that saves every reviewer ten minutes.\n\n```\nnpx twd-cli run --record --test \"the flow you changed\"\n```\n\nIf your tests already know how to reproduce the feature, your pull request should show it.\n\nSee the [Recording Runs documentation](https://twd.dev/recording) for all available options.", "url": "https://wpnews.pro/news/ai-made-code-review-the-bottleneck-attach-the-ui-to-your-pr", "canonical_source": "https://dev.to/kevinccbsg/ai-made-code-review-the-bottleneck-attach-the-ui-to-your-pr-575", "published_at": "2026-07-29 18:57:30+00:00", "updated_at": "2026-07-29 19:03:03.780036+00:00", "lang": "en", "topics": ["developer-tools", "ai-agents"], "entities": ["twd-js", "twd-cli", "ffmpeg"], "alternates": {"html": "https://wpnews.pro/news/ai-made-code-review-the-bottleneck-attach-the-ui-to-your-pr", "markdown": "https://wpnews.pro/news/ai-made-code-review-the-bottleneck-attach-the-ui-to-your-pr.md", "text": "https://wpnews.pro/news/ai-made-code-review-the-bottleneck-attach-the-ui-to-your-pr.txt", "jsonld": "https://wpnews.pro/news/ai-made-code-review-the-bottleneck-attach-the-ui-to-your-pr.jsonld"}}