[CLEAN] Synthetic Benchmark PR #30318 - refactor(web): organize devtools components

[tomerqodo]

Benchmark PR langgenius#30318

Type: Clean (correct implementation)

Original PR Title: refactor(web): organize devtools components
Original PR Description: ### Summary
This PR refactors the devtools organization in the web module, standardizing the folder structure and implementing a consistent loading pattern across all tools.

Key Changes

• Standardized Devtools Organization: Organized devtools into dedicated sub-folders (react-scan, tanstack) with encapsulated logic.
• Implemented "Loader" Pattern:
  • Introduced Loader components (e.g., ReactScanLoader, TanStackDevtoolsLoader) that handle environment checks (IS_DEV), lazy loading (lazy), and Suspense wrapping.
  • This keeps the implementation files focused and ensures heavy devtools libraries are only loaded in development mode.
• Cleaned up Global Contexts: Simplified web/context/query-client.tsx and web/app/layout.tsx by offloading devtools initialization and lazy loading logic to the respective loader components.
• Improved Barrel Exports: Simplified web/app/components/devtools/index.ts using clean exports, making the module easier to consume.

Rationale

• Better Encapsulation: Tool-specific configurations (like React Scan hacks) and dependencies are now isolated within their folders.
• Optimized Bundle Size: Standardized lazy loading ensures devtools are split into separate chunks and not included in the main production bundle.
• Maintainability: Consistent folder structure across all devtools makes the codebase more predictable and easier to extend.
  Original PR URL: refactor(web): organize devtools components langgenius/dify#30318