@a5c-ai/babysitter-observer-dashboard 1.0.0

package/src/components/dashboard/__tests__/run-filter-bar.test.tsx

@@ -0,0 +1,109 @@
+import { render, screen } from '@/test/test-utils';
+import { vi } from 'vitest';
+import { RunFilterBar } from '../run-filter-bar';
+import userEvent from '@testing-library/user-event';
+import type { DashboardStatusFilter } from '@/hooks/use-run-dashboard';
+
+const defaultFilterCounts: Record<DashboardStatusFilter, number> = {
+  all: 20,
+  waiting: 5,
+  stale: 0,
+  completed: 12,
+  failed: 3,
+  pending: 0,
+};
+
+describe('RunFilterBar', () => {
+  const defaultProps = {
+    statusFilter: 'all' as DashboardStatusFilter,
+    onStatusFilterChange: vi.fn(),
+    filterCounts: defaultFilterCounts,
+    sortMode: 'status' as const,
+    onSortModeToggle: vi.fn(),
+    filteredProjectCount: 5,
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders filter pills for all, running, completed, failed', () => {
+    render(<RunFilterBar {...defaultProps} />);
+    expect(screen.getByTestId('filter-pill-all')).toBeInTheDocument();
+    expect(screen.getByTestId('filter-pill-waiting')).toBeInTheDocument();
+    expect(screen.getByTestId('filter-pill-completed')).toBeInTheDocument();
+    expect(screen.getByTestId('filter-pill-failed')).toBeInTheDocument();
+  });
+
+  it('hides stale pill when count is 0', () => {
+    render(<RunFilterBar {...defaultProps} />);
+    expect(screen.queryByTestId('filter-pill-stale')).not.toBeInTheDocument();
+  });
+
+  it('shows stale pill when count > 0', () => {
+    render(
+      <RunFilterBar
+        {...defaultProps}
+        filterCounts={{ ...defaultFilterCounts, stale: 2 }}
+      />
+    );
+    expect(screen.getByTestId('filter-pill-stale')).toBeInTheDocument();
+  });
+
+  it('calls onStatusFilterChange when a pill is clicked', async () => {
+    const onStatusFilterChange = vi.fn();
+    const user = userEvent.setup();
+    render(
+      <RunFilterBar {...defaultProps} onStatusFilterChange={onStatusFilterChange} />
+    );
+    await user.click(screen.getByTestId('filter-pill-failed'));
+    expect(onStatusFilterChange).toHaveBeenCalledWith('failed');
+  });
+
+  it('marks active filter pill with aria-pressed', () => {
+    render(<RunFilterBar {...defaultProps} statusFilter="completed" />);
+    expect(screen.getByTestId('filter-pill-completed')).toHaveAttribute('aria-pressed', 'true');
+    expect(screen.getByTestId('filter-pill-all')).toHaveAttribute('aria-pressed', 'false');
+  });
+
+  it('renders the sort toggle button', () => {
+    render(<RunFilterBar {...defaultProps} />);
+    expect(screen.getByTestId('sort-toggle')).toBeInTheDocument();
+  });
+
+  it('displays "By Status" when sortMode is status', () => {
+    render(<RunFilterBar {...defaultProps} sortMode="status" />);
+    expect(screen.getByTestId('sort-toggle')).toHaveTextContent('By Status');
+  });
+
+  it('displays "By Activity" when sortMode is activity', () => {
+    render(<RunFilterBar {...defaultProps} sortMode="activity" />);
+    expect(screen.getByTestId('sort-toggle')).toHaveTextContent('By Activity');
+  });
+
+  it('calls onSortModeToggle when sort button is clicked', async () => {
+    const onSortModeToggle = vi.fn();
+    const user = userEvent.setup();
+    render(<RunFilterBar {...defaultProps} onSortModeToggle={onSortModeToggle} />);
+    await user.click(screen.getByTestId('sort-toggle'));
+    expect(onSortModeToggle).toHaveBeenCalledTimes(1);
+  });
+
+  it('displays the project count', () => {
+    render(<RunFilterBar {...defaultProps} filteredProjectCount={7} />);
+    expect(screen.getByTestId('project-count')).toHaveTextContent('7 projects');
+  });
+
+  it('uses singular "project" when count is 1', () => {
+    render(<RunFilterBar {...defaultProps} filteredProjectCount={1} />);
+    expect(screen.getByTestId('project-count')).toHaveTextContent('1 project');
+    expect(screen.getByTestId('project-count')).not.toHaveTextContent('projects');
+  });
+
+  it('displays filter counts in badges', () => {
+    render(<RunFilterBar {...defaultProps} />);
+    // The "All" pill should show count of 20
+    expect(screen.getByTestId('filter-pill-all')).toHaveTextContent('20');
+    expect(screen.getByTestId('filter-pill-failed')).toHaveTextContent('3');
+  });
+});

package/src/components/dashboard/__tests__/run-list.test.tsx

@@ -0,0 +1,123 @@
+import { render, screen } from '@/test/test-utils';
+import { vi } from 'vitest';
+import { RunList } from '../run-list';
+import { createMockRun, resetIdCounter } from '@/test/fixtures';
+import userEvent from '@testing-library/user-event';
+
+// Mock next/link
+vi.mock('next/link', () => ({
+  __esModule: true,
+  default: ({ href, children }: { href: string; children: React.ReactNode }) => (
+    <a href={href} data-testid="next-link">
+      {children}
+    </a>
+  ),
+}));
+
+// Mock ProjectSection to avoid hook side effects
+vi.mock('../project-section', () => ({
+  ProjectSection: ({ projectName }: { projectName: string }) => (
+    <div data-testid={`project-section-${projectName}`}>{projectName}</div>
+  ),
+}));
+
+beforeEach(() => {
+  resetIdCounter();
+});
+
+describe('RunList', () => {
+  it('renders an empty state when there are no runs', () => {
+    render(<RunList runs={[]} />);
+    expect(screen.getByText('No runs found')).toBeInTheDocument();
+  });
+
+  it('renders a list of RunCards for each run', () => {
+    const runs = [
+      createMockRun({ runId: 'run-1', processId: 'process-alpha' }),
+      createMockRun({ runId: 'run-2', processId: 'process-beta' }),
+    ];
+    render(<RunList runs={runs} />);
+    expect(screen.getByText('Process Alpha')).toBeInTheDocument();
+    expect(screen.getByText('Process Beta')).toBeInTheDocument();
+  });
+
+  it('marks the selected run card', () => {
+    const runs = [
+      createMockRun({ runId: 'run-1' }),
+      createMockRun({ runId: 'run-2' }),
+    ];
+    const { container } = render(<RunList runs={runs} selectedIndex={0} />);
+    // The first card should have a ring-1 class (selected)
+    const cards = container.querySelectorAll('.ring-1');
+    expect(cards.length).toBeGreaterThanOrEqual(1);
+  });
+
+  it('paginates runs and shows "Show more" button', () => {
+    // Create 12 runs (default page size is 10)
+    const runs = Array.from({ length: 12 }, (_, i) =>
+      createMockRun({ runId: `run-${i}`, processId: `process-${i}` })
+    );
+    render(<RunList runs={runs} />);
+    // First page shows 10 items
+    const links = screen.getAllByTestId('next-link');
+    expect(links).toHaveLength(10);
+    // "Show more" button exists with remaining count
+    expect(screen.getByText(/Show more \(2 remaining\)/)).toBeInTheDocument();
+  });
+
+  it('loads more runs when "Show more" is clicked', async () => {
+    const user = userEvent.setup();
+    const runs = Array.from({ length: 12 }, (_, i) =>
+      createMockRun({ runId: `run-${i}`, processId: `process-${i}` })
+    );
+    render(<RunList runs={runs} />);
+
+    const showMoreBtn = screen.getByText(/Show more/);
+    await user.click(showMoreBtn);
+
+    // After clicking, all 12 runs should be visible
+    const links = screen.getAllByTestId('next-link');
+    expect(links).toHaveLength(12);
+  });
+
+  it('does not show "Show more" when all runs fit on one page', () => {
+    const runs = Array.from({ length: 5 }, (_, i) =>
+      createMockRun({ runId: `run-${i}` })
+    );
+    render(<RunList runs={runs} />);
+    expect(screen.queryByText(/Show more/)).not.toBeInTheDocument();
+  });
+
+  describe('groupByProject mode', () => {
+    it('renders ProjectSection components grouped by project name', () => {
+      const runs = [
+        createMockRun({ runId: 'run-1', projectName: 'alpha-project' }),
+        createMockRun({ runId: 'run-2', projectName: 'beta-project' }),
+        createMockRun({ runId: 'run-3', projectName: 'alpha-project' }),
+      ];
+      render(<RunList runs={runs} groupByProject />);
+      expect(screen.getByTestId('project-section-alpha-project')).toBeInTheDocument();
+      expect(screen.getByTestId('project-section-beta-project')).toBeInTheDocument();
+    });
+
+    it('groups runs without a project under "Unknown Project"', () => {
+      // createMockRun defaults projectName to 'my-project', so we must explicitly set it empty
+      const run = createMockRun({ runId: 'run-1' });
+      // Override projectName to undefined after creation
+      (run as any).projectName = undefined;
+      render(<RunList runs={[run]} groupByProject />);
+      expect(screen.getByTestId('project-section-Unknown Project')).toBeInTheDocument();
+    });
+
+    it('sorts project groups alphabetically', () => {
+      const runs = [
+        createMockRun({ runId: 'run-1', projectName: 'zebra' }),
+        createMockRun({ runId: 'run-2', projectName: 'alpha' }),
+      ];
+      render(<RunList runs={runs} groupByProject />);
+      const sections = screen.getAllByTestId(/project-section-/);
+      expect(sections[0]).toHaveTextContent('alpha');
+      expect(sections[1]).toHaveTextContent('zebra');
+    });
+  });
+});

package/src/components/dashboard/__tests__/search-filter.test.tsx

@@ -0,0 +1,150 @@
+import { render, screen } from '@/test/test-utils';
+import { vi } from 'vitest';
+import { SearchFilter } from '../search-filter';
+import userEvent from '@testing-library/user-event';
+
+describe('SearchFilter', () => {
+  const defaultProps = {
+    search: '',
+    onSearchChange: vi.fn(),
+    statusFilter: 'all' as const,
+    onStatusFilterChange: vi.fn(),
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders the search input with placeholder', () => {
+    render(<SearchFilter {...defaultProps} />);
+    expect(screen.getByPlaceholderText('Search runs...')).toBeInTheDocument();
+  });
+
+  it('displays the current search value', () => {
+    render(<SearchFilter {...defaultProps} search="my query" />);
+    expect(screen.getByPlaceholderText('Search runs...')).toHaveValue('my query');
+  });
+
+  it('calls onSearchChange when typing in the search input', async () => {
+    const onSearchChange = vi.fn();
+    const user = userEvent.setup();
+    render(<SearchFilter {...defaultProps} onSearchChange={onSearchChange} />);
+
+    const input = screen.getByPlaceholderText('Search runs...');
+    await user.type(input, 'test');
+
+    // Called once per character; the component receives change events with cumulative value
+    // but because it's a controlled input with value from props (empty string),
+    // each keystroke triggers onChange with just that character appended to the controlled value.
+    // Since search prop stays '' (controlled), each call receives just the new char.
+    expect(onSearchChange).toHaveBeenCalledTimes(4);
+    // Verify it was called with each character
+    expect(onSearchChange).toHaveBeenNthCalledWith(1, 't');
+    expect(onSearchChange).toHaveBeenNthCalledWith(2, 'e');
+    expect(onSearchChange).toHaveBeenNthCalledWith(3, 's');
+    expect(onSearchChange).toHaveBeenNthCalledWith(4, 't');
+  });
+
+  it('renders all status filter buttons', () => {
+    render(<SearchFilter {...defaultProps} />);
+    expect(screen.getByText('All')).toBeInTheDocument();
+    expect(screen.getByText('Running')).toBeInTheDocument();
+    expect(screen.getByText('Completed')).toBeInTheDocument();
+    expect(screen.getByText('Failed')).toBeInTheDocument();
+  });
+
+  it('highlights the active status filter', () => {
+    render(<SearchFilter {...defaultProps} statusFilter="completed" />);
+    const completedBtn = screen.getByText('Completed');
+    // Active filter has bg-primary/15 class
+    expect(completedBtn.className).toContain('text-primary');
+  });
+
+  it('calls onStatusFilterChange when clicking a filter button', async () => {
+    const onStatusFilterChange = vi.fn();
+    const user = userEvent.setup();
+    render(
+      <SearchFilter
+        {...defaultProps}
+        onStatusFilterChange={onStatusFilterChange}
+      />
+    );
+
+    await user.click(screen.getByText('Failed'));
+    expect(onStatusFilterChange).toHaveBeenCalledWith('failed');
+  });
+
+  it('calls onStatusFilterChange with "all" when clicking All button', async () => {
+    const onStatusFilterChange = vi.fn();
+    const user = userEvent.setup();
+    render(
+      <SearchFilter
+        {...defaultProps}
+        statusFilter="completed"
+        onStatusFilterChange={onStatusFilterChange}
+      />
+    );
+
+    await user.click(screen.getByText('All'));
+    expect(onStatusFilterChange).toHaveBeenCalledWith('all');
+  });
+
+  it('calls onStatusFilterChange with "waiting" when clicking Running', async () => {
+    const onStatusFilterChange = vi.fn();
+    const user = userEvent.setup();
+    render(
+      <SearchFilter
+        {...defaultProps}
+        onStatusFilterChange={onStatusFilterChange}
+      />
+    );
+
+    await user.click(screen.getByText('Running'));
+    expect(onStatusFilterChange).toHaveBeenCalledWith('waiting');
+  });
+
+  it('does not show Group button when onGroupByProjectChange is not provided', () => {
+    render(<SearchFilter {...defaultProps} />);
+    expect(screen.queryByText('Group')).not.toBeInTheDocument();
+  });
+
+  it('shows Group button when onGroupByProjectChange is provided', () => {
+    render(
+      <SearchFilter
+        {...defaultProps}
+        onGroupByProjectChange={vi.fn()}
+      />
+    );
+    expect(screen.getByText('Group')).toBeInTheDocument();
+  });
+
+  it('calls onGroupByProjectChange with toggled value when Group is clicked', async () => {
+    const onGroupByProjectChange = vi.fn();
+    const user = userEvent.setup();
+    render(
+      <SearchFilter
+        {...defaultProps}
+        groupByProject={false}
+        onGroupByProjectChange={onGroupByProjectChange}
+      />
+    );
+
+    await user.click(screen.getByText('Group'));
+    expect(onGroupByProjectChange).toHaveBeenCalledWith(true);
+  });
+
+  it('toggles Group button off when groupByProject is true', async () => {
+    const onGroupByProjectChange = vi.fn();
+    const user = userEvent.setup();
+    render(
+      <SearchFilter
+        {...defaultProps}
+        groupByProject={true}
+        onGroupByProjectChange={onGroupByProjectChange}
+      />
+    );
+
+    await user.click(screen.getByText('Group'));
+    expect(onGroupByProjectChange).toHaveBeenCalledWith(false);
+  });
+});

package/src/components/dashboard/__tests__/virtualized-run-list.test.tsx

@@ -0,0 +1,179 @@
+import { render, screen } from '@/test/test-utils';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import { VirtualizedRunList } from '../virtualized-run-list';
+import { RunCard } from '../run-card';
+import { createMockRun, resetIdCounter } from '@/test/fixtures';
+import type { Run } from '@/types';
+
+// Mock next/link to render a plain anchor
+vi.mock('next/link', () => ({
+  __esModule: true,
+  default: ({ href, children }: { href: string; children: React.ReactNode }) => (
+    <a href={href} data-testid="next-link">
+      {children}
+    </a>
+  ),
+}));
+
+beforeEach(() => {
+  resetIdCounter();
+});
+
+describe('VirtualizedRunList', () => {
+  describe('flat rendering (below virtualization threshold)', () => {
+    it('renders all run cards for a small list', () => {
+      const runs = Array.from({ length: 5 }, (_, i) =>
+        createMockRun({ runId: `run-${i}`, processId: `process-${i}` })
+      );
+      render(<VirtualizedRunList runs={runs} />);
+      expect(screen.getByTestId('run-list-flat')).toBeInTheDocument();
+      const links = screen.getAllByTestId('next-link');
+      expect(links).toHaveLength(5);
+    });
+
+    it('renders empty list without crashing', () => {
+      const { container } = render(<VirtualizedRunList runs={[]} />);
+      expect(container.querySelector('[data-testid="run-list-flat"]')).toBeInTheDocument();
+    });
+
+    it('uses runId as key for stable ordering', () => {
+      const runs = [
+        createMockRun({ runId: 'run-b', processId: 'beta' }),
+        createMockRun({ runId: 'run-a', processId: 'alpha' }),
+      ];
+      render(<VirtualizedRunList runs={runs} />);
+      // Both should render in the given order (not re-sorted)
+      const links = screen.getAllByTestId('next-link');
+      expect(links[0]).toHaveAttribute('href', '/runs/run-b');
+      expect(links[1]).toHaveAttribute('href', '/runs/run-a');
+    });
+
+    it('accepts a custom renderItem function', () => {
+      const runs = [
+        createMockRun({ runId: 'run-custom-1', processId: 'custom' }),
+      ];
+      render(
+        <VirtualizedRunList
+          runs={runs}
+          renderItem={(run) => (
+            <div data-testid="custom-item">{run.runId}</div>
+          )}
+        />
+      );
+      expect(screen.getByTestId('custom-item')).toHaveTextContent('run-custom-1');
+    });
+  });
+
+  describe('virtualized rendering (above threshold)', () => {
+    it('renders the virtualized container for large lists', () => {
+      const runs = Array.from({ length: 20 }, (_, i) =>
+        createMockRun({ runId: `run-${i}`, processId: `process-${i}` })
+      );
+      render(<VirtualizedRunList runs={runs} maxHeight={300} />);
+      expect(screen.getByTestId('run-list-virtualized')).toBeInTheDocument();
+    });
+
+    it('uses a virtual container with total height for all items', () => {
+      const runs = Array.from({ length: 50 }, (_, i) =>
+        createMockRun({ runId: `run-${i}`, processId: `process-${i}` })
+      );
+      render(<VirtualizedRunList runs={runs} maxHeight={300} />);
+      const scrollContainer = screen.getByTestId('run-list-virtualized');
+      // The inner container should have a height reflecting the total virtual size
+      // (50 items * ~140px estimated height = ~7000px), proving items are virtualized
+      // rather than rendered in a flat DOM list.
+      const innerDiv = scrollContainer.firstElementChild as HTMLElement;
+      expect(innerDiv).toBeTruthy();
+      const totalHeight = parseInt(innerDiv.style.height, 10);
+      // 50 items * 140px estimated = 7000px
+      expect(totalHeight).toBeGreaterThanOrEqual(5000);
+      // jsdom doesn't support layout so virtualizer may not render actual items,
+      // but the container structure proves virtualization is active.
+      // In a real browser, only visible + overscan items would be rendered.
+    });
+
+    it('applies maxHeight to the scroll container', () => {
+      const runs = Array.from({ length: 20 }, (_, i) =>
+        createMockRun({ runId: `run-${i}`, processId: `process-${i}` })
+      );
+      render(<VirtualizedRunList runs={runs} maxHeight={400} />);
+      const container = screen.getByTestId('run-list-virtualized');
+      expect(container.style.maxHeight).toBe('400px');
+    });
+  });
+
+  describe('stable sort keys', () => {
+    it('maintains order when runs are updated without ID changes', () => {
+      const runsV1 = [
+        createMockRun({ runId: 'run-1', processId: 'alpha', completedTasks: 1 }),
+        createMockRun({ runId: 'run-2', processId: 'beta', completedTasks: 2 }),
+        createMockRun({ runId: 'run-3', processId: 'gamma', completedTasks: 3 }),
+      ];
+      const { rerender } = render(<VirtualizedRunList runs={runsV1} />);
+
+      // Update completedTasks but keep same runIds and order
+      const runsV2 = [
+        createMockRun({ runId: 'run-1', processId: 'alpha', completedTasks: 5 }),
+        createMockRun({ runId: 'run-2', processId: 'beta', completedTasks: 6 }),
+        createMockRun({ runId: 'run-3', processId: 'gamma', completedTasks: 7 }),
+      ];
+      rerender(<VirtualizedRunList runs={runsV2} />);
+
+      const links = screen.getAllByTestId('next-link');
+      expect(links[0]).toHaveAttribute('href', '/runs/run-1');
+      expect(links[1]).toHaveAttribute('href', '/runs/run-2');
+      expect(links[2]).toHaveAttribute('href', '/runs/run-3');
+    });
+
+    it('handles new runs being prepended', () => {
+      const initialRuns = [
+        createMockRun({ runId: 'run-2', processId: 'beta' }),
+        createMockRun({ runId: 'run-3', processId: 'gamma' }),
+      ];
+      const { rerender } = render(<VirtualizedRunList runs={initialRuns} />);
+
+      // Prepend a new run
+      const updatedRuns = [
+        createMockRun({ runId: 'run-1', processId: 'alpha' }),
+        createMockRun({ runId: 'run-2', processId: 'beta' }),
+        createMockRun({ runId: 'run-3', processId: 'gamma' }),
+      ];
+      rerender(<VirtualizedRunList runs={updatedRuns} />);
+
+      const links = screen.getAllByTestId('next-link');
+      expect(links).toHaveLength(3);
+      expect(links[0]).toHaveAttribute('href', '/runs/run-1');
+    });
+  });
+});
+
+describe('RunCard React.memo', () => {
+  it('is wrapped in React.memo (has $$typeof or compare function)', () => {
+    // React.memo components have a `type` property and `compare` property
+    // We check that RunCard is a memo component by verifying its internal structure
+    expect(RunCard).toBeDefined();
+    // React.memo wraps the component — the $$typeof for memo is Symbol(react.memo)
+    // In the test environment we can check the component's type
+    expect((RunCard as any).$$typeof).toBeDefined();
+  });
+
+  it('skips re-render when props are equal', () => {
+    const renderSpy = vi.fn();
+    vi.fn(({ run, selected: _selected }: { run: Run; selected?: boolean }) => {
+      renderSpy();
+      return <div data-testid="spy-card">{run.runId}</div>;
+    });
+
+    // We test the memo behavior indirectly: the actual RunCard uses memo,
+    // but we can verify the comparator function exists
+    const run = createMockRun({ runId: 'test-memo' });
+    const { rerender } = render(<RunCard run={run} />);
+
+    // Re-render with same props (same reference)
+    rerender(<RunCard run={run} />);
+
+    // The component should still be in the DOM
+    const links = screen.getAllByTestId('next-link');
+    expect(links.length).toBeGreaterThan(0);
+  });
+});