fix(data-table): use DropdownMenuTrigger wrapper in view options

frontend/src/components/license/license-notification.tsx

@@ -1,7 +1,6 @@
 import { Alert, AlertDescription, AlertIcon, Box, Button, Flex } from '@redpanda-data/ui';
 import { Link, useLocation } from '@tanstack/react-router';
 import { useEffect } from 'react';
-import { useStore } from 'zustand';
 
 import {
   coreHasEnterpriseFeatures,
@@ -13,15 +12,15 @@ import {
   prettyLicenseType,
 } from './license-utils';
 import { License_Source, License_Type } from '../../protogen/redpanda/api/console/v1alpha1/license_pb';
-import { api, useApiStore } from '../../state/backend-api';
+import { api, useApiStoreHook } from '../../state/backend-api';
 import { capitalizeFirst } from '../../utils/utils';
 
 // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: complex business logic
 export const LicenseNotification = () => {
-  const licenses = useStore(useApiStore, (s) => s.licenses);
-  const licensesLoaded = useStore(useApiStore, (s) => s.licensesLoaded);
-  const licenseViolation = useStore(useApiStore, (s) => s.licenseViolation);
-  const enterpriseFeaturesUsed = useStore(useApiStore, (s) => s.enterpriseFeaturesUsed);
+  const licenses = useApiStoreHook((s) => s.licenses);
+  const licensesLoaded = useApiStoreHook((s) => s.licensesLoaded);
+  const licenseViolation = useApiStoreHook((s) => s.licenseViolation);
+  const enterpriseFeaturesUsed = useApiStoreHook((s) => s.enterpriseFeaturesUsed);
   const location = useLocation();
 
   useEffect(() => {

frontend/src/components/license/overview-license-notification.tsx

@@ -1,7 +1,6 @@
 import { Alert, AlertDescription, AlertIcon, Box, Flex, Text } from '@redpanda-data/ui';
 import { Link } from 'components/redpanda-ui/components/typography';
 import { type FC, type ReactElement, useEffect, useState } from 'react';
-import { useStore } from 'zustand';
 
 import {
   consoleHasEnterpriseFeature,
@@ -20,7 +19,7 @@ import {
 } from './license-utils';
 import { RegisterModal } from './register-modal';
 import { type License, License_Type } from '../../protogen/redpanda/api/console/v1alpha1/license_pb';
-import { api, useApiStore } from '../../state/backend-api';
+import { api, useApiStoreHook } from '../../state/backend-api';
 
 const getLicenseAlertContent = (
   licenses: License[],
@@ -255,8 +254,8 @@ const getLicenseAlertContent = (
 };
 
 export const OverviewLicenseNotification: FC = () => {
-  const licenses = useStore(useApiStore, (s) => s.licenses);
-  const clusterOverview = useStore(useApiStore, (s) => s.clusterOverview);
+  const licenses = useApiStoreHook((s) => s.licenses);
+  const clusterOverview = useApiStoreHook((s) => s.clusterOverview);
   const [registerModalOpen, setIsRegisterModalOpen] = useState(false);
 
   useEffect(() => {

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

@@ -629,4 +629,151 @@ describe('AIAgentsListPage', () => {
 
     expect(screen.getByRole('button', { name: 'Next Page' })).toBeDisabled();
   });
+
+  test('search input updates value on keystrokes', async () => {
+    const user = userEvent.setup();
+
+    const agent1 = create(AIAgentSchema, {
+      id: 'agent-1',
+      displayName: 'Test Agent',
+      description: '',
+      state: AIAgent_State.RUNNING,
+      provider: { provider: { case: 'openai', value: { apiKey: 'key' } } },
+      model: 'gpt-4',
+      systemPrompt: '',
+      mcpServers: {},
+      tags: {},
+    });
+
+    const transport = createAIAgentsTransport({
+      listAIAgentsMock: vi
+        .fn()
+        .mockReturnValue(create(ListAIAgentsResponseSchema, { aiAgents: [agent1], nextPageToken: '' })),
+    });
+
+    renderWithFileRoutes(<AIAgentsListPage />, { transport });
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Agent')).toBeVisible();
+    });
+
+    const filterInput = screen.getByPlaceholderText('Filter agents...');
+    await user.type(filterInput, 'hello');
+
+    // Input value must reflect typed text — a React Compiler memoization
+    // bug would freeze it at the initial empty string.
+    expect(filterInput).toHaveValue('hello');
+  });
+
+  test('filters agents by name via search input', async () => {
+    const user = userEvent.setup();
+
+    const agent1 = create(AIAgentSchema, {
+      id: 'agent-1',
+      displayName: 'Alpha Agent',
+      description: '',
+      state: AIAgent_State.RUNNING,
+      provider: { provider: { case: 'openai', value: { apiKey: 'key' } } },
+      model: 'gpt-4',
+      systemPrompt: '',
+      mcpServers: {},
+      tags: {},
+    });
+
+    const agent2 = create(AIAgentSchema, {
+      id: 'agent-2',
+      displayName: 'Beta Agent',
+      description: '',
+      state: AIAgent_State.STOPPED,
+      provider: { provider: { case: 'openai', value: { apiKey: 'key' } } },
+      model: 'gpt-4',
+      systemPrompt: '',
+      mcpServers: {},
+      tags: {},
+    });
+
+    const transport = createAIAgentsTransport({
+      listAIAgentsMock: vi
+        .fn()
+        .mockReturnValue(create(ListAIAgentsResponseSchema, { aiAgents: [agent1, agent2], nextPageToken: '' })),
+    });
+
+    renderWithFileRoutes(<AIAgentsListPage />, { transport });
+
+    await waitFor(() => {
+      expect(screen.getByText('Alpha Agent')).toBeVisible();
+      expect(screen.getByText('Beta Agent')).toBeVisible();
+    });
+
+    const filterInput = screen.getByPlaceholderText('Filter agents...');
+    await user.type(filterInput, 'Beta');
+
+    await waitFor(() => {
+      expect(screen.getByText('Beta Agent')).toBeVisible();
+      expect(screen.queryByText('Alpha Agent')).not.toBeInTheDocument();
+    });
+
+    // Clear and type again to verify the input remains interactive
+    await user.clear(filterInput);
+
+    await waitFor(() => {
+      expect(screen.getByText('Alpha Agent')).toBeVisible();
+      expect(screen.getByText('Beta Agent')).toBeVisible();
+    });
+  });
+
+  test('status faceted filter filters results', async () => {
+    const user = userEvent.setup();
+
+    const agent1 = create(AIAgentSchema, {
+      id: 'agent-1',
+      displayName: 'Running Agent',
+      description: '',
+      state: AIAgent_State.RUNNING,
+      provider: { provider: { case: 'openai', value: { apiKey: 'key' } } },
+      model: 'gpt-4',
+      systemPrompt: '',
+      mcpServers: {},
+      tags: {},
+    });
+
+    const agent2 = create(AIAgentSchema, {
+      id: 'agent-2',
+      displayName: 'Stopped Agent',
+      description: '',
+      state: AIAgent_State.STOPPED,
+      provider: { provider: { case: 'openai', value: { apiKey: 'key' } } },
+      model: 'gpt-4',
+      systemPrompt: '',
+      mcpServers: {},
+      tags: {},
+    });
+
+    const transport = createAIAgentsTransport({
+      listAIAgentsMock: vi
+        .fn()
+        .mockReturnValue(create(ListAIAgentsResponseSchema, { aiAgents: [agent1, agent2], nextPageToken: '' })),
+    });
+
+    renderWithFileRoutes(<AIAgentsListPage />, { transport });
+
+    await waitFor(() => {
+      expect(screen.getByText('Running Agent')).toBeVisible();
+      expect(screen.getByText('Stopped Agent')).toBeVisible();
+    });
+
+    // Click the "Status" faceted filter button (not the column header one in <thead>)
+    const statusFilterButton = screen.getAllByRole('button', { name: /status/i }).find((btn) => !btn.closest('thead'))!;
+    await user.click(statusFilterButton);
+
+    // Select the "Stopped" option from the filter popover
+    const stoppedOption = await screen.findByRole('option', { name: /stopped/i });
+    await user.click(stoppedOption);
+
+    // Only the stopped agent should remain visible
+    await waitFor(() => {
+      expect(screen.getByText('Stopped Agent')).toBeVisible();
+      expect(screen.queryByText('Running Agent')).not.toBeInTheDocument();
+    });
+  });
 });