fix(frontend): re-root federated Console router to avoid host __root collision (MF v2 dev) (#2508)

* 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.

* fix(frontend): render DebugHelper in federated root (Cmd+Shift+D parity)

The embedded MF-v2 Console renders federatedRootRoute, not __root.tsx's
RootLayout, so it was missing <DebugHelper /> — the component that
registers the Cmd+Shift+D debug dialog (dev-only). Render it in the
federated root too, gated on NODE_ENV=development, mirroring __root.tsx.

* fix(frontend): restore Toaster + content padding in federated root

Mirror __root.tsx's embedded AppContent in the MF-v2 federated layout
(which now renders in prod where enable-console-mf-v2 is on):
- Render <Toaster> — sonner is not an MF-shared singleton, so the host's
  Toaster can't surface Console's toasts; without this, toast() is silent
  in embedded mode.
- Wrap <Outlet> in the pt-8 spacing div to match AppContent.

(Fullscreen-route branch is intentionally omitted — no route sets
staticData.fullscreen on master; it lands with the SQL workspace.)

Author: c-julin

frontend/src/federation/console-app.tsx

@@ -38,13 +38,43 @@ import { protobufRegistry } from 'protobuf-registry';
 import { LONG_LIVED_CACHE_STALE_TIME } from 'react-query/react-query.utils';
 
 import { FederatedProviders } from './federated-providers';
+import { federatedRootRoute } from './federated-routes';
 import { TokenManager } from './token-manager';
 import type { ConsoleAppProps } from './types';
 import { NotFoundPage } from '../components/misc/not-found-page';
 import { addBearerTokenInterceptor, checkExpiredLicenseInterceptor, config, getGrpcBasePath, setup } from '../config';
 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

@@ -14,13 +14,17 @@ import type { QueryClient } from '@tanstack/react-query';
 import { createRootRouteWithContext, Outlet } from '@tanstack/react-router';
 import { NuqsAdapter } from 'nuqs/adapters/tanstack-router';
 
+import { DebugHelper } from '../components/debug-helper/debug-dialog';
 import AppFooter from '../components/layout/footer';
 import AppPageHeader from '../components/layout/header';
 import { LicenseNotification } from '../components/license/license-notification';
 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 { Toaster } from '../components/redpanda-ui/components/sonner';
+import RequireAuth from '../components/require-auth';
 import { ModalContainer } from '../utils/modal-container';
 
 /**
@@ -60,11 +64,22 @@ 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>
+        {/* Cmd+Shift+D debug dialog — mirrors __root.tsx; dev-only. */}
+        {process.env.NODE_ENV === 'development' && <DebugHelper />}
+      </NuqsAdapter>
+    </>
   );
 }
 
@@ -73,6 +88,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>
@@ -82,12 +100,18 @@ function FederatedAppContent() {
       <AppPageHeader />
 
       <ErrorDisplay>
-        <Outlet />
+        <div className="pt-8">
+          <Outlet />
+        </div>
       </ErrorDisplay>
 
       <AppFooter />
 
       <ErrorModalsRenderer />
+
+      {/* sonner isn't an MF-shared singleton, so the host's <Toaster> can't
+          surface Console's toasts; mirror __root.tsx's AppContent. */}
+      <Toaster position="top-right" richColors />
     </div>
   );
 }