fix(frontend): switch React Compiler to opt-in annotation mode

frontend/rsbuild.config.ts

@@ -31,6 +31,10 @@ export default defineConfig({
           'babel-plugin-react-compiler',
           {
             target: '18',
+            compilationMode: 'annotation',
+            panicThreshold: 'critical_errors',
+            // In annotation mode, this still gates which files CAN be opted in.
+            // Files excluded here are ineligible even with 'use memo'.
             sources: (filename: string) => {
               if (filename.includes('/lib/redpanda-ui/')) {
                 return false;

frontend/src/components/layout/header.tsx

@@ -9,8 +9,6 @@
  * by the Apache License, Version 2.0
  */
 
-'use no memo';
-
 import { Box, Button, ColorModeSwitch, CopyButton, Flex } from '@redpanda-data/ui';
 import { Link, useLocation, useMatchRoute } from '@tanstack/react-router';
 import { Heading } from 'components/redpanda-ui/components/typography';

frontend/src/components/layout/sidebar.tsx

@@ -9,8 +9,6 @@
  * by the Apache License, Version 2.0
  */
 
-'use no memo';
-
 import { Link, useLocation } from '@tanstack/react-router';
 import { Avatar, AvatarFallback, AvatarImage } from 'components/redpanda-ui/components/avatar';
 import {

frontend/src/components/license/register-modal.tsx

@@ -1,5 +1,3 @@
-'use no memo';
-
 import { ConnectError } from '@connectrpc/connect';
 import {
   Alert,

frontend/src/components/misc/kowl-json-view.test.tsx

@@ -1,5 +1,3 @@
-'use no memo';
-
 import { act, render, waitFor } from '@testing-library/react';
 
 vi.mock('@redpanda-data/ui', async () => {

frontend/src/components/misc/user-preferences.tsx

@@ -9,8 +9,6 @@
  * by the Apache License, Version 2.0
  */
 
-'use no memo';
-
 import {
   Button,
   Checkbox,

frontend/src/components/pages/acls/new-acl/create-acl.tsx

@@ -1,7 +1,5 @@
 /** biome-ignore-all lint/correctness/useUniqueElementIds: this is intentional for form usage */
 
-'use no memo';
-
 import { Button } from 'components/redpanda-ui/components/button';
 import {
   Card,

frontend/src/components/pages/acls/principal-group-editor.tsx

@@ -9,8 +9,6 @@
  * by the Apache License, Version 2.0
  */
 
-'use no memo';
-
 import { Box, Button, Flex, FormField, Grid, Icon, Input, InputGroup, InputLeftAddon, Text } from '@redpanda-data/ui';
 import { TrashIcon } from 'components/icons';
 

frontend/src/components/pages/acls/role-form.tsx

@@ -9,8 +9,6 @@
  * by the Apache License, Version 2.0
  */
 
-'use no memo';
-
 import { useNavigate } from '@tanstack/react-router';
 import { Button } from 'components/redpanda-ui/components/button';
 import { Combobox } from 'components/redpanda-ui/components/combobox';

frontend/src/components/pages/acls/user-create.tsx

@@ -9,8 +9,6 @@
  * by the Apache License, Version 2.0
  */
 
-'use no memo';
-
 import {
   Alert,
   AlertIcon,

frontend/src/components/pages/acls/user-edit-modals.tsx

@@ -1,5 +1,3 @@
-'use no memo';
-
 import { create } from '@bufbuild/protobuf';
 import { ConnectError } from '@connectrpc/connect';
 import {

frontend/src/components/pages/agents/create/ai-agent-create-page.tsx

@@ -9,7 +9,6 @@
  * by the Apache License, Version 2.0
  */
 
-'use no memo';
 'use client';
 
 import { create } from '@bufbuild/protobuf';

frontend/src/components/pages/agents/details/ai-agent-card-tab.tsx

@@ -9,8 +9,6 @@
  * by the Apache License, Version 2.0
  */
 
-'use no memo';
-
 import { create } from '@bufbuild/protobuf';
 import { FieldMaskSchema } from '@bufbuild/protobuf/wkt';
 import { Markdown } from '@redpanda-data/ui';

frontend/src/components/pages/agents/details/ai-agent-configuration-tab.tsx

@@ -9,8 +9,6 @@
  * by the Apache License, Version 2.0
  */
 
-'use no memo';
-
 import { create } from '@bufbuild/protobuf';
 import { FieldMaskSchema } from '@bufbuild/protobuf/wkt';
 import { getRouteApi, Link } from '@tanstack/react-router';

frontend/src/components/pages/agents/details/ai-agent-details-page.tsx

@@ -9,8 +9,6 @@
  * by the Apache License, Version 2.0
  */
 
-'use no memo';
-
 import { getRouteApi, useNavigate } from '@tanstack/react-router';
 
 const routeApi = getRouteApi('/agents/$id/');

frontend/src/components/pages/agents/details/ai-agent-inspector-tab.tsx

@@ -9,8 +9,6 @@
  * by the Apache License, Version 2.0
  */
 
-'use no memo';
-
 import { getRouteApi } from '@tanstack/react-router';
 
 const routeApi = getRouteApi('/agents/$id/');

frontend/src/components/pages/agents/list/ai-agent-list-page.tsx

@@ -9,8 +9,6 @@
  * by the Apache License, Version 2.0
  */
 
-'use no memo';
-
 'use client';
 
 import { ConnectError } from '@connectrpc/connect';
@@ -284,7 +282,6 @@ const AIAgentsListPageContent = ({
 }: {
   deleteHandlerRef: React.RefObject<AIAgentDeleteHandlerRef>;
 }) => {
-  'use no memo';
   const navigate = useNavigate();
   const [sorting, setSorting] = React.useState<SortingState>([]);
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);

frontend/src/components/pages/connect/cluster-details.tsx

@@ -9,8 +9,6 @@
  * by the Apache License, Version 2.0
  */
 
-'use no memo';
-
 import { Box, Button, DataTable, Text } from '@redpanda-data/ui';
 import { Link } from '@tanstack/react-router';
 import { useCallback, useState } from 'react';

frontend/src/components/pages/connect/connector-details.tsx

@@ -9,8 +9,6 @@
  * by the Apache License, Version 2.0
  */
 
-'use no memo';
-
 import React, { useEffect, useRef, useState } from 'react';
 
 import { ConfigPage } from './dynamic-ui/components';

frontend/src/components/pages/connect/create-connector.tsx

@@ -9,8 +9,6 @@
  * by the Apache License, Version 2.0
  */
 
-'use no memo';
-
 import {
   Alert,
   AlertDescription,

frontend/src/components/pages/connect/dynamic-ui/components.tsx

@@ -9,8 +9,6 @@
  * by the Apache License, Version 2.0
  */
 
-'use no memo';
-
 import { Box, RadioGroup, Skeleton, Switch } from '@redpanda-data/ui';
 import { useCallback, useState, useSyncExternalStore } from 'react';
 

frontend/src/components/pages/connect/overview.tsx

@@ -9,8 +9,6 @@
  * by the Apache License, Version 2.0
  */
 
-'use no memo';
-
 import { create } from '@bufbuild/protobuf';
 import { Box, DataTable, Stack, Tooltip } from '@redpanda-data/ui';
 import ErrorResult from 'components/misc/error-result';

frontend/src/components/pages/knowledgebase/details/knowledge-base-document-list.tsx

@@ -8,8 +8,6 @@
  * by the Apache License, Version 2.0
  */
 
-'use no memo';
-
 import { useNavigate } from '@tanstack/react-router';
 import {
   type ColumnDef,
@@ -153,7 +151,6 @@ export const KnowledgeBaseDocumentList: React.FC<KnowledgeBaseDocumentListProps>
   isLoading,
   knowledgebaseId,
 }) => {
-  'use no memo';
   const navigate = useNavigate();
 
   // TanStack Table state

frontend/src/components/pages/knowledgebase/details/knowledge-base-playground-tab.tsx

@@ -9,8 +9,6 @@
  * by the Apache License, Version 2.0
  */
 
-'use no memo';
-
 import { ConnectError } from '@connectrpc/connect';
 import { Clock, Search, Send, X } from 'lucide-react';
 import React, { useCallback, useEffect, useRef, useState } from 'react';

frontend/src/components/pages/knowledgebase/list/knowledge-base-list-page.tsx

@@ -9,8 +9,6 @@
  * by the Apache License, Version 2.0
  */
 
-'use no memo';
-
 'use client';
 
 import { ConnectError } from '@connectrpc/connect';
@@ -352,7 +350,6 @@ export const updatePageTitle = () => {
 };
 
 export const KnowledgeBaseListPage = () => {
-  'use no memo';
   const featurePipelinesApi = useSupportedFeaturesStore((s) => s.pipelinesApi);
   const navigate = useNavigate();
   const [sorting, setSorting] = React.useState<SortingState>([]);

frontend/src/components/pages/mcp-servers/create/remote-mcp-create-page.tsx

@@ -8,7 +8,6 @@
  * by the Apache License, Version 2.0
  */
 
-'use no memo';
 'use client';
 
 import { create } from '@bufbuild/protobuf';

frontend/src/components/pages/mcp-servers/details/remote-mcp-configuration-tab.tsx

@@ -9,8 +9,6 @@
  * by the Apache License, Version 2.0
  */
 
-'use no memo';
-
 /** biome-ignore-all lint/correctness/useUniqueElementIds: this is intentional for form usage */
 
 import { create } from '@bufbuild/protobuf';

frontend/src/components/pages/mcp-servers/details/remote-mcp-inspector-tab.tsx

@@ -11,8 +11,6 @@
 /** biome-ignore-all lint/a11y/noStaticElementInteractions: leave for now */
 /** biome-ignore-all lint/a11y/useKeyWithClickEvents: leave for now */
 
-'use no memo';
-
 import { create } from '@bufbuild/protobuf';
 import { getRouteApi } from '@tanstack/react-router';
 

frontend/src/components/pages/mcp-servers/list/remote-mcp-list-page.tsx

@@ -9,8 +9,6 @@
  * by the Apache License, Version 2.0
  */
 
-'use no memo';
-
 'use client';
 
 import { ConnectError } from '@connectrpc/connect';
@@ -267,7 +265,6 @@ export const updatePageTitle = () => {
 };
 
 const RemoteMCPListPageContent = ({ deleteHandlerRef }: { deleteHandlerRef: React.RefObject<MCPDeleteHandlerRef> }) => {
-  'use no memo';
   const navigate = useNavigate();
   const [sorting, setSorting] = React.useState<SortingState>([]);
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);

frontend/src/components/pages/overview/api-connect-wizard.tsx

@@ -1,5 +1,3 @@
-'use no memo';
-
 import { TransportProvider } from '@connectrpc/connect-query';
 import { Markdown } from '@redpanda-data/ui';
 import { useNavigate, useRouter } from '@tanstack/react-router';

frontend/src/components/pages/reassign-partitions/components/active-reassignments.tsx

@@ -9,8 +9,6 @@
  * by the Apache License, Version 2.0
  */
 
-'use no memo';
-
 import {
   Box,
   Button,

frontend/src/components/pages/reassign-partitions/components/bandwidth-slider.tsx

@@ -9,8 +9,6 @@
  * by the Apache License, Version 2.0
  */
 
-'use no memo';
-
 import { useState } from 'react';
 
 import type { uiSettings } from '../../../../state/ui';

frontend/src/components/pages/rp-connect/onboarding/add-user-step.tsx

@@ -1,5 +1,3 @@
-'use no memo';
-
 import { ConnectError } from '@connectrpc/connect';
 import { createConnectQueryKey } from '@connectrpc/connect-query';
 import { zodResolver } from '@hookform/resolvers/zod';

frontend/src/components/pages/rp-connect/onboarding/onboarding-wizard.tsx

@@ -1,5 +1,3 @@
-'use no memo';
-
 import { create } from '@bufbuild/protobuf';
 import { getRouteApi, useNavigate } from '@tanstack/react-router';
 

frontend/src/components/pages/rp-connect/pipeline/list.tsx

@@ -9,8 +9,6 @@
  * by the Apache License, Version 2.0
  */
 
-'use no memo';
-
 import { create } from '@bufbuild/protobuf';
 import { ConnectError } from '@connectrpc/connect';
 import { Link as TanStackRouterLink, useNavigate } from '@tanstack/react-router';
@@ -491,7 +489,6 @@ const createColumns = ({
 ];
 
 const PipelineListPageContent = () => {
-  'use no memo';
   const navigate = useNavigate();
   const resetOnboardingWizardStore = useResetOnboardingWizardStore();
 

frontend/src/components/pages/schemas/schema-create.tsx

@@ -9,8 +9,6 @@
  * by the Apache License, Version 2.0
  */
 
-'use no memo';
-
 import { useQueryClient } from '@tanstack/react-query';
 import { TrashIcon } from 'components/icons';
 import { Alert, AlertDescription, AlertTitle } from 'components/redpanda-ui/components/alert';

frontend/src/components/pages/schemas/schema-details.tsx

@@ -9,8 +9,6 @@
  * by the Apache License, Version 2.0
  */
 
-'use no memo';
-
 import { useQueryClient } from '@tanstack/react-query';
 import { getRouteApi, Link, useNavigate } from '@tanstack/react-router';
 import { EditIcon } from 'components/icons';

frontend/src/components/pages/secrets-store/secrets-store-list-page.tsx

@@ -8,8 +8,6 @@
  * use of this software will be governed by the Apache License, Version 2.0
  */
 
-'use no memo';
-
 import { create } from '@bufbuild/protobuf';
 import { ConnectError } from '@connectrpc/connect';
 import { useNavigate } from '@tanstack/react-router';
@@ -247,7 +245,6 @@ function SecretsStoreDataTableToolbar({ table }: { table: TanstackTable<SecretTa
 }
 
 export const SecretsStoreListPage = () => {
-  'use no memo';
   const navigate = useNavigate();
 
   const [sorting, setSorting] = React.useState<SortingState>([]);

frontend/src/components/pages/shadowlinks/create/configuration/schema-registry-step.test.tsx

@@ -9,8 +9,6 @@
  * by the Apache License, Version 2.0
  */
 
-'use no memo';
-
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Form } from 'components/redpanda-ui/components/form';
 import { useForm } from 'react-hook-form';
@@ -26,7 +24,6 @@ const TestWrapper = ({
   defaultValues?: FormValues;
   onFormChange?: (values: FormValues) => void;
 }) => {
-  'use no memo';
   const form = useForm<FormValues>({
     resolver: zodResolver(FormSchema),
     defaultValues,

frontend/src/components/pages/shadowlinks/create/connection/certificate-dialog.tsx

@@ -9,8 +9,6 @@
  * by the Apache License, Version 2.0
  */
 
-'use no memo';
-
 import { Button } from 'components/redpanda-ui/components/button';
 import {
   Dialog,