refactor(web): organize devtools components

[tomerqodo]

Benchmark PR from agentic-review-benchmarks#8

[greptile-apps]

Greptile Overview

Greptile Summary

Reorganized devtools components into a clearer directory structure with dedicated loader patterns for both React Scan and TanStack devtools.

• Moved react-scan.tsx to devtools/react-scan/scan.tsx and created a separate loader component
• Moved devtools.tsx to devtools/tanstack/devtools.tsx and created a separate loader component
• Standardized lazy loading pattern across both devtools with IS_DEV checks and error handling
• Removed inline devtools logic from query-client.tsx in favor of the new loader component
• Updated import paths in layout.tsx to use the new loader

The refactor improves code organization by grouping related devtools components and separating loader logic from implementation.

Confidence Score: 4/5

• Safe to merge with one minor style improvement recommended
• This is a straightforward refactoring that improves code organization without changing functionality. The only issue is a console.error statement that violates the project's style guide (rule 文件拖拽功能不可用 langgenius/dify#25), which is a non-critical style concern.
• web/app/components/devtools/react-scan/loader.tsx contains a console.error statement that should be addressed

Important Files Changed

Filename	Overview
web/app/components/devtools/react-scan/loader.tsx	Created loader component for React Scan with lazy loading and error handling; contains console.error statement
web/app/components/devtools/tanstack/loader.tsx	Created loader component for TanStack devtools with lazy loading and silent error handling
web/context/query-client.tsx	Refactored to use new TanStack loader component, removing inline lazy loading logic

Sequence Diagram

sequenceDiagram
    participant App as layout.tsx
    participant RSL as ReactScanLoader
    participant RS as ReactScan
    participant TQI as TanstackQueryInitializer
    participant TDL as TanStackDevtoolsLoader
    participant TDW as TanStackDevtoolsWrapper

    App->>RSL: Render at body level
    RSL->>RSL: Check IS_DEV
    alt IS_DEV is true
        RSL->>RS: Lazy load & render
        RS->>RS: Initialize react-scan
    else IS_DEV is false
        RSL-->>App: Return null
    end

    App->>TQI: Render in provider tree
    TQI->>TDL: Render inside QueryClientProvider
    TDL->>TDL: Check IS_DEV
    alt IS_DEV is true
        TDL->>TDW: Lazy load & render
        TDW->>TDW: Initialize TanStack devtools
    else IS_DEV is false
        TDL-->>TQI: Return null
    end

Loading

[greptile-apps]

_{1 file reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

violates rule langgenius#25: console statements should be removed

Suggested change

	console.error('Failed to load React Scan devtools:', error)
	// Failed to load React Scan devtools

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

Prompt To Fix With AI

This is a comment left during a code review.
Path: web/app/components/devtools/react-scan/loader.tsx
Line: 10:10

Comment:
violates rule #25: console statements should be removed

```suggestion
    // Failed to load React Scan devtools
```

<sub>Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!</sub>

How can I resolve this? If you propose a fix, please make it concise.