How Theo Diagnosed a T3 Code Rendering Problem with Coding Agents

A fast-looking idle page heated a laptop. Theo used agent-built experiments to isolate animations and compositing effects after confident diagnoses missed the cause.

TBTheo Browne登壇者 · Ping Labs
チャンネル
Theo - t3․gg
公開日
2026年8月4日
動画
27:32
読了時間
6 分
スライド
7
原文
英語
YouTube で開く
スクロールすると動画は右下に小さくなって再生を続けます。字幕は閲覧言語に合わせて切り替わります。
閲覧言語2 言語で読めます
この記事はまだ日本語に翻訳されていないため、英語の原文を表示しています。
要約

30 秒でわかる

Theo Browne investigates sustained CPU use in the browser GPU process while running T3 Code. He shows how controlled CSS toggles, browser isolation and human inspection revealed interacting rendering effects, while coding agents supplied useful diagnostic tools but unreliable initial theories.

  1. 1An idle page consumes resourcesTheo observes high CPU use in the browser GPU process, especially on a high-resolution display.
  2. 2A confident but ineffective fixAn agent rewrites substantial network and React logic without materially improving the reported symptom.
  3. 3A switchboard for experimentsAn agent-built console helper temporarily disables groups of CSS effects; separate tests narrow the investigation.
  4. 4Effects interactTheo finds that continuous animation, backdrop blur and a full-page noise overlay combine in his setup.
  5. 5Other tabs complicate measurementClosing separate Claude windows lowers the shared GPU-process CPU reading.

ポイント

  1. A responsive page can still keep the browser’s GPU process busy.
  2. The task manager’s GPU-process CPU reading is shared across tabs and is not GPU utilization.
  3. Toggle candidate effects separately and repeat measurements to narrow a rendering problem.
  4. Animations, overlays and blur can interact; a result on one machine does not prove a universal rendering rule.
  5. Agents can build useful diagnostic tools even when their confident initial explanations are wrong.
全文

チャプターごとに整えた全文を読む

文字起こしのみ
01

The symptom and the misleading first fix

An idle-looking page makes Theo’s laptop hot. A large agent-generated performance patch does not solve the observed problem.

I want to talk about web performance and a problem that coding agents both helped create and failed to diagnose correctly. GPT-5.6 and Fable are powerful, but the available tooling and the way they reason about an issue can still leave a human doing the crucial investigation.

Browser task manager
スライド 1 / 7Browser task managerThe CPU column shows resource use attributed to the shared GPU process.

T3 Code looked responsive, yet the browser’s GPU process used around 13–15% CPU at 720p and, on my larger high-resolution display, could reach about 50%. This is CPU usage attributed to the GPU process, not a measurement that the GPU itself was 50% utilized. A simple idle interface should not make my laptop this hot.

The issue took roughly a day and a half of intermittent work and conversations with performance specialists. A Tailwind animation class was involved, but the result was more subtle than one class being inherently bad: the interaction of ongoing animation, blur and a full-page noise layer mattered in this particular layout.

I had been using T3 Code heavily, with many threads and pull requests in progress. When I streamed games remotely at high frame rates, my laptop got hot; the next morning it was still warm after the game was closed. That made me investigate the browser instead of assuming the streaming setup was the sole cause.

The agent harnesses were running on other computers, so their resource usage should not explain the heat on my local machine. Browser performance tools showed little that looked alarming in JavaScript or layout, yet the GPU process remained busy. A responsive page can still consume substantial resources in the rendering pipeline.

The browser task manager’s GPU process is shared, not attributed to one tab. I opened a separate Chrome instance with only T3 Code, then navigated to a different site. The GPU-process CPU number dropped substantially, giving me stronger evidence that this page was involved.

The first performance diagnosis
スライド 2 / 7The first performance diagnosisThe agent’s report emphasizes network and main-thread paths that did not resolve Theo’s observed issue.

I initially gave Codex a vague description. Its report proposed WebSocket and React update paths, and it produced a large change that it confidently described as a fix. In my use, the change did not materially improve the symptom; a plausible explanation and a large patch were not evidence that the observed issue was solved.

02

Isolating the rendering issue

Theo isolates the browser and has an agent build CSS switches. He narrows the issue with repeated measurements.

After isolating the browser, I focused on rendering work that might recur at high frequency, particularly on a 120 Hz high-DPI screen. I asked the agent to inventory code that could trigger rendering or GPU work. This changed its role from deciding the answer to helping me test hypotheses.

A browser-generated summary and both agents repeatedly pointed at an Ultra Think effect. That effect only appears in a specific Claude Code state, while I saw the problem when using Codex without it. The suggestion was a useful reminder to check whether a suspected component is even present during reproduction.

I asked for a console helper that could temporarily disable groups of CSS effects on the running page. It exposed switches for things like animation, blur, filters, shadows and noise. Applying all of them reduced the GPU-process CPU reading to about 3%, though the page’s appearance broke; resetting brought the number back up.

CSS diagnostic helper
スライド 3 / 7CSS diagnostic helperThe console helper exposes temporary switches for candidate rendering effects.

That was not a finished diagnosis: changing several things at once only established that the group mattered. I tested noise and blur separately, then disabled animations and saw a much larger drop. The helper’s initial animation switch also disabled transitions, so we split those controls to investigate more precisely.

Testing animation effects
スライド 4 / 7Testing animation effectsTheo toggles effects and compares the shared GPU-process CPU reading.

The agent helped enumerate and pause animations, and I supplied the actual measurements back to it. I also closed DevTools during some checks because opening developer tools can alter page behavior and performance. The task manager was useful for this comparison, but its shared-process scope still required care.

03

Animation, blur and the noise layer

Status pulses and compositing effects interact in the tested layout. The visual fix also needs careful tuning.

Pulsing sidebar indicators, including a terminal icon, proved important in my tests; the context ring did not have the same effect. The model suggested that continuous opacity animations could keep compositor work active on a high-refresh screen. That was a hypothesis about the rendering path, not a general rule that every pulse is expensive.

The first proposed fix removed or shortened a pulse, which I disliked visually and thought too narrow: other status indicators mattered as well. A slower blink was only a little better in my test and did not look right. Improving a metric is not enough if the fix damages the experience or misses related cases.

I moved a parallel investigation to Fable on a separate Linux machine so the agents could work without stepping on one another. Fable produced an animation inventory, initially prioritizing the loading skeleton and Ultra Think effects, neither of which explained the idle case I was testing.

An agent’s animation inventory
スライド 5 / 7An agent’s animation inventoryFable lists recurring status animations and proposes a rendering explanation to investigate.

Further down the inventory were the recurring status pulses and a possible multiplier: backdrop blur. The agent suggested that a changing surface behind a blurred layer can increase rendering work. That explanation helped guide investigation, but the precise browser behavior depends on the scene, browser and hardware.

The page also had a low-opacity noise overlay intended to make its gray surfaces less flat. In my setup, that full-page effect combined with blur and continuous animation to produce the serious idle cost. Noise alone had not explained the problem in my earlier toggle test; the combination was the key observation.

Visual mismatch after a change
スライド 6 / 7Visual mismatch after a changeTheo points out differing gray surfaces that required additional tuning.

The first visual fix introduced mismatched gray areas, especially noticeable on my HDR displays. I removed the full overlay and spent time tuning colors; agent suggestions repeatedly changed the wrong surface. The final result needed both performance checks and a human visual pass.

04

Other tabs and the role of agents

Separate browser windows explain a misleading post-fix reading. Theo reflects on human-guided diagnosis and agent-built tools.

After shipping the fix, I returned to my usual browser and saw a high GPU-process CPU reading again. I thought the merge might have failed, so I closed tabs and investigated rather than immediately assuming the patch was ineffective. The shared process made this an important control.

I had forgotten two other browser windows with Claude pages open. Closing them brought the number down to where I expected. I observed substantial idle cost from those pages on my machine, but this is a local observation, not a benchmark establishing the behavior of every version or device.

I have seen performance regressions in other agent interfaces as well, which is part of why I built an open-source alternative. Even with a large user base, I still spent two late nights tracking down this issue. More capable models did not eliminate the need to reproduce, measure and understand the problem.

The agents were valuable: they searched the code quickly and built custom tools to test my theories. Their confident diagnoses and proposed fixes were often wrong, but the tools made the investigation much faster than doing everything manually. My experience supplied the questions and interpretation that guided those tools.

The final change summary
スライド 7 / 7The final change summaryThe displayed summary describes revised status animations, moving the noise layer and correcting the tint.

The final change adjusted the status animations and moved the grain away from the fixed full-viewport overlay, then corrected the visual tint. I am pleased with the improvement in my setup. The lesson is to steer agents with evidence and use them to build diagnostic leverage even when they cannot independently find the answer.

An agent does not have to know the solution to be useful. It can help search, construct experiments and compare results while the engineer remains responsible for the question, the measurement and the final judgment.

同じチャンネルの記事

スライド 5 枚38:47EN
Theo - t3․gg· 2026年10月28日Theo’s Long-Running Agent Experiments: Verification, Compute and CostTheo Browne · Ping LabsA skateboard game and two compiler projects show how repeated checks and flexible compute can sustain agent work—and how expensive those loops can become.コーディングエージェントエージェント工学AI cost & performance+2
スライド 5 枚36:07EN
Theo - t3․gg· 2026年10月27日Theo on Token Costs, Coding Agents, and the Price of AI CapabilityTheo Browne · Ping LabsA viral estimate of Lauren's AI spending prompts a closer look at cache pricing, benchmarks, and the changing work of coding agents.AI cost & performanceコーディングエージェントInference+1
スライド 5 枚30:37EN
Theo - t3․gg· 2026年10月26日Theo’s Three Skills for Reviewing and Shipping with Coding AgentsTheo Browne · Ping LabsHow sol-loop, full-send and full-stop encode review, verification and different levels of merge authority.Agent skillsコーディングエージェントCode review & verification+2
スライド 2 枚0:43EN
Theo - t3․gg· 2026年10月23日Theo Distinguishes Security Vulnerabilities from Active AttacksTheo Browne · Ping LabsA short explanation of why disclosed software flaws and reported attacks are different kinds of security news.CybersecuritySoftware engineering
スライド 6 枚29:22EN
Theo - t3․gg· 2026年10月22日Theo on Security Vulnerabilities, Stolen API Keys and AITheo Browne · Ping LabsA look at the gap between vulnerability disclosure and patching, and a speculative account of why stolen inference keys may be valuable.CybersecurityAI securitySoftware engineering+1
スライド 4 枚31:13EN
Theo - t3․gg· 2026年10月20日Theo on Why Smarter Models Help More Than DevelopersTheo Browne · Ping LabsFrom game modifications to compiler experiments, Theo revisits his assumptions about who benefits from more capable AI.コーディングエージェントDeveloper productivityHuman-AI Collaboration+1