Fix GraphiQL and subrequest-profiler routing conflict with Weaverse theme context

[paul-phan]

Problem Description

The Hydrogen development tools GraphiQL (http://localhost:3456/graphiql) and subrequest-profiler (http://localhost:3456/subrequest-profiler) are not displaying correctly. Instead of showing the expected development tools interface, they are being processed through the Weaverse theme context and returning the themed storefront layout.

Current Behavior

• ✅ Routes respond with 200 HTTP status
• ❌ Content is wrapped in Weaverse theme layout instead of showing raw development tools
• ❌ GraphiQL shows themed HTML instead of GraphQL IDE
• ❌ Subrequest-profiler shows themed HTML instead of profiling interface

Expected Behavior

• GraphiQL should display the interactive GraphQL IDE
• Subrequest-profiler should display the Hydrogen subrequest profiling interface
• These development routes should bypass the Weaverse theme wrapper

Root Cause Analysis

The issue appears to be caused by the `withWeaverse()` HOC in `app/root.tsx` (line 163) which wraps the entire app, including Hydrogen's internal development routes. The Weaverse theme context is being applied globally without excluding Hydrogen's built-in developer tools.

Technical Details

Current setup:

• Hydrogen: `2025.5.0`
• @weaverse/hydrogen: `^5.4.2`
• React Router: `^7.8.2`
• Route configuration in `app/routes.ts` uses `hydrogenRoutes()` wrapper

Files involved:

• `app/root.tsx` - Contains `withWeaverse(App)` wrapper
• `app/routes.ts` - Uses `hydrogenRoutes()` for route configuration
• Development routes are handled internally by Hydrogen

Proposed Solution

Add special logic in the Weaverse Hydrogen library to detect and bypass theme context for Hydrogen's internal development routes:

Option 1: Route Detection in @weaverse/hydrogen

• Detect development routes (`/graphiql`, `/subrequest-profiler`)
• Skip Weaverse context initialization for these routes
• Allow them to render with Hydrogen's default handlers

Option 2: Conditional withWeaverse Wrapper

• Add environment/route-based conditions to `withWeaverse()`
• Only apply theme context for non-development routes
• Preserve development tool functionality

Acceptance Criteria

• GraphiQL displays the interactive GraphQL IDE at `http://localhost:3456/graphiql\`
• Subrequest-profiler shows the profiling interface at `http://localhost:3456/subrequest-profiler\`
• Regular storefront routes continue working with Weaverse theme
• Solution doesn't break existing Weaverse functionality
• Works in development mode (`npm run dev`)

Additional Context

This affects developer experience when working with Hydrogen storefronts using Weaverse. Developers need access to these tools for GraphQL query debugging and performance profiling.

Similar issues may affect other Hydrogen internal routes if they exist.