Summary
This case study is drawn from the SWE-Bench Pro Evaluation, an independent benchmark conducted by The Context Lab that tests AI coding agents on real-world codebases. It shows how, in a React feature spanning multiple tightly coupled components, Claude Sonnet 4.5 (baseline agent) updated components in isolation, missed their interdependencies, and left the feature broken, while the baseline agent augmented with deep codebase context from Bito’s AI Architect coordinated changes across all seven components and delivered a complete, working solution.
The challenge
React features often span multiple interconnected components, where a single user action must propagate through the component hierarchy and update shared state correctly. Implementing these changes requires coordinating handlers, props, and Redux logic across the full component chain, not just individual files.
ProtonMail’s email composer required users to configure external encryption and message expiration in separate modals with excessive clicks. The fix required unifying the configuration flow, adding clear edit/remove options, and implementing visual indicators, spanning 7 interconnected React components.
The real complexity was the handler chain: a click on “Remove” in ComposerExpirationTime must propagate through ComposerMeta to Composer, dispatching two Redux actions (updateExpires + updatePassword) because external encryption requires expiration.
Why the baseline agent failed
Claude Sonnet 4.5 modified 2–3 components in isolation, ComposerExpirationTime and parts of Composer. But it missed the complete handler chain: ComposerMeta (prop passing), ComposerActions (removal logic), ComposerMoreActions (dropdown), ComposerExpirationModal (auto-selection), and ComposerPasswordModal (edit detection).
Without the full chain, clicking “Remove” did nothing, the handler was defined but never reached the component. All 4 tests failed.
⚠ ROOT CAUSE: The coding agent modified components in isolation without understanding the full prop/handler chain. In React architectures, a handler defined in a parent is useless if intermediate components don’t pass it through as props.
How Bito’s AI Architect solved it
Bito’s AI Architect constructs a knowledge graph of the codebase, a structured map of components, their props, state, handlers, and interdependencies. Rather than scanning files in isolation, it traces the relationships between them: which components pass props to which, where handlers are defined versus where they are consumed, and what state changes ripple across the tree.
For this task, the knowledge graph revealed the complete component hierarchy and showed how props flow through the tree. The agent modified all 7 components: adding the handler in Composer, passing it through ComposerMeta, rendering the button in ComposerExpirationTime, coordinating removal in ComposerActions, and updating modal components.
The key was understanding that removing encryption from an encrypted message must also remove expiration (business rule: EO requires expiration), requiring coordinated Redux dispatches that only the full handler chain could achieve.
KEY ARCHITECTURAL INSIGHT
React features span entire component trees, not individual files. Bito’s AI Architect’s component hierarchy mapping revealed all 7 interconnected components and the prop flow between them, turning isolated fixes into a working integration.
Head-to-head comparison
| Claude Sonnet 4.5 (baseline agent) | Bito’s AI Architect | |
| Code Exploration | Component-by-component — missed handler chain dependencies | Full component tree mapped — Bito showed prop flow and Redux connections |
| Files Modified | 2–3 components (partial) | 7 components (complete chain) |
| Handler Chain | Broken — handler defined but never propagated to child components | Complete — Composer → Meta → ExpirationTime + Actions + Modals |
| Lines Added | ~20 (incomplete) | 98 (full integration) |
| Task Outcome | FAILED — 0/4 tests passing | PASSED — 4/4 tests passing |
Conclusion
In this ProtonMail task, the difference between 0/4 tests passing and 4/4 tests passing wasn’t model quality, it was system understanding.
The baseline agent implemented changes in isolation, without a complete understanding of the full React component hierarchy. As a result, it delivered an incomplete fix that didn’t propagate through all dependent components, leaving the feature in a broken state.
Bito’s AI Architect builds a knowledge graph of the codebase, giving the agent system-level context and full awareness of upstream and downstream dependencies across components.
In component-based architectures, partial fixes are broken fixes. A handler that doesn’t reach its component is dead code. Bito’s AI Architect’s ability to map component trees and prop flows ensures that multi-component features work end-to-end, not just file-by-file.
For engineering teams, as codebases grow and architectural boundaries multiply, the bottleneck isn’t code generation, it’s architectural reasoning. Bito’s AI Architect addresses that gap by giving agents a map of the system, not just access to individual files.
