fix(frontend): re-root federated Console router to avoid host __root collision

Embedded Console (MF v2) renders Cloud UI's root route instead of its own
in dev, because both apps compile a module with the identical id
./src/routes/__root.tsx and the shared rsbuild/MF dev runtime resolves the
host's. That substitutes Cloud UI's RootComponent (react NuqsAdapter,
Builder.io <Content>, <CommandPalette>/KBar) as Console's embedded root,
which: crashes on useKBar (no KBarProvider in this subtree) -> empty
sidebar; and leaves Console's useQueryState consumers without a matching
nuqs adapter context -> NUQS-404.

Re-root the federated router onto Console's own federatedRootRoute (a
Console-unique module path that can't collide), and give it RouterSync +
RequireAuth (RequireAuth triggers the user-data fetch that gates the
endpoint-compatibility fetch and the embedded sidebar items). Standalone
(app.tsx/__root.tsx) and prod are unaffected.

Author: c-julin

frontend/src/federation/console-app.tsx

@@ -37,6 +37,7 @@ import { createMemoryHistory, createRouter, RouterProvider } from '@tanstack/rea
 import { protobufRegistry } from 'protobuf-registry';
 import { LONG_LIVED_CACHE_STALE_TIME } from 'react-query/react-query.utils';
 
+import { federatedRootRoute } from './federated-routes';
 import { FederatedProviders } from './federated-providers';
 import { TokenManager } from './token-manager';
 import type { ConsoleAppProps } from './types';
@@ -45,6 +46,35 @@ import { addBearerTokenInterceptor, checkExpiredLicenseInterceptor, config, getG
 import { routeTree } from '../routeTree.gen';
 import { installUISettingsSideEffects } from '../state/ui';
 
+/**
+ * Re-root the generated route tree onto Console's federated root.
+ *
+ * In the federated dev build, the generated tree's root route (from
+ * `src/routes/__root.tsx`) can be substituted by Cloud UI's own `__root` route
+ * — both apps compile a module with the identical id `./src/routes/__root.tsx`,
+ * and in the shared rsbuild/MF dev runtime the host's wins. The result is that
+ * the embedded Console renders Cloud UI's root chrome (its react NuqsAdapter,
+ * Builder.io `<Content>`, and `<CommandPalette>`/KBar) instead of Console's own
+ * federated layout — which breaks nuqs (NUQS-404), crashes on KBar
+ * (`getState is not a function`, no `KBarProvider` in this subtree), and leaves
+ * the embedded sidebar empty.
+ *
+ * `federatedRootRoute` lives at a Console-unique module path
+ * (`src/federation/federated-routes.tsx`) that cannot collide with Cloud UI, so
+ * reattaching the generated child routes to it guarantees the embedded app
+ * renders Console's own root. Standalone (`app.tsx`) and the legacy embedded
+ * entry keep using the generated `routeTree` unchanged.
+ */
+function createFederatedRouteTree() {
+  const childRoutes = routeTree.children ? Object.values(routeTree.children) : [];
+  for (const child of childRoutes) {
+    child.options.getParentRoute = () => federatedRootRoute;
+  }
+  return federatedRootRoute._addFileChildren(childRoutes);
+}
+
+const federatedRouteTree = createFederatedRouteTree();
+
 /**
  * Creates an interceptor that refreshes the token on 401 and retries the request.
  * Uses TokenManager for deduplication and abort support.
@@ -255,7 +285,7 @@ function ConsoleAppInner({
     });
 
     const r = createRouter({
-      routeTree,
+      routeTree: federatedRouteTree,
       history: memoryHistory,
       context: {
         basePath: '',

frontend/src/federation/federated-routes.tsx

@@ -21,6 +21,8 @@ import { ErrorBoundary } from '../components/misc/error-boundary';
 import { ErrorDisplay } from '../components/misc/error-display';
 import { ErrorModalsRenderer } from '../components/misc/error-modal';
 import { NullFallbackBoundary } from '../components/misc/null-fallback-boundary';
+import { RouterSync } from '../components/misc/router-sync';
+import RequireAuth from '../components/require-auth';
 import { ModalContainer } from '../utils/modal-container';
 
 /**
@@ -60,11 +62,20 @@ export const federatedRootRoute = createRootRouteWithContext<FederatedRouterCont
  */
 function FederatedRootLayout() {
   return (
-    <NuqsAdapter>
-      <ErrorBoundary>
-        <FederatedAppContent />
-      </ErrorBoundary>
-    </NuqsAdapter>
+    <>
+      <RouterSync />
+      <NuqsAdapter>
+        <ErrorBoundary>
+          {/* RequireAuth triggers the user-data fetch (api.refreshUserData) that
+              gates Console's endpoint-compatibility fetch and, in turn, the
+              embedded sidebar items. The standalone root (__root.tsx) wraps its
+              embedded layout the same way. */}
+          <RequireAuth>
+            <FederatedAppContent />
+          </RequireAuth>
+        </ErrorBoundary>
+      </NuqsAdapter>
+    </>
   );
 }
 
@@ -73,6 +84,9 @@ function FederatedRootLayout() {
  * Similar to EmbeddedLayout from __root.tsx but optimized for MF v2.0.
  */
 function FederatedAppContent() {
+  // Mirrors __root.tsx's EmbeddedLayout so the embedded experience matches
+  // production: AppPageHeader renders the page title (it already suppresses
+  // the breadcrumb/sidebar-trigger in embedded mode — the host supplies those).
   return (
     <div id="mainLayout">
       <NullFallbackBoundary>