Add comprehensive performance monitoring and testing infrastructure

- Implement performance dashboard with real-time metrics tracking
- Add React hooks for smart polling, debouncing, and active source lookup
- Create Jest testing framework with comprehensive test suites for components, API endpoints, and utilities
- Enhance UI components with optimized rendering and memoization
- Improve polling efficiency with visibility detection and adaptive intervals

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

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

lib/__tests__/apiHelpers.test.ts

@@ -0,0 +1,252 @@
+import { NextResponse } from 'next/server';
+import {
+  createErrorResponse,
+  createSuccessResponse,
+  createValidationError,
+  createDatabaseError,
+  createOBSError,
+  parseRequestBody,
+} from '../apiHelpers';
+
+// Mock NextResponse
+jest.mock('next/server', () => ({
+  NextResponse: {
+    json: jest.fn((data, options) => ({
+      data,
+      status: options?.status || 200,
+    })),
+  },
+}));
+
+// Mock console.error to silence expected error logs
+const mockConsoleError = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+describe('apiHelpers', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  afterAll(() => {
+    mockConsoleError.mockRestore();
+  });
+
+  describe('createErrorResponse', () => {
+    it('creates error response with default status 500', () => {
+      const response = createErrorResponse('Test Error');
+      
+      expect(NextResponse.json).toHaveBeenCalledWith(
+        expect.objectContaining({
+          error: 'Test Error',
+          timestamp: expect.any(String),
+        }),
+        { status: 500 }
+      );
+    });
+
+    it('creates error response with custom status and message', () => {
+      const response = createErrorResponse('Test Error', 400, 'Custom message', { detail: 'extra' });
+      
+      expect(NextResponse.json).toHaveBeenCalledWith(
+        expect.objectContaining({
+          error: 'Test Error',
+          message: 'Custom message',
+          details: { detail: 'extra' },
+          timestamp: expect.any(String),
+        }),
+        { status: 400 }
+      );
+    });
+
+    it('logs error to console', () => {
+      // Temporarily restore the mock to capture calls
+      mockConsoleError.mockRestore();
+      const tempMock = jest.spyOn(console, 'error').mockImplementation(() => {});
+      
+      createErrorResponse('Test Error', 400);
+      
+      expect(tempMock).toHaveBeenCalledWith(
+        'API Error [400]:',
+        expect.objectContaining({
+          error: 'Test Error',
+          timestamp: expect.any(String),
+        })
+      );
+      
+      // Restore the original mock
+      tempMock.mockRestore();
+      jest.spyOn(console, 'error').mockImplementation(() => {});
+    });
+  });
+
+  describe('createSuccessResponse', () => {
+    it('creates success response with default status 200', () => {
+      const data = { test: 'data' };
+      const response = createSuccessResponse(data);
+      
+      expect(NextResponse.json).toHaveBeenCalledWith(
+        expect.objectContaining({
+          success: true,
+          data: { test: 'data' },
+          timestamp: expect.any(String),
+        }),
+        { status: 200 }
+      );
+    });
+
+    it('creates success response with custom status', () => {
+      const data = { id: 1, name: 'test' };
+      const response = createSuccessResponse(data, 201);
+      
+      expect(NextResponse.json).toHaveBeenCalledWith(
+        expect.objectContaining({
+          success: true,
+          data: { id: 1, name: 'test' },
+          timestamp: expect.any(String),
+        }),
+        { status: 201 }
+      );
+    });
+  });
+
+  describe('specialized error responses', () => {
+    it('createValidationError creates 400 response', () => {
+      const details = { field: 'error message' };
+      createValidationError('Validation failed', details);
+      
+      expect(NextResponse.json).toHaveBeenCalledWith(
+        expect.objectContaining({
+          error: 'Validation Error',
+          message: 'Validation failed',
+          details,
+        }),
+        { status: 400 }
+      );
+    });
+
+    it('createDatabaseError creates 500 response', () => {
+      const originalError = new Error('DB connection failed');
+      createDatabaseError('fetch users', originalError);
+      
+      expect(NextResponse.json).toHaveBeenCalledWith(
+        expect.objectContaining({
+          error: 'Database Error',
+          message: 'Database operation failed: fetch users',
+        }),
+        { status: 500 }
+      );
+    });
+
+    it('createOBSError creates 502 response', () => {
+      const originalError = new Error('WebSocket failed');
+      createOBSError('connect to OBS', originalError);
+      
+      expect(NextResponse.json).toHaveBeenCalledWith(
+        expect.objectContaining({
+          error: 'OBS Error',
+          message: 'OBS operation failed: connect to OBS',
+        }),
+        { status: 502 }
+      );
+    });
+  });
+
+  describe('parseRequestBody', () => {
+    const mockRequest = (body: any): Request => ({
+      json: jest.fn().mockResolvedValue(body),
+    } as any);
+
+    it('parses valid JSON body without validator', async () => {
+      const body = { name: 'test', value: 123 };
+      const request = mockRequest(body);
+      
+      const result = await parseRequestBody(request);
+      
+      expect(result.success).toBe(true);
+      if (result.success) {
+        expect(result.data).toEqual(body);
+      }
+    });
+
+    it('handles invalid JSON', async () => {
+      const request = {
+        json: jest.fn().mockRejectedValue(new Error('Invalid JSON')),
+      } as any;
+      
+      const result = await parseRequestBody(request);
+      
+      expect(result.success).toBe(false);
+      if (!result.success) {
+        expect(result.response).toBeDefined();
+      }
+    });
+
+    it('validates body with custom validator', async () => {
+      const body = { name: 'test' };
+      const request = mockRequest(body);
+      
+      const validator = jest.fn().mockReturnValue({
+        valid: true,
+        data: { name: 'test' },
+      });
+      
+      const result = await parseRequestBody(request, validator);
+      
+      expect(result.success).toBe(true);
+      expect(validator).toHaveBeenCalledWith(body);
+      if (result.success) {
+        expect(result.data).toEqual({ name: 'test' });
+      }
+    });
+
+    it('handles validation failure', async () => {
+      const body = { name: '' };
+      const request = mockRequest(body);
+      
+      const validator = jest.fn().mockReturnValue({
+        valid: false,
+        errors: { name: 'Name is required' },
+      });
+      
+      const result = await parseRequestBody(request, validator);
+      
+      expect(result.success).toBe(false);
+      expect(validator).toHaveBeenCalledWith(body);
+    });
+  });
+
+  describe('environment-specific behavior', () => {
+    const originalEnv = process.env.NODE_ENV;
+
+    afterAll(() => {
+      process.env.NODE_ENV = originalEnv;
+    });
+
+    it('includes error details in development', () => {
+      process.env.NODE_ENV = 'development';
+      const originalError = new Error('Test error');
+      
+      createDatabaseError('test operation', originalError);
+      
+      expect(NextResponse.json).toHaveBeenCalledWith(
+        expect.objectContaining({
+          details: originalError,
+        }),
+        { status: 500 }
+      );
+    });
+
+    it('excludes error details in production', () => {
+      process.env.NODE_ENV = 'production';
+      const originalError = new Error('Test error');
+      
+      createDatabaseError('test operation', originalError);
+      
+      expect(NextResponse.json).toHaveBeenCalledWith(
+        expect.objectContaining({
+          details: undefined,
+        }),
+        { status: 500 }
+      );
+    });
+  });
+});

lib/__tests__/useToast.test.ts

@@ -0,0 +1,226 @@
+import { renderHook, act } from '@testing-library/react';
+import { useToast } from '../useToast';
+
+describe('useToast', () => {
+  let mockRandom: jest.SpyInstance;
+
+  beforeEach(() => {
+    // Reset Math.random to ensure consistent IDs in tests
+    mockRandom = jest.spyOn(Math, 'random').mockReturnValue(0.5);
+  });
+
+  afterEach(() => {
+    mockRandom.mockRestore();
+  });
+
+  it('starts with empty toasts array', () => {
+    const { result } = renderHook(() => useToast());
+    
+    expect(result.current.toasts).toEqual([]);
+  });
+
+  it('adds a toast with addToast', () => {
+    const { result } = renderHook(() => useToast());
+    
+    act(() => {
+      result.current.addToast('info', 'Test Title', 'Test message');
+    });
+    
+    expect(result.current.toasts).toHaveLength(1);
+    expect(result.current.toasts[0]).toMatchObject({
+      type: 'info',
+      title: 'Test Title',
+      message: 'Test message',
+      duration: 5000,
+    });
+    expect(result.current.toasts[0].id).toBeDefined();
+  });
+
+  it('adds error toast with longer duration', () => {
+    const { result } = renderHook(() => useToast());
+    
+    act(() => {
+      result.current.addToast('error', 'Error Title');
+    });
+    
+    expect(result.current.toasts[0]).toMatchObject({
+      type: 'error',
+      title: 'Error Title',
+      duration: 7000, // Errors stay longer
+    });
+  });
+
+  it('adds toast with custom duration', () => {
+    const { result } = renderHook(() => useToast());
+    
+    act(() => {
+      result.current.addToast('success', 'Success Title', 'Success message', 3000);
+    });
+    
+    expect(result.current.toasts[0]).toMatchObject({
+      type: 'success',
+      title: 'Success Title',
+      message: 'Success message',
+      duration: 3000,
+    });
+  });
+
+  it('removes a toast by ID', () => {
+    const { result } = renderHook(() => useToast());
+    
+    let toastId: string;
+    
+    act(() => {
+      toastId = result.current.addToast('info', 'Test Title');
+    });
+    
+    expect(result.current.toasts).toHaveLength(1);
+    
+    act(() => {
+      result.current.removeToast(toastId);
+    });
+    
+    expect(result.current.toasts).toHaveLength(0);
+  });
+
+  it('clears all toasts', () => {
+    const { result } = renderHook(() => useToast());
+    
+    act(() => {
+      result.current.addToast('info', 'Toast 1');
+      result.current.addToast('error', 'Toast 2');
+      result.current.addToast('success', 'Toast 3');
+    });
+    
+    expect(result.current.toasts).toHaveLength(3);
+    
+    act(() => {
+      result.current.clearAllToasts();
+    });
+    
+    expect(result.current.toasts).toHaveLength(0);
+  });
+
+  it('supports multiple toasts', () => {
+    const { result } = renderHook(() => useToast());
+    
+    act(() => {
+      result.current.addToast('info', 'Toast 1');
+      result.current.addToast('error', 'Toast 2');
+      result.current.addToast('success', 'Toast 3');
+    });
+    
+    expect(result.current.toasts).toHaveLength(3);
+    expect(result.current.toasts[0].title).toBe('Toast 1');
+    expect(result.current.toasts[1].title).toBe('Toast 2');
+    expect(result.current.toasts[2].title).toBe('Toast 3');
+  });
+
+  describe('convenience methods', () => {
+    it('showSuccess creates success toast', () => {
+      const { result } = renderHook(() => useToast());
+      
+      act(() => {
+        result.current.showSuccess('Success!', 'Operation completed');
+      });
+      
+      expect(result.current.toasts[0]).toMatchObject({
+        type: 'success',
+        title: 'Success!',
+        message: 'Operation completed',
+      });
+    });
+
+    it('showError creates error toast', () => {
+      const { result } = renderHook(() => useToast());
+      
+      act(() => {
+        result.current.showError('Error!', 'Something went wrong');
+      });
+      
+      expect(result.current.toasts[0]).toMatchObject({
+        type: 'error',
+        title: 'Error!',
+        message: 'Something went wrong',
+        duration: 7000,
+      });
+    });
+
+    it('showWarning creates warning toast', () => {
+      const { result } = renderHook(() => useToast());
+      
+      act(() => {
+        result.current.showWarning('Warning!', 'Be careful');
+      });
+      
+      expect(result.current.toasts[0]).toMatchObject({
+        type: 'warning',
+        title: 'Warning!',
+        message: 'Be careful',
+      });
+    });
+
+    it('showInfo creates info toast', () => {
+      const { result } = renderHook(() => useToast());
+      
+      act(() => {
+        result.current.showInfo('Info', 'Helpful information');
+      });
+      
+      expect(result.current.toasts[0]).toMatchObject({
+        type: 'info',
+        title: 'Info',
+        message: 'Helpful information',
+      });
+    });
+  });
+
+  it('returns unique IDs for each toast', () => {
+    const { result } = renderHook(() => useToast());
+    
+    let id1: string, id2: string;
+    
+    act(() => {
+      // Mock different random values for unique IDs
+      mockRandom
+        .mockReturnValueOnce(0.1)
+        .mockReturnValueOnce(0.9);
+      
+      id1 = result.current.addToast('info', 'Toast 1');
+      id2 = result.current.addToast('info', 'Toast 2');
+    });
+    
+    expect(id1).not.toBe(id2);
+    expect(result.current.toasts[0].id).toBe(id1);
+    expect(result.current.toasts[1].id).toBe(id2);
+  });
+
+  it('removes only the specified toast when multiple exist', () => {
+    const { result } = renderHook(() => useToast());
+    
+    let id1: string, id2: string, id3: string;
+    
+    act(() => {
+      // Mock different random values for unique IDs
+      mockRandom
+        .mockReturnValueOnce(0.1)
+        .mockReturnValueOnce(0.5)
+        .mockReturnValueOnce(0.9);
+      
+      id1 = result.current.addToast('info', 'Toast 1');
+      id2 = result.current.addToast('error', 'Toast 2');  
+      id3 = result.current.addToast('success', 'Toast 3');
+    });
+    
+    expect(result.current.toasts).toHaveLength(3);
+    
+    act(() => {
+      result.current.removeToast(id2);
+    });
+    
+    expect(result.current.toasts).toHaveLength(2);
+    expect(result.current.toasts.find(t => t.id === id1)).toBeDefined();
+    expect(result.current.toasts.find(t => t.id === id2)).toBeUndefined();
+    expect(result.current.toasts.find(t => t.id === id3)).toBeDefined();
+  });
+});