test(frontend): comprehensive test coverage improvements and bug fixes

- Raise coverage thresholds to 90% statements/lines/functions, 85% branches
- Add comprehensive tests for ProjectDashboard, ProjectWizard, and all wizard steps
- Add tests for issue management: IssueDetailPanel, BulkActions, IssueFilters
- Expand IssueTable tests with keyboard navigation, dropdown menu, edge cases
- Add useIssues hook tests covering all mutations and optimistic updates
- Expand eventStore tests with selector hooks and additional scenarios
- Expand useProjectEvents tests with error recovery, ping events, edge cases
- Add PriorityBadge, StatusBadge, SyncStatusIndicator fallback branch tests
- Add constants.test.ts for comprehensive constant validation

Bug fixes:
- Fix false positive rollback test to properly verify onMutate context setup
- Replace deprecated substr() with substring() in mock helpers
- Fix type errors: ProjectComplexity, ClientMode enum values
- Fix unused imports and variables across test files
- Fix @ts-expect-error directives and method override signatures

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/tests/components/projects/wizard/steps/ClientModeStep.test.tsx

@@ -0,0 +1,178 @@
+/**
+ * ClientModeStep Component Tests
+ *
+ * Tests for the client interaction mode selection step.
+ */
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ClientModeStep } from '@/components/projects/wizard/steps/ClientModeStep';
+import { clientModeOptions } from '@/components/projects/wizard/constants';
+import type { WizardState } from '@/components/projects/wizard/types';
+
+describe('ClientModeStep', () => {
+  const defaultState: WizardState = {
+    step: 3,
+    projectName: 'Test Project',
+    description: '',
+    repoUrl: '',
+    complexity: 'medium',
+    clientMode: null,
+    autonomyLevel: null,
+  };
+
+  const mockUpdateState = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('renders the step title', () => {
+      render(<ClientModeStep state={defaultState} updateState={mockUpdateState} />);
+      expect(screen.getByText('How Would You Like to Work?')).toBeInTheDocument();
+    });
+
+    it('renders the description text', () => {
+      render(<ClientModeStep state={defaultState} updateState={mockUpdateState} />);
+      expect(screen.getByText(/choose how you want to interact/i)).toBeInTheDocument();
+    });
+
+    it('renders all client mode options', () => {
+      render(<ClientModeStep state={defaultState} updateState={mockUpdateState} />);
+
+      clientModeOptions.forEach((option) => {
+        expect(screen.getByText(option.label)).toBeInTheDocument();
+        expect(screen.getByText(option.description)).toBeInTheDocument();
+      });
+    });
+
+    it('renders detail items for each option', () => {
+      render(<ClientModeStep state={defaultState} updateState={mockUpdateState} />);
+
+      clientModeOptions.forEach((option) => {
+        option.details.forEach((detail) => {
+          expect(screen.getByText(detail)).toBeInTheDocument();
+        });
+      });
+    });
+
+    it('has accessible radiogroup role', () => {
+      render(<ClientModeStep state={defaultState} updateState={mockUpdateState} />);
+      expect(screen.getByRole('radiogroup', { name: /client interaction mode options/i })).toBeInTheDocument();
+    });
+  });
+
+  describe('Selection', () => {
+    it('shows no selection initially', () => {
+      render(<ClientModeStep state={defaultState} updateState={mockUpdateState} />);
+
+      // No check icons should be visible for selected state
+      const selectedIndicators = document.querySelectorAll('[data-selected="true"]');
+      expect(selectedIndicators.length).toBe(0);
+    });
+
+    it('calls updateState when clicking the technical mode option', async () => {
+      const user = userEvent.setup();
+      render(<ClientModeStep state={defaultState} updateState={mockUpdateState} />);
+
+      const technicalOption = screen.getByRole('button', { name: /technical mode.*detailed technical/i });
+      await user.click(technicalOption);
+
+      expect(mockUpdateState).toHaveBeenCalledWith({ clientMode: 'technical' });
+    });
+
+    it('calls updateState when clicking the auto mode option', async () => {
+      const user = userEvent.setup();
+      render(<ClientModeStep state={defaultState} updateState={mockUpdateState} />);
+
+      const autoOption = screen.getByRole('button', { name: /auto mode.*help me figure/i });
+      await user.click(autoOption);
+
+      expect(mockUpdateState).toHaveBeenCalledWith({ clientMode: 'auto' });
+    });
+
+    it('shows visual selection indicator when an option is selected', () => {
+      const stateWithSelection: WizardState = {
+        ...defaultState,
+        clientMode: 'technical',
+      };
+      render(<ClientModeStep state={stateWithSelection} updateState={mockUpdateState} />);
+
+      // The selected card should have the check icon
+      const checkIcons = document.querySelectorAll('.lucide-check');
+      expect(checkIcons.length).toBeGreaterThan(0);
+    });
+
+    it('highlights selected option icon for auto mode', () => {
+      const stateWithAuto: WizardState = {
+        ...defaultState,
+        clientMode: 'auto',
+      };
+      render(<ClientModeStep state={stateWithAuto} updateState={mockUpdateState} />);
+
+      // Should have check mark for selected option
+      const checkIcons = document.querySelectorAll('.lucide-check');
+      expect(checkIcons.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('each option has accessible aria-label', () => {
+      render(<ClientModeStep state={defaultState} updateState={mockUpdateState} />);
+
+      clientModeOptions.forEach((option) => {
+        const button = screen.getByRole('button', {
+          name: new RegExp(`${option.label}.*${option.description}`, 'i')
+        });
+        expect(button).toBeInTheDocument();
+      });
+    });
+
+    it('icons have aria-hidden attribute', () => {
+      render(<ClientModeStep state={defaultState} updateState={mockUpdateState} />);
+      const hiddenIcons = document.querySelectorAll('[aria-hidden="true"]');
+      expect(hiddenIcons.length).toBeGreaterThan(0);
+    });
+
+    it('CheckCircle2 icons in detail lists are hidden from assistive tech', () => {
+      render(<ClientModeStep state={defaultState} updateState={mockUpdateState} />);
+      // All lucide icons should have aria-hidden
+      const allCheckCircles = document.querySelectorAll('.lucide-circle-check-big');
+      allCheckCircles.forEach((icon) => {
+        expect(icon).toHaveAttribute('aria-hidden', 'true');
+      });
+    });
+  });
+
+  describe('Edge cases', () => {
+    it('allows changing selection', async () => {
+      const user = userEvent.setup();
+      const stateWithTechnical: WizardState = {
+        ...defaultState,
+        clientMode: 'technical',
+      };
+      render(<ClientModeStep state={stateWithTechnical} updateState={mockUpdateState} />);
+
+      const autoOption = screen.getByRole('button', { name: /auto mode.*help me figure/i });
+      await user.click(autoOption);
+
+      expect(mockUpdateState).toHaveBeenCalledWith({ clientMode: 'auto' });
+    });
+
+    it('handles clicking already selected option', async () => {
+      const user = userEvent.setup();
+      const stateWithTechnical: WizardState = {
+        ...defaultState,
+        clientMode: 'technical',
+      };
+      render(<ClientModeStep state={stateWithTechnical} updateState={mockUpdateState} />);
+
+      const technicalOption = screen.getByRole('button', { name: /technical mode.*detailed technical/i });
+      await user.click(technicalOption);
+
+      // Should still call updateState
+      expect(mockUpdateState).toHaveBeenCalledWith({ clientMode: 'technical' });
+    });
+  });
+});