perf(console-ui): refresh TanStack Router and Query

frontend/package.json

@@ -83,8 +83,8 @@
     "@shikijs/langs": "^3.23.0",
     "@shikijs/themes": "^3.23.0",
     "@stepperize/react": "^5.1.9",
-    "@tanstack/react-query": "^5.99.2",
-    "@tanstack/react-router": "^1.170.7",
+    "@tanstack/react-query": "^5.101.4",
+    "@tanstack/react-router": "^1.170.22",
     "@tanstack/react-table": "^9.1.2",
     "@tanstack/react-virtual": "^3.13.12",
     "@uiw/react-codemirror": "^4.25.10",
@@ -152,9 +152,9 @@
     "@rsdoctor/rspack-plugin": "1.6.0",
     "@rstest/core": "0.11.11",
     "@rstest/coverage-v8": "0.11.11",
-    "@tanstack/react-query-devtools": "^5.90.2",
-    "@tanstack/react-router-devtools": "^1.167.0",
-    "@tanstack/router-plugin": "^1.168.19",
+    "@tanstack/react-query-devtools": "^5.101.4",
+    "@tanstack/react-router-devtools": "^1.167.1",
+    "@tanstack/router-plugin": "^1.168.27",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^7.0.0",
     "@testing-library/react": "^16.3.2",

frontend/rsbuild.config.ts

@@ -9,12 +9,13 @@ import { pluginSvgr } from '@rsbuild/plugin-svgr';
 import { pluginTailwindcss } from '@rsbuild/plugin-tailwindcss';
 import { pluginYaml } from '@rsbuild/plugin-yaml';
 import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
-import { TanStackRouterRspack } from '@tanstack/router-plugin/rspack';
+import { tanstackRouter } from '@tanstack/router-plugin/rspack';
 import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';
 
 import { moduleFederationConfig } from './module-federation.config';
 import { HEAP_APP_ID } from './src/heap/heap.helper';
 import { HUBSPOT_PORTAL_ID } from './src/hubspot/hubspot.helper';
+import { TANSTACK_CHUNK_PATTERN, tanstackRouterConfig } from './tanstack-router.config';
 import path from 'node:path';
 
 const { publicVars, rawPublicVars } = loadEnv({ prefixes: ['REACT_APP_'] });
@@ -132,6 +133,13 @@ export default defineConfig({
         enforce: true,
         reuseExistingChunk: true,
       },
+      tanstack: {
+        test: TANSTACK_CHUNK_PATTERN,
+        name: 'lib-tanstack',
+        chunks: 'all',
+        priority: 10,
+        reuseExistingChunk: true,
+      },
     },
   },
   output: {
@@ -185,14 +193,7 @@ export default defineConfig({
       };
 
       const plugins = [
-        TanStackRouterRspack({
-          target: 'react',
-          autoCodeSplitting: true,
-          routesDirectory: './src/routes',
-          generatedRouteTree: './src/routeTree.gen.ts',
-          quoteStyle: 'single',
-          semicolons: true,
-        }),
+        tanstackRouter(tanstackRouterConfig),
         new MonacoWebpackPlugin({
           languages: ['yaml', 'json', 'typescript', 'javascript', 'protobuf'],
           customLanguages: [

frontend/src/app.tsx

@@ -58,6 +58,7 @@ import { applyOverrides as applyDebugFeatureFlagOverrides } from './components/d
 import { NotFoundPage } from './components/misc/not-found-page';
 import { RoutePendingFallback } from './components/misc/route-pending-fallback';
 import { addBearerTokenInterceptor, checkExpiredLicenseInterceptor, getGrpcBasePath, setup } from './config';
+import { routerDefaults } from './router-defaults';
 import { routeTree } from './routeTree.gen';
 import { installUISettingsSideEffects } from './state/ui';
 
@@ -73,6 +74,7 @@ const dataplaneTransport = createConnectTransport({
 // Create router instance
 const router = createRouter({
   routeTree,
+  ...routerDefaults,
   context: {
     basePath: getBasePath(),
     queryClient,

frontend/src/components/layout/header.test.tsx

@@ -0,0 +1,93 @@
+/**
+ * Copyright 2026 Redpanda Data, Inc.
+ *
+ * Use of this software is governed by the Business Source License
+ * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
+ *
+ * As of the Change Date specified in that file, in accordance with
+ * the Business Source License, use of this software will be governed
+ * by the Apache License, Version 2.0
+ */
+
+import { describe, expect, it, rs } from '@rstest/core';
+import { render, screen } from '@testing-library/react';
+import type { PropsWithChildren, ReactNode } from 'react';
+
+const { getMatchedRoutes } = rs.hoisted(() => ({
+  getMatchedRoutes: rs.fn(() => [[{ options: { staticData: { breadcrumbOnlyHeader: true } } }], {}, undefined]),
+}));
+
+rs.mock('@tanstack/react-router', () => ({
+  Link: ({ children }: PropsWithChildren) => <a href="/">{children}</a>,
+  useLocation: () => ({ pathname: '/sql' }),
+  useMatchRoute: () => () => false,
+  useRouter: () => ({ getMatchedRoutes }),
+}));
+
+rs.mock('@redpanda-data/ui', () => ({
+  Button: () => null,
+  ColorModeSwitch: () => null,
+  CopyButton: () => null,
+}));
+
+rs.mock('components/redpanda-ui/lib/utils', () => ({
+  cn: (...classes: Array<string | false | undefined>) => classes.filter(Boolean).join(' '),
+}));
+
+rs.mock('lucide-react', () => ({
+  ChevronLeft: () => null,
+}));
+
+rs.mock('../../config', () => ({
+  isEmbedded: () => false,
+  isFeatureFlagEnabled: () => false,
+}));
+
+rs.mock('../../state/backend-api', () => ({
+  api: { isRedpanda: false, userData: null },
+  useApiStoreHook: <T,>(selector: (state: { userData: null }) => T) => selector({ userData: null }),
+}));
+
+rs.mock('../../state/ui-state', () => ({
+  useUIStateStore: <T,>(
+    selector: (state: {
+      _pageTitle: string;
+      backLink: null;
+      pageBreadcrumbs: never[];
+      selectedClusterName: null;
+      shouldHidePageHeader: boolean;
+    }) => T
+  ) =>
+    selector({
+      _pageTitle: 'Cluster details',
+      backLink: null,
+      pageBreadcrumbs: [],
+      selectedClusterName: null,
+      shouldHidePageHeader: false,
+    }),
+}));
+
+rs.mock('../../utils/env', () => ({ IsDev: false }));
+rs.mock('../misc/buttons/data-refresh/component', () => ({ default: () => null }));
+
+rs.mock('../redpanda-ui/components/breadcrumb', () => ({
+  Breadcrumb: ({ children }: PropsWithChildren) => children,
+  BreadcrumbItem: ({ children }: PropsWithChildren) => children,
+  BreadcrumbLink: ({ render: content }: { render: ReactNode }) => content,
+  BreadcrumbList: ({ children }: PropsWithChildren) => children,
+  BreadcrumbSeparator: () => null,
+}));
+
+rs.mock('../redpanda-ui/components/button', () => ({ Button: () => null }));
+rs.mock('../redpanda-ui/components/separator', () => ({ Separator: () => null }));
+rs.mock('../redpanda-ui/components/sidebar', () => ({ SidebarTrigger: () => null }));
+
+import AppPageHeader from './header';
+
+describe('AppPageHeader', () => {
+  it('hides the title row when the matched route owns it', () => {
+    render(<AppPageHeader />);
+
+    expect(screen.queryByRole('heading', { name: 'Cluster details' })).not.toBeInTheDocument();
+  });
+});

frontend/src/components/layout/header.tsx

@@ -185,9 +185,9 @@ function useRouteOwnsTitleRow() {
   const router = useRouter();
   const { pathname } = useLocation();
 
-  return router
-    .getMatchedRoutes(pathname)
-    .matchedRoutes.some((route) => route.options.staticData?.breadcrumbOnlyHeader);
+  const [matchedRoutes] = router.getMatchedRoutes(pathname);
+
+  return matchedRoutes.some((route) => route.options.staticData?.breadcrumbOnlyHeader);
 }
 
 /**

frontend/src/components/routes/route-pending.test.tsx

@@ -0,0 +1,23 @@
+/**
+ * Copyright 2026 Redpanda Data, Inc.
+ *
+ * Use of this software is governed by the Business Source License
+ * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
+ *
+ * As of the Change Date specified in that file, in accordance with
+ * the Business Source License, use of this software will be governed
+ * by the Apache License, Version 2.0
+ */
+
+import { describe, expect, it } from '@rstest/core';
+import { render, screen } from '@testing-library/react';
+
+import { RoutePending } from './route-pending';
+
+describe('RoutePending', () => {
+  it('announces route loading', () => {
+    render(<RoutePending />);
+
+    expect(screen.getByRole('status', { name: 'Loading page' })).toBeVisible();
+  });
+});

frontend/src/components/routes/route-pending.tsx

@@ -17,9 +17,9 @@ import { LoaderIcon } from 'components/icons';
  */
 export const RoutePending = () => (
   <div className="flex items-center justify-center py-12">
-    <div className="flex items-center gap-2 text-muted-foreground">
+    <output aria-label="Loading page" className="flex items-center gap-2 text-muted-foreground">
       <LoaderIcon className="h-4 w-4 animate-spin" />
       <span>Loading...</span>
-    </div>
+    </output>
   </div>
 );