Fable Broke My App and Couldn't Fix It  🔗 **Source:** [Fable Broke My App and Couldn't Fix It](https://www.youtube.com/watch?v=TKlOCjLMNtw) > [!note]+ Document Notes > title: "Fable Broke My App and Couldn't Fix It" > source_url: "https://www.youtube.com/watch?v=TKlOCjLMNtw" > content_type: video > reading_stage: analytical > tags: [web-performance, css-animations, ai-coding-agents, debugging, browser-devtools, accessibility] > processed_at: "2026-08-04" > > # 🏷️ Title: Fable Broke My App and Couldn't Fix It > <!-- deep-read:sections start --> ## 🧭 Table of Contents - Summary - Main Content - References - Paraphrase - Newsletter - Action Items - Hypotheses - Methodology - Questions - Future Research - Implications - Learning Styles Assessment - Accessibility Assessment - DEIB Assessment - Logical Validity - DARVO Analysis - Conclusion - Refactor Appendix ### 🔗 References - [Original YouTube video](https://www.youtube.com/watch?v=TKlOCjLMNtw) ## 📝 Summary A GPU performance investigation shows that coding agents failed at autonomous diagnosis but became useful when asked to build narrow CSS-ablation tools for human-led debugging. ## 📖 Main Content ### 🗒️ Notes Here is a deep-reading guide to the video based on your specified dimensions. ### **Video Overview & Thesis** * **Speaker:** Theo (T3) * **Thesis:** Current AI coding agents (such as Claude 3.5 Sonnet / Codex) cannot independently diagnose or fix subtle, low-level browser performance bugs (like GPU render-thread stalls). However, developers can still leverage AI agents effectively by instructing them to write custom, ad-hoc diagnostic and ablation tooling to speed up human-led root-cause analysis. * **Fact vs. Claim Distinction:** * *Speaker Claims:* AI agents give "garbage" automated performance diagnosis; Claude/Anthropic's web app uses 10% GPU per idle tab; Blacksmith CI is faster/cheaper. * *Verified/Visual Facts:* A high-refresh display running continuous CSS animations (like `pulse` and `backdrop-blur`) causes Chrome/Chromium's GPU process to consume sustained 15–30%+ CPU/GPU usage; disabling CSS animations drops this back to baseline (<4%). ### **Timestamped Walkthrough** #### **00:00 – 02:28: Introduction & The Problem Statement** * **Main Arguments:** Web performance tooling often fails when performance bottlenecks are offloaded to CSS/compositor layers. Theo noticed high GPU usage and laptop heating while running T3 Code on high-refresh/high-DPI displays. * **Demos/Examples:** * Shows T3 Code running while Chrome Task Manager shows the `GPU Process` drawing 13–15% CPU at 720p, spiking to 30–50% on 4K/5K displays (01:06–01:25). #### **02:28 – 03:35: Sponsored Segment (Blacksmith)** * **Conflict of Interest / Sponsorship:** Sponsored pitch for Blacksmith, a drop-in runner replacement for GitHub Actions claiming 2x faster hardware, 4x faster cache downloads, and up to 40x faster Docker builds. #### **03:35 – 08:08: The Failure of Autonomous AI Diagnosis** * **Main Arguments:** Standard browser DevTools performance profiles and AI agent automated diagnoses failed to pinpoint the actual bottleneck. * **Concrete Examples:** * An agent wrote a massive 10,000+ line PR to refactor WebSocket and React state handling, claiming it fixed the issue, but performance did not change (08:42–09:12). * Agents consistently hallucinated that the "UltraThink" UI effect was the culprit, despite it not being rendered on screen (11:20–11:47). #### **11:48 – 14:05: Pivoting to Agent-Assisted Diagnostic Tooling** * **Practical Action / Method:** Instead of asking the AI to "fix the bug," Theo requested a custom DOM/CSS ablation tool via a browser console script. * **Demo:** * The agent created `window.__t3gpu`, allowing Theo to dynamically inject/remove CSS override rules (`apply('noise')`, `apply('blur')`, `apply('animations')`) directly from DevTools console (12:08–13:00). * Executing `__t3gpu.apply('animations')` instantly dropped GPU process utilization from ~15% to <3% (13:51–14:02). #### **14:06 – 22:25: Isolating the Exact CSS Bottlenecks** * **Main Arguments:** Infinite CSS keyframe animations (like `animate-pulse` on small status icons) force Chromium to maintain continuous frame-compositing loops at display refresh rate (120 Hz). Combined with `backdrop-filter: blur()`, this forces severe GPU re-paints even when the page is idle. * **Identified Offenders:** 1. *Pulsing status dots* in the sidebar (`animate-pulse`). 2. *Global background noise/grain overlay* applied via fixed opacity layers. 3. *Backdrop blur filters* on floating UI components. #### **22:26 – 25:32: The "Claude Tab" Surprise & Lessons Learned** * **Main Arguments:** Even after fixing T3 Code's CSS, GPU usage remained unexpectedly high until Theo closed background `claude.ai` browser tabs. * **Claim vs Fact:** Theo observed that an idle `claude.ai` tab consumed ~10% GPU power per tab on his setup. #### **25:33 – 27:31: Conclusion & Practical Takeaways** * **Main Summary:** Agents are force multipliers for code generation and test harness creation, but human engineering intuition remains essential for root-cause diagnosis. ### **Accessibility, DEIB, & Security Considerations** * **Accessibility (Reduced Motion):** Infinite pulsing animations are not only GPU-heavy but can trigger motion sensitivity issues. Theo highlighted PR fixes utilizing `@media (prefers-reduced-motion: reduce)` to disable non-essential animations. * **Security:** Using browser console snippets (`window.__t3gpu`) with production DOM injection requires cautious execution to ensure no unsanitized inputs or untrusted scripts are evaluated during testing. ### **Practical Actions for a WordPress / Open-Source DevRel Practitioner** 1. **CSS Animation Audits:** Audit open-source web interfaces (or WordPress admin/Gutenberg blocks) for infinite CSS animations (`animate-pulse`, continuous spinners) that prevent the browser compositor from sleeping, particularly on Apple Silicon / high-refresh displays. 2. **Custom Diagnostic Tooling via AI:** When debugging complex front-end performance or layout shifts, prompt AI agents to build single-file DevTools console helper scripts/ablations rather than letting agents generate sweeping codebase refactors. 3. **Respect Reduced Motion:** Enforce `prefers-reduced-motion` fallbacks across open-source UI libraries to improve both web accessibility and hardware battery/thermal efficiency. ### **Highlights & Quotations** > *"As great as AI developer tools have gotten... there are still things they don't understand."* — **00:24** > *"The built-in browser performance tools were not helpful at all... once things are offloaded to a layer like CSS, these tools become much, much less useful."* — **06:40** > *"Just because your agents don't know the solution to the problem doesn't mean they can't be helpful when you solve it yourself."* — **27:21** > *"Agents can always be valuable in almost any dev work, even if not as valuable as people on Twitter like to make them out to be."* — **27:15** ## 📚 References - Original video and captions, accessed 2026-08-04. - Any papers, products, incidents, or historical sources named by the speakers remain leads for primary-source verification unless linked and checked separately. ## 🗣️ Paraphrase The key move is to change the agent’s job. Don’t ask it to guess the fix; ask it to construct a reversible experiment that isolates one rendering mechanism at a time. ## 📰 Newsletter The most productive AI debugging prompt may be “build me a switchboard.” A small DevTools ablation helper exposed continuous CSS animations and backdrop effects that broad refactors missed. ## ✅ Action Items #### DevRel - [ ] Audit infinite animations in WordPress admin and block interfaces on high-refresh displays. - [ ] Add prefers-reduced-motion fallbacks for nonessential animation. - [ ] Ask coding agents for reversible diagnostic harnesses before accepting refactors. #### OSPO - [ ] Apply the source’s governance and verification lessons to contributor automation and community policy where relevant. #### Community - [ ] Invite affected users and contributors into testing before treating the source’s recommendations as general. #### WordPress - [ ] Translate the most relevant claim into a small, reversible WordPress test or documentation check. #### The WPCC - [ ] Preserve a distinction between speaker claims, observed demonstrations, and independently verified facts. ### FAIR - **Findable:** Original URL and topic tags are present. - **Accessible:** Transcript is stored with the Reader document. - **Interoperable:** Notes use Markdown and stable section headings. - **Reusable:** Claims retain context, limitations, and follow-up questions. ## 🧪 Hypotheses - CSS ablation tests identify compositor bottlenecks more reliably than generic AI performance diagnoses. ### 📊 Methodology The analysis combines the full English caption transcript with a visual, timestamped walkthrough. It distinguishes observed demonstrations and speaker claims from facts that still need primary-source verification. ### ❓ Questions - Do the same animations reproduce the GPU cost across Chromium, Firefox, and Safari? - How much power use comes from refresh rate, resolution, animation, and backdrop blur independently? ### 🔮 Future Research - Open the primary sources named in the episode. - Reproduce technical claims in a controlled environment where applicable. - Compare critical responses from affected communities or maintainers. ### 💡 Implications Diagnostic tooling is a safer agent task than unsupervised root-cause claims or sweeping code changes. ### 🧠 Learning Styles Assessment #### 👀 Visual learners Use the timestamped walkthrough and recreate diagrams or demos from the linked video. #### 🔊 Aural learners Listen with captions and pause after each major argument. #### 🗣️ Verbal learners Restate the thesis and strongest counterargument aloud. #### 🧩 Kinesthetic learners Run the smallest safe experiment implied by the source. #### 🧠 Logical learners Map claims to evidence, limitations, and falsifiers. #### 🧑‍🤝‍🧑 Social learners Discuss one implication with a relevant community. #### 🧘‍♀️ Solitary learners Write a short response before reading outside commentary. #### 🌿 Naturalistic learners No strong naturalistic learning mode is inherent in this source. ### 📊 Accessibility Assessment #### Screen reader semantics The performance issue intersects with motion sensitivity; reduced-motion support improves accessibility and lowers needless compositor work. #### Keyboard navigation The video page and any demonstrated interfaces need separate keyboard testing. #### Contrast and readability Visual contrast wasn’t independently measured. #### Text resizing and reflow The transcript reflows as text; demonstrated products need separate testing. #### Media and captions English captions were recovered and preserved. Caption accuracy should be spot-checked for names and technical terms. #### Forms and interactions Any demonstrated interface requires task-based accessibility testing. #### Standards reference Use WCAG 2.2 AA as the baseline for web-interface follow-up. ### 🌍 DEIB Assessment #### Cultural breadth No broad DEIB analysis is presented, but motion preferences and hardware constraints affect who can use the interface comfortably. #### Inclusive language Preserve quoted harmful language only when it’s necessary to analyze the source. #### Neurodiversity support Structured notes, captions, reduced-motion considerations, and asynchronous participation improve access. #### Representation The source’s speakers and examples don’t represent every affected group. #### Psychological safety Apply the source without pressuring people to disclose harm or participate in unsafe experiments. ### ✅ Logical Validity #### Strong reasoning The analysis preserves concrete examples and separates observed behavior from broader inference. #### Fallacies The observed before-and-after GPU change supports a local causal diagnosis. Claims about all AI agents or all browsers exceed the demonstrated setup. #### Tone of voice The source is conversational and persuasive; some claims need a calmer evidentiary check. ### 🛡️ DARVO Analysis No meaningful DARVO pattern is present. ## 🎯 Conclusion A GPU performance investigation shows that coding agents failed at autonomous diagnosis but became useful when asked to build narrow CSS-ablation tools for human-led debugging. Diagnostic tooling is a safer agent task than unsupervised root-cause claims or sweeping code changes. ## 🔄 Refactor Appendix — Fable Broke My App and Couldn't Fix It ### 📚 Literature Atoms #### Coding agents miss compositor-layer performance causes. > [!quote] ID:01kz7ccyqr1y260zmmnx2c04ex > As great as AI developer tools have gotten and as powerful as models like GPT56 and Fable are, there are still things they don't understand. **Context & use**: - Reusable claim grounded in the source transcript. **Tags**: #web-performance #css-animations #xref #### Reversible ablation tools improve human-led diagnosis. > [!quote] ID:01kz7cczh51we9emc3sw43kvpe > or other tabs because, and this is probably the most important hint to get from here, the builtin browser performance tools were not helpful at all. **Context & use**: - Reusable claim grounded in the source transcript. **Tags**: #web-performance #css-animations #xref #### Reduced motion can improve access and performance together. > [!quote] ID:01kz7cd06zsrgcadevw92bbgka > Just cuz your agents don't know the solution to the problem doesn't mean they can't be helpful when you solve it yourself. **Context & use**: - Reusable claim grounded in the source transcript. **Tags**: #web-performance #css-animations #xref ### 🧠 Permanent Candidates - Coding agents miss compositor-layer performance causes. - Diagnostic tooling is a safer agent task than unsupervised root-cause claims or sweeping code changes. ### ✏️ Fleeting Queue - Verify the strongest external claim against a primary source. - Convert one action item into a bounded experiment. ## Processed Deep-read notes, topic tags, source transcript, and literature atoms prepared on 2026-08-04. <!-- deep-read:sections end --> 📄 **Full text:** [[Full Document Contents/Articles/Fable Broke My App and Couldn't Fix It.md|Fable Broke My App and Couldn't Fix It by Theo]] ## Highlights - I'm not going to lie, I'm pretty excited to film this video because we're actually talking about one of my old favorite topics again, performance in the web. Yes, really no clickbait. We're actually going to dive into some performance stuff. But the reason we're doing it is probably why you guys are here. Because the fixes that I'm working on here are things that I could not get any of the models to do. But more importantly, the things that were broken here were broken because of those very same models. As great as AI developer tools have gotten and as powerful as models like GPT56 and Fable are, there are still things they don't understand. ([View Highlight](https://read.readwise.io/read/01kz7ccyqr1y260zmmnx2c04ex)) - Note: Coding agents miss compositor-layer performance causes. - Tags: literature-atom - So, I started to dig in a bit more and I couldn't figure out what was going on and I also couldn't figure out confidently enough whether or not it was my tab in Helium or other tabs because, and this is probably the most important hint to get from here, the builtin browser performance tools were not helpful at all. These tools are more focused on things like JavaScript running when it shouldn't or really slow load times or resources that aren't coming in properly. Slight spoiler for what's coming. Once things are offloaded to a layer like CSS, these tools become much much less useful. ([View Highlight](https://read.readwise.io/read/01kz7cczh51we9emc3sw43kvpe)) - Note: Reversible ablation tools improve human-led diagnosis. - Tags: literature-atom - As great as these tools are, they are just that, tools. They don't know everything. They can find things fast, but they have to be steered. And when you learn how to steer them and wield them for different types of work, whether that is they find and solve the problem themselves, or they build the tools to help you solve it, agents can always be valuable in almost any dev work, even if not as valuable as people on Twitter like to make them out to be. Just cuz your agents don't know the solution to the problem doesn't mean they can't be helpful when you solve it yourself. This is a fun deep dive for me, and I hope it was for you guys, too. Until next time, peace and ns. ([View Highlight](https://read.readwise.io/read/01kz7cd06zsrgcadevw92bbgka)) - Note: Reduced motion can improve access and performance together. - Tags: literature-atom ## Links - [[3. Resources/Permanent Notes/Verification Must Test the Claimed State Not Only the Latest Change]] — applies-in: local repair attempts don't establish restored application state. - [[3. Resources/Permanent Notes/Human Review Capacity Sets the Agent WIP Limit]] — supports: failed autonomous repair returns work to human diagnosis.