refactor(playground): migrate React Router to data mode (#12356)

Converts the playground's React Router setup from declarative mode to
data mode.

**Before:** JSX-based routing with `BrowserRouter`, `Routes`, `Route`,
and a custom `NavigateTo` component for redirects.

**After:** Object-based routing with `createBrowserRouter`,
`RouterProvider`, and `loader` functions for redirects.

```tsx
// Index route redirect using loader
{
  path: '/agents/:agentId',
  element: <AgentLayout><Outlet /></AgentLayout>,
  children: [
    { index: true, loader: ({ params }) => redirect(`/agents/${params.agentId}/chat`) },
    { path: 'chat', element: <Agent /> },
  ],
}
```

This is a refactor with no user-facing changes - just modernizing the
routing approach.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Refactor**
* Updated internal routing architecture and configuration for improved
maintainability.

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

Author: mfrachet

packages/playground/src/App.tsx

@@ -1,5 +1,5 @@
 import { v4 as uuid } from '@lukeed/uuid';
-import { Routes, Route, BrowserRouter, Outlet, useNavigate } from 'react-router';
+import { createBrowserRouter, RouterProvider, Outlet, useNavigate, redirect } from 'react-router';
 
 import { Layout } from '@/components/layout';
 
@@ -37,15 +37,13 @@ import MCPServerToolExecutor from './pages/mcps/tool';
 import { McpServerPage } from './pages/mcps/[serverId]';
 
 import {
-  useMastraPlatform,
   LinkComponentProvider,
   LinkComponentProviderProps,
   PlaygroundConfigGuard,
   PlaygroundQueryClient,
   StudioConfigProvider,
   useStudioConfig,
 } from '@mastra/playground-ui';
-import { NavigateTo } from './lib/react-router';
 import { Link } from './lib/framework';
 import Scorers from './pages/scorers';
 import Scorer from './pages/scorers/scorer';
@@ -76,23 +74,95 @@ const paths: LinkComponentProviderProps['paths'] = {
   workflowRunLink: (workflowId: string, runId: string) => `/workflows/${workflowId}/graph/${runId}`,
 };
 
-const LinkComponentWrapper = ({ children }: { children: React.ReactNode }) => {
+const RootLayout = () => {
   const navigate = useNavigate();
-  const frameworkNavigate = (path: string) => {
-    navigate(path);
-  };
+  const frameworkNavigate = (path: string) => navigate(path);
 
   return (
     <LinkComponentProvider Link={Link} navigate={frameworkNavigate} paths={paths}>
-      {children}
+      <Layout>
+        <Outlet />
+      </Layout>
     </LinkComponentProvider>
   );
 };
 
+// Determine platform status at module level for route configuration
+const isMastraPlatform = Boolean(window.MASTRA_CLOUD_API_ENDPOINT);
+
+const routes = [
+  {
+    element: <RootLayout />,
+    children: [
+      // Conditional routes (non-platform only)
+      ...(isMastraPlatform
+        ? []
+        : [
+            { path: '/settings', element: <StudioSettingsPage /> },
+            { path: '/templates', element: <Templates /> },
+            { path: '/templates/:templateSlug', element: <Template /> },
+          ]),
+
+      { path: '/scorers', element: <Scorers /> },
+      { path: '/scorers/:scorerId', element: <Scorer /> },
+      { path: '/observability', element: <Observability /> },
+      { path: '/agents', element: <Agents /> },
+      { path: '/agents/:agentId/tools/:toolId', element: <AgentTool /> },
+      {
+        path: '/agents/:agentId',
+        element: (
+          <AgentLayout>
+            <Outlet />
+          </AgentLayout>
+        ),
+        children: [
+          {
+            index: true,
+            loader: ({ params }: { params: { agentId: string } }) => redirect(`/agents/${params.agentId}/chat`),
+          },
+          { path: 'chat', element: <Agent /> },
+          { path: 'chat/:threadId', element: <Agent /> },
+        ],
+      },
+
+      { path: '/tools', element: <Tools /> },
+      { path: '/tools/:toolId', element: <Tool /> },
+
+      { path: '/processors', element: <Processors /> },
+      { path: '/processors/:processorId', element: <Processor /> },
+
+      { path: '/mcps', element: <MCPs /> },
+      { path: '/mcps/:serverId', element: <McpServerPage /> },
+      { path: '/mcps/:serverId/tools/:toolId', element: <MCPServerToolExecutor /> },
+
+      { path: '/workflows', element: <Workflows /> },
+      {
+        path: '/workflows/:workflowId',
+        element: (
+          <WorkflowLayout>
+            <Outlet />
+          </WorkflowLayout>
+        ),
+        children: [
+          {
+            index: true,
+            loader: ({ params }: { params: { workflowId: string } }) =>
+              redirect(`/workflows/${params.workflowId}/graph`),
+          },
+          { path: 'graph', element: <Workflow /> },
+          { path: 'graph/:runId', element: <Workflow /> },
+        ],
+      },
+
+      { index: true, loader: () => redirect('/agents') },
+      { path: '/request-context', element: <RequestContext /> },
+    ],
+  },
+];
+
 function App() {
   const studioBasePath = window.MASTRA_STUDIO_BASE_PATH || '';
   const { baseUrl, headers, isLoading } = useStudioConfig();
-  const { isMastraPlatform } = useMastraPlatform();
 
   if (isLoading) {
     // Config is loaded from localStorage. However, there might be a race condition
@@ -104,76 +174,12 @@ function App() {
     return <PlaygroundConfigGuard />;
   }
 
+  const router = createBrowserRouter(routes, { basename: studioBasePath });
+
   return (
     <MastraReactProvider baseUrl={baseUrl} headers={headers}>
       <PostHogProvider>
-        <BrowserRouter basename={studioBasePath}>
-          <LinkComponentWrapper>
-            <Routes>
-              <Route
-                element={
-                  <Layout>
-                    <Outlet />
-                  </Layout>
-                }
-              >
-                {isMastraPlatform ? null : (
-                  <>
-                    <Route path="/settings" element={<StudioSettingsPage />} />
-                    <Route path="/templates" element={<Templates />} />
-                    <Route path="/templates/:templateSlug" element={<Template />} />
-                  </>
-                )}
-
-                <Route path="/scorers" element={<Scorers />} />
-                <Route path="/scorers/:scorerId" element={<Scorer />} />
-                <Route path="/observability" element={<Observability />} />
-                <Route path="/agents" element={<Agents />} />
-                <Route path="/agents/:agentId" element={<NavigateTo to="/agents/:agentId/chat" />} />
-                <Route path="/agents/:agentId/tools/:toolId" element={<AgentTool />} />
-                <Route
-                  path="/agents/:agentId"
-                  element={
-                    <AgentLayout>
-                      <Outlet />
-                    </AgentLayout>
-                  }
-                >
-                  <Route path="chat" element={<Agent />} />
-                  <Route path="chat/:threadId" element={<Agent />} />
-                </Route>
-
-                <Route path="/tools" element={<Tools />} />
-                <Route path="/tools/:toolId" element={<Tool />} />
-
-                <Route path="/processors" element={<Processors />} />
-                <Route path="/processors/:processorId" element={<Processor />} />
-                <Route path="/mcps" element={<MCPs />} />
-
-                <Route path="/mcps/:serverId" element={<McpServerPage />} />
-                <Route path="/mcps/:serverId/tools/:toolId" element={<MCPServerToolExecutor />} />
-
-                <Route path="/workflows" element={<Workflows />} />
-                <Route path="/workflows/:workflowId" element={<NavigateTo to="/workflows/:workflowId/graph" />} />
-
-                <Route
-                  path="/workflows/:workflowId"
-                  element={
-                    <WorkflowLayout>
-                      <Outlet />
-                    </WorkflowLayout>
-                  }
-                >
-                  <Route path="/workflows/:workflowId/graph" element={<Workflow />} />
-                  <Route path="/workflows/:workflowId/graph/:runId" element={<Workflow />} />
-                </Route>
-
-                <Route path="/" element={<NavigateTo to="/agents" />} />
-                <Route path="/request-context" element={<RequestContext />} />
-              </Route>
-            </Routes>
-          </LinkComponentWrapper>
-        </BrowserRouter>
+        <RouterProvider router={router} />
       </PostHogProvider>
     </MastraReactProvider>
   );