I built TemplateManagerSheet. 530 lines of React. Radix UI Sheet component. Category management, bill template CRUD, drag-to-reorder, preset loading, free tier limit enforcement, pro access gating.
Fully functional. Fully tested. Nobody could see it.
For weeks.
The code was clean. Category sections with collapsible bill lists. An "Add Category" form with validation. Bill count display showing 14/inf for pro users and 6/10 for free. A "Load Presets" button that bootstraps default categories. Type-safe props. Optimistic updates via useFetcher. I'd open the file, read through it, feel good about the architecture... move on to the next thing.
The component lived in components/finance/budget/TemplateManagerSheet.tsx. It was imported nowhere. Rendered nowhere. The budget route -- the page it was literally built for -- didn't know it existed.
530 lines of working code. Just... sitting there. In the void.
A Browser Agent Found It
I didn't find the bug. A browser agent did.
I was testing the category type feature -- expense vs allocation toggles. Round 2 of browser testing. I told the agent: "Click the gear icon to open the Template Manager."
The agent came back: "I cannot find a gear icon on this page."
I thought the agent was broken. Like... okay, maybe I described the UI wrong, maybe it's looking in the wrong spot. I checked the component. The component was fine. I checked the route.
The route had no gear icon. The route had never rendered TemplateManagerSheet. The import wasn't there. The state wasn't there. The button wasn't there.
I don't know how to explain this without sounding like an idiot. I wrote 530 lines of a component... and forgot to put it on the page. That's it. That's the bug. EGO alert... I'm sitting here writing articles about speedrunning payment provider migrations and I literally forgot to render a component.
The Fix Was One useState
The fix was embarrassing:
const [isTemplateManagerOpen, setIsTemplateManagerOpen] = useState(false);
One useState. One button in the header. One <TemplateManagerSheet> tag with props wired up. Maybe 15 minutes of work. The component had been invisible for weeks.
I also had to add hasAccess() to the budget loader for entitlement gating, pull categories, templates, hasProAccess, billCount, and canAddMore from the loader data, and pass all of it down. But the real bug was simpler than any of that.
I forgot to put it on the page.
The Bug Inside the Bug
Regardless... there was a bug inside the bug. Round 1 of browser testing had partially loaded bill presets -- only the HOME category made it through because the category_type database column didn't exist yet (migration wasn't pushed to remote). When I fixed the Template Manager and ran Round 2, the preset loader saw existing categories and bailed: if (categories.length > 0) return.
One stale HOME category from a failed Round 1 made the loader think everything was loaded. Fixed it to check each default category by name, case-insensitive. Create what's missing. Skip what exists. Idempotent.
Three rounds of browser agent testing to get the full feature verified. Round 1 caught the unpushed migration. Round 2 caught the unmounted component. Round 3 confirmed everything worked. Three boss fights to clear one dungeon. I wrote up the full AI browser testing workflow that caught this and a dozen other bugs unit tests missed.
The Gap Between Built and Shipped
But yeah... here's the thing that actually bothers me about this.
I had tests. The TemplateManagerSheet functions worked. The action handlers worked. The data layer worked. Every test passed. But no test asked: "Is this component actually rendered on a page?"
Unit tests verify behavior in isolation. They test that handleLoadBillPresets creates the right categories. They test that guardReadOnly blocks mutations on frozen profiles. They test that the Zod schema validates the right shape. None of them test whether a human -- or a robot clicking buttons -- can actually reach the feature.
This is the gap between "the code works" and "the product works." The code was correct. The product was missing a feature nobody noticed was missing... because nobody was clicking the button that didn't exist.
The Silent Bug
I think about this bug more than the ones that crashed production. Those are loud. They page you. They have stack traces and error codes.
This one was silent. A fully functional component sitting in the codebase, doing nothing, bothering nobody. It would have stayed invisible forever if I hadn't pointed a browser agent at the page and said "click the gear icon."
The lesson isn't "write more tests." I don't know... maybe it's "test the thing you ship, not the thing you build." The thing I built was a component. The thing I shipped was a page without it. The 800-line file size rule keeps components small enough to reason about... but small pieces still need to be assembled.
530 lines. Weeks invisible. Fixed by a robot that couldn't find a button.