fix(frontend): unblock browser-mode vitest and land visual baselines (#2500)

* fix(frontend): unblock browser-mode vitest so visual baselines can generate

Baseline generation has never completed ('blocks on the first cold
Vitest+Playwright browser-mode launch and runs out the job timeout' per
the test-browser CI comment). Root causes, in the order they unmasked:

- @icons-pack/react-simple-icons was barrel-imported; dev-mode Vite
  pre-bundles the ~3000-icon 59MB package into one module, crashing the
  chromium tab ('Browser connection was closed'). Switched to deep
  per-icon .mjs imports (exports map is verbatim './icons/*') with an
  ambient wildcard declaration for types.
- ai-agent-list-page.browser.test.tsx mocked state/ui-state via
  importOriginal, evaluating the real module's huge transitive graph and
  stalling module loading. Replaced with a plain factory.
- The same test mocked react-query/api/remote-mcp but the page imports
  react-query/api/aigw/mcp-servers (stale mock target); fixed and wrapped
  the render in QueryClientProvider.
- mockConnectQuery now spreads the actual @connectrpc/connect-query so
  every re-export (TransportProvider, hooks) stays available; vi.mock
  factories resolve helpers via dynamic import (hoisting-safe).
- vitest.config.browser.mts scans browser specs via optimizeDeps.entries
  so Vite pre-bundles their dep graph up front instead of re-optimizing
  mid-run.

Full browser suite now completes under CI=true: 6 files, 15 tests.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* chore(frontend): add visual regression baselines

Generated by the frontend-update-baselines workflow on the original
branch; carried over verbatim so test-browser runs strict comparison.

---------

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: 3 people

frontend/src/__tests__/browser-test-utils.tsx

@@ -27,10 +27,15 @@ export function mockRouterForBrowserTest() {
   };
 }
 
-export function mockConnectQuery() {
+export async function mockConnectQuery() {
+  /** Spread the real module so every re-export (TransportProvider, hooks, ...) stays available; only the RPC entry points are stubbed. */
+  const actual = await vi.importActual<typeof import('@connectrpc/connect-query')>('@connectrpc/connect-query');
   return {
+    ...actual,
     callUnaryMethod: vi.fn(),
     createConnectQueryKey: vi.fn(() => ['mock-key']),
+    useMutation: vi.fn(() => ({ mutate: vi.fn(), mutateAsync: vi.fn(), isPending: false })),
+    useQuery: vi.fn(() => ({ data: undefined, isLoading: false, error: null })),
   };
 }
 

frontend/src/assets/connectors/component-logo-map.tsx

@@ -1,19 +1,17 @@
-import {
-  SiApachekafka,
-  SiApacheparquet,
-  SiApachepulsar,
-  SiClickhouse,
-  SiCockroachlabs,
-  SiDgraph,
-  SiJaeger,
-  SiMqtt,
-  SiNeo4j,
-  SiOllama,
-  SiOpenai,
-  SiSalesforce,
-  SiSplunk,
-  SiTrino,
-} from '@icons-pack/react-simple-icons';
+import SiApachekafka from '@icons-pack/react-simple-icons/icons/SiApachekafka.mjs';
+import SiApacheparquet from '@icons-pack/react-simple-icons/icons/SiApacheparquet.mjs';
+import SiApachepulsar from '@icons-pack/react-simple-icons/icons/SiApachepulsar.mjs';
+import SiClickhouse from '@icons-pack/react-simple-icons/icons/SiClickhouse.mjs';
+import SiCockroachlabs from '@icons-pack/react-simple-icons/icons/SiCockroachlabs.mjs';
+import SiDgraph from '@icons-pack/react-simple-icons/icons/SiDgraph.mjs';
+import SiJaeger from '@icons-pack/react-simple-icons/icons/SiJaeger.mjs';
+import SiMqtt from '@icons-pack/react-simple-icons/icons/SiMqtt.mjs';
+import SiNeo4j from '@icons-pack/react-simple-icons/icons/SiNeo4j.mjs';
+import SiOllama from '@icons-pack/react-simple-icons/icons/SiOllama.mjs';
+import SiOpenai from '@icons-pack/react-simple-icons/icons/SiOpenai.mjs';
+import SiSalesforce from '@icons-pack/react-simple-icons/icons/SiSalesforce.mjs';
+import SiSplunk from '@icons-pack/react-simple-icons/icons/SiSplunk.mjs';
+import SiTrino from '@icons-pack/react-simple-icons/icons/SiTrino.mjs';
 import { RedpandaUILetterIcon } from 'components/redpanda-ui/components/icons';
 import {
   Activity,

frontend/src/components/icons/index.tsx

@@ -16,11 +16,11 @@
 
 // Social media icons - simple-icons
 // biome-ignore lint/performance/noBarrelFile: Intentional central icon system as per project architecture
-export {
-  SiGithub as GitHubIcon, // FaGithub
-  SiSlack as SlackIcon, // FaSlack
-  SiX as TwitterIcon, // FaTwitter (Twitter rebranded to X)
-} from '@icons-pack/react-simple-icons';
+// Deep per-icon imports: the package barrel re-exports ~3000 icons (59MB),
+// which dev-mode bundlers pre-bundle whole — crashing browser-mode vitest.
+export { default as GitHubIcon } from '@icons-pack/react-simple-icons/icons/SiGithub.mjs'; // FaGithub
+export { default as SlackIcon } from '@icons-pack/react-simple-icons/icons/SiSlack.mjs'; // FaSlack
+export { default as TwitterIcon } from '@icons-pack/react-simple-icons/icons/SiX.mjs'; // FaTwitter (Twitter rebranded to X)
 
 // LinkedIn removed from both lucide-react (v1.x) and @icons-pack/react-simple-icons
 // (trademark). Inline SVG preserves the brand mark while staying dependency-free.

frontend/src/components/pages/agents/list/__screenshots__/ai-agent-list-page.browser.test.tsx/ai-agent-list-populated-chromium-linux.png

@@ -10,18 +10,14 @@
  */
 
 import { create } from '@bufbuild/protobuf';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import type { AIAgent } from 'protogen/redpanda/api/dataplane/v1alpha3/ai_agent_pb';
 import { AIAgent_State, AIAgentSchema } from 'protogen/redpanda/api/dataplane/v1alpha3/ai_agent_pb';
 import { describe, expect, test, vi } from 'vitest';
 import { page } from 'vitest/browser';
 import { render } from 'vitest-browser-react';
 
-import {
-  getRouteComponent,
-  mockConnectQuery,
-  mockRouterForBrowserTest,
-  ScreenshotFrame,
-} from '../../../../__tests__/browser-test-utils';
+import { getRouteComponent, ScreenshotFrame } from '../../../../__tests__/browser-test-utils';
 
 // Hoisted mocks — `vi.mock` factories run before module imports, so any state
 // they reference must be declared via `vi.hoisted()` to survive hoisting.
@@ -38,8 +34,18 @@ const mocks = vi.hoisted(() => ({
   }),
 }));
 
-vi.mock('@tanstack/react-router', () => mockRouterForBrowserTest());
-vi.mock('@connectrpc/connect-query', () => mockConnectQuery());
+// vi.mock factories are hoisted above imports, so they must not close over
+// top-level bindings — resolve the helpers via dynamic import inside the
+// factory instead. The closure variant crashes the browser-mode mocker under
+// CI ("error when mocking a module"), killing the page and hanging the run.
+vi.mock('@tanstack/react-router', async () => {
+  const { mockRouterForBrowserTest } = await import('../../../../__tests__/browser-test-utils');
+  return mockRouterForBrowserTest();
+});
+vi.mock('@connectrpc/connect-query', async () => {
+  const { mockConnectQuery } = await import('../../../../__tests__/browser-test-utils');
+  return mockConnectQuery();
+});
 
 vi.mock('config', () => ({
   config: { jwt: 'test-jwt-token', controlplaneUrl: 'http://localhost:9090' },
@@ -48,13 +54,12 @@ vi.mock('config', () => ({
   addBearerTokenInterceptor: vi.fn((next) => async (request: unknown) => await next(request)),
 }));
 
-vi.mock('state/ui-state', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('state/ui-state')>();
-  return {
-    ...actual,
-    uiState: { pageTitle: '', pageBreadcrumbs: [] },
-  };
-});
+// Plain factory on purpose: importOriginal would evaluate the real ui-state
+// module, whose transitive import graph is large enough to stall browser-mode
+// module loading until the run times out.
+vi.mock('state/ui-state', () => ({
+  uiState: { pageTitle: '', pageBreadcrumbs: [] },
+}));
 
 vi.mock('react-query/api/ai-agent', () => ({
   useListAIAgentsQuery: () => mocks.listAIAgents(),
@@ -63,15 +68,15 @@ vi.mock('react-query/api/ai-agent', () => ({
   useStopAIAgentMutation: () => ({ mutate: vi.fn(), mutateAsync: vi.fn(), isPending: false }),
 }));
 
-vi.mock('react-query/api/remote-mcp', () => ({
-  useListMCPServersQuery: () => mocks.listMCPServers(),
+vi.mock('react-query/api/aigw/mcp-servers', () => ({
+  useListAigwMCPServersQuery: () => mocks.listMCPServers(),
 }));
 
 vi.mock('react-query/api/secret', () => ({
   useDeleteSecretMutation: () => ({ mutate: vi.fn(), mutateAsync: vi.fn(), isPending: false }),
 }));
 
-const { AIAgentsListPage } = await import('./ai-agent-list-page');
+import { AIAgentsListPage } from './ai-agent-list-page';
 
 // Route-component extraction guard — exercises getRouteComponent for parity
 // with the ADP UI browser-test pattern.
@@ -137,9 +142,11 @@ describe('AIAgentsListPage — browser visual regression', () => {
     });
 
     render(
-      <ScreenshotFrame width={1280}>
-        <AIAgentsListPage />
-      </ScreenshotFrame>
+      <QueryClientProvider client={new QueryClient()}>
+        <ScreenshotFrame width={1280}>
+          <AIAgentsListPage />
+        </ScreenshotFrame>
+      </QueryClientProvider>
     );
 
     await expect.element(page.getByText('Customer Support Agent')).toBeVisible();

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

@@ -16,7 +16,7 @@ import { describe, expect, test, vi } from 'vitest';
 import { page } from 'vitest/browser';
 import { render } from 'vitest-browser-react';
 
-import { mockConnectQuery, mockRouterForBrowserTest, ScreenshotFrame } from '../../../../__tests__/browser-test-utils';
+import { ScreenshotFrame } from '../../../../__tests__/browser-test-utils';
 
 const RUN_TOOL_REGEX = /run tool/i;
 
@@ -54,15 +54,25 @@ const mocks = vi.hoisted(() => ({
   },
 }));
 
-vi.mock('@tanstack/react-router', () => ({
-  ...mockRouterForBrowserTest(),
-  getRouteApi: () => ({
-    useParams: () => ({ id: 'mcp-server-visual' }),
-    useRouteContext: ({ select }: { select: (ctx: Record<string, unknown>) => unknown }) =>
-      select({ gatewayUrl: 'http://localhost:8090' }),
-  }),
-}));
-vi.mock('@connectrpc/connect-query', () => mockConnectQuery());
+// vi.mock factories are hoisted above imports, so they must not close over
+// top-level bindings — resolve the helpers via dynamic import inside the
+// factory instead. The closure variant crashes the browser-mode mocker under
+// CI ("error when mocking a module"), killing the page and hanging the run.
+vi.mock('@tanstack/react-router', async () => {
+  const { mockRouterForBrowserTest } = await import('../../../../__tests__/browser-test-utils');
+  return {
+    ...mockRouterForBrowserTest(),
+    getRouteApi: () => ({
+      useParams: () => ({ id: 'mcp-server-visual' }),
+      useRouteContext: ({ select }: { select: (ctx: Record<string, unknown>) => unknown }) =>
+        select({ gatewayUrl: 'http://localhost:8090' }),
+    }),
+  };
+});
+vi.mock('@connectrpc/connect-query', async () => {
+  const { mockConnectQuery } = await import('../../../../__tests__/browser-test-utils');
+  return mockConnectQuery();
+});
 
 vi.mock('config', () => ({
   config: { jwt: 'test-jwt-token' },

frontend/src/components/pages/mcp-servers/details/__screenshots__/remote-mcp-inspector-tab.browser.test.tsx/mcp-streaming-inspector-chromium-linux.png

@@ -0,0 +1,18 @@
+/**
+ * Types for deep per-icon imports from @icons-pack/react-simple-icons.
+ *
+ * The package's exports map is `"./icons/*": "./icons/*"` (verbatim, no
+ * extension rewriting), so runtime imports must reference the `.mjs` file
+ * explicitly — which TypeScript cannot pair with the adjacent `.d.ts`. This
+ * ambient wildcard supplies the component type instead.
+ *
+ * Deep imports are deliberate: the package barrel re-exports ~3000 icons
+ * (59 MB), which dev-mode bundlers pre-bundle whole and crash browser-mode
+ * Vitest; per-icon imports load only what the app uses.
+ */
+declare module '@icons-pack/react-simple-icons/icons/*' {
+  import type { ComponentType, SVGProps } from 'react';
+
+  const icon: ComponentType<SVGProps<SVGSVGElement> & { size?: number | string; color?: string; title?: string }>;
+  export default icon;
+}

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

@@ -40,6 +40,12 @@ export default defineConfig({
   ],
   resolve: { alias: sharedAliases, preserveSymlinks: true },
   optimizeDeps: {
+    // Scan every browser spec up front so Vite pre-bundles their full dep
+    // graph at startup. Without this, the optimizer discovers new deps while
+    // workers are mid-run, re-optimizes, invalidates in-flight imports, and
+    // the cold launch hangs until the job timeout (the documented reason
+    // baseline generation never completed).
+    entries: ['vitest.browser.setup.ts', 'src/**/*.browser.test.tsx'],
     include: [
       '@bufbuild/protobuf',
       '@connectrpc/connect',