@a5c-ai/babysitter-observer-dashboard 1.0.0

package/src/components/dashboard/__tests__/project-list-view.test.tsx

@@ -0,0 +1,174 @@
+import { render, screen } from '@/test/test-utils';
+import { vi } from 'vitest';
+import { ProjectListView } from '../project-list-view';
+import { createMockProjectSummary } from '@/test/fixtures';
+import type { ProjectSummary } from '@/types';
+
+// Mock ProjectHealthCard to keep tests focused on ProjectListView logic
+vi.mock('../project-health-card', () => ({
+  ProjectHealthCard: ({ project }: { project: ProjectSummary }) => (
+    <div data-testid={`project-card-${project.projectName}`}>{project.projectName}</div>
+  ),
+}));
+
+describe('ProjectListView', () => {
+  const defaultProps = {
+    loading: false,
+    error: undefined,
+    filteredProjects: [] as ProjectSummary[],
+    activeProjects: [] as ProjectSummary[],
+    historyProjects: [] as ProjectSummary[],
+    statusFilter: 'all' as const,
+    sortMode: 'status' as const,
+    cardStatusFilter: 'all' as const,
+    historyCollapsed: false,
+    onHistoryCollapsedChange: vi.fn(),
+    onHideProject: vi.fn(),
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders loading skeleton when loading', () => {
+    const { container } = render(
+      <ProjectListView {...defaultProps} loading={true} />
+    );
+    const pulsingElements = container.querySelectorAll('.animate-pulse');
+    expect(pulsingElements.length).toBeGreaterThan(0);
+  });
+
+  it('renders error banner when error is set', () => {
+    render(
+      <ProjectListView {...defaultProps} error="Server error" />
+    );
+    expect(screen.getByTestId('error-banner')).toHaveTextContent('Failed to load projects: Server error');
+  });
+
+  it('renders empty state when no projects match filter', () => {
+    render(
+      <ProjectListView {...defaultProps} filteredProjects={[]} />
+    );
+    expect(screen.getByTestId('empty-state')).toBeInTheDocument();
+    expect(screen.getByText('No projects found')).toBeInTheDocument();
+  });
+
+  it('renders idle empty state when no active and no history', () => {
+    const projects = [createMockProjectSummary()];
+    render(
+      <ProjectListView
+        {...defaultProps}
+        filteredProjects={projects}
+        activeProjects={[]}
+        historyProjects={[]}
+      />
+    );
+    expect(screen.getByTestId('idle-empty-state')).toBeInTheDocument();
+  });
+
+  it('renders idle-with-history banner when no active but has history', () => {
+    const projects = [createMockProjectSummary()];
+    render(
+      <ProjectListView
+        {...defaultProps}
+        filteredProjects={projects}
+        activeProjects={[]}
+        historyProjects={projects}
+        statusFilter="all"
+      />
+    );
+    expect(screen.getByTestId('idle-with-history-banner')).toBeInTheDocument();
+  });
+
+  it('renders active runs section with project cards', () => {
+    const projects = [
+      createMockProjectSummary({ projectName: 'alpha' }),
+      createMockProjectSummary({ projectName: 'beta' }),
+    ];
+    render(
+      <ProjectListView
+        {...defaultProps}
+        filteredProjects={projects}
+        activeProjects={projects}
+        statusFilter="all"
+      />
+    );
+    expect(screen.getByTestId('active-runs-section')).toBeInTheDocument();
+    expect(screen.getByTestId('project-card-alpha')).toBeInTheDocument();
+    expect(screen.getByTestId('project-card-beta')).toBeInTheDocument();
+  });
+
+  it('renders filtered grid for completed filter', () => {
+    const projects = [createMockProjectSummary({ projectName: 'gamma' })];
+    render(
+      <ProjectListView
+        {...defaultProps}
+        filteredProjects={projects}
+        statusFilter="completed"
+      />
+    );
+    expect(screen.getByTestId('project-grid-filtered')).toBeInTheDocument();
+    expect(screen.getByTestId('project-card-gamma')).toBeInTheDocument();
+  });
+
+  it('renders history section when historyProjects exist', () => {
+    const activeP = [createMockProjectSummary({ projectName: 'active1' })];
+    const historyP = [createMockProjectSummary({ projectName: 'history1' })];
+    render(
+      <ProjectListView
+        {...defaultProps}
+        filteredProjects={[...activeP, ...historyP]}
+        activeProjects={activeP}
+        historyProjects={historyP}
+        statusFilter="all"
+        historyCollapsed={false}
+      />
+    );
+    expect(screen.getByTestId('recent-history-section')).toBeInTheDocument();
+    expect(screen.getByTestId('project-grid-history')).toBeInTheDocument();
+    expect(screen.getByTestId('project-card-history1')).toBeInTheDocument();
+  });
+
+  it('hides history grid when historyCollapsed is true', () => {
+    const historyP = [createMockProjectSummary({ projectName: 'history1' })];
+    render(
+      <ProjectListView
+        {...defaultProps}
+        filteredProjects={historyP}
+        historyProjects={historyP}
+        statusFilter="all"
+        historyCollapsed={true}
+      />
+    );
+    expect(screen.getByTestId('recent-history-section')).toBeInTheDocument();
+    expect(screen.queryByTestId('project-grid-history')).not.toBeInTheDocument();
+  });
+
+  it('shows "In Progress" header in status sort mode', () => {
+    const projects = [createMockProjectSummary({ projectName: 'proj1' })];
+    render(
+      <ProjectListView
+        {...defaultProps}
+        filteredProjects={projects}
+        activeProjects={projects}
+        sortMode="status"
+        statusFilter="all"
+      />
+    );
+    expect(screen.getByText('In Progress')).toBeInTheDocument();
+  });
+
+  it('shows "Recent Activity" header in activity sort mode', () => {
+    const projects = [createMockProjectSummary({ projectName: 'proj1' })];
+    render(
+      <ProjectListView
+        {...defaultProps}
+        filteredProjects={projects}
+        activeProjects={projects}
+        sortMode="activity"
+        statusFilter="all"
+      />
+    );
+    expect(screen.getByText('Recent Activity')).toBeInTheDocument();
+  });
+});

package/src/components/dashboard/__tests__/project-search-input.test.tsx

@@ -0,0 +1,110 @@
+import { render, screen, act } from '@/test/test-utils';
+import { vi } from 'vitest';
+import { ProjectSearchInput } from '../project-search-input';
+import userEvent from '@testing-library/user-event';
+
+describe('ProjectSearchInput', () => {
+  beforeEach(() => {
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('renders with default placeholder', () => {
+    render(<ProjectSearchInput onSearch={vi.fn()} />);
+    expect(screen.getByPlaceholderText('Filter runs...')).toBeInTheDocument();
+  });
+
+  it('renders with a custom placeholder', () => {
+    render(<ProjectSearchInput onSearch={vi.fn()} placeholder="Search here..." />);
+    expect(screen.getByPlaceholderText('Search here...')).toBeInTheDocument();
+  });
+
+  it('calls onSearch after debounce delay when typing', async () => {
+    const onSearch = vi.fn();
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+    render(<ProjectSearchInput onSearch={onSearch} debounceMs={300} />);
+
+    const input = screen.getByPlaceholderText('Filter runs...');
+    await user.type(input, 'hello');
+
+    // Should not have called yet with "hello" (debounced)
+    // But will have been called with intermediate values as timers advance
+    // After all timers settle, it should have the final value
+    act(() => {
+      vi.advanceTimersByTime(300);
+    });
+
+    expect(onSearch).toHaveBeenLastCalledWith('hello');
+  });
+
+  it('debounces rapid typing', async () => {
+    const onSearch = vi.fn();
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+    render(<ProjectSearchInput onSearch={onSearch} debounceMs={500} />);
+
+    const input = screen.getByPlaceholderText('Filter runs...');
+    await user.type(input, 'abc');
+
+    // Clear all calls so far
+    onSearch.mockClear();
+
+    // Advance to trigger the final debounced call
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+
+    // Should have called with the final value
+    expect(onSearch).toHaveBeenCalledWith('abc');
+  });
+
+  it('calls onSearch with empty string initially after debounce', () => {
+    const onSearch = vi.fn();
+    render(<ProjectSearchInput onSearch={onSearch} debounceMs={300} />);
+
+    // Initial render triggers useEffect with empty value
+    act(() => {
+      vi.advanceTimersByTime(300);
+    });
+
+    expect(onSearch).toHaveBeenCalledWith('');
+  });
+
+  it('updates the input value as the user types', async () => {
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+    render(<ProjectSearchInput onSearch={vi.fn()} />);
+
+    const input = screen.getByPlaceholderText('Filter runs...');
+    await user.type(input, 'test');
+
+    expect(input).toHaveValue('test');
+  });
+
+  it('uses custom debounceMs', async () => {
+    const onSearch = vi.fn();
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+    render(<ProjectSearchInput onSearch={onSearch} debounceMs={100} />);
+
+    const input = screen.getByPlaceholderText('Filter runs...');
+    await user.type(input, 'x');
+
+    onSearch.mockClear();
+
+    // Advance less than debounce
+    act(() => {
+      vi.advanceTimersByTime(50);
+    });
+
+    // Not called yet with the last character value change
+    const _callsAfter50 = onSearch.mock.calls.length;
+
+    // Advance past debounce
+    act(() => {
+      vi.advanceTimersByTime(100);
+    });
+
+    expect(onSearch).toHaveBeenCalledWith('x');
+  });
+});

package/src/components/dashboard/__tests__/project-section-header.test.tsx

@@ -0,0 +1,91 @@
+import { render, screen } from '@/test/test-utils';
+import { ProjectSectionHeader } from '../project-section-header';
+
+describe('ProjectSectionHeader', () => {
+  const defaultProps = {
+    projectName: 'my-project',
+    activeRuns: 2,
+    completedRuns: 5,
+    failedRuns: 1,
+    totalRuns: 8,
+  };
+
+  it('renders the project name', () => {
+    render(<ProjectSectionHeader {...defaultProps} />);
+    expect(screen.getByText('my-project')).toBeInTheDocument();
+  });
+
+  it('shows active runs badge when activeRuns > 0', () => {
+    render(<ProjectSectionHeader {...defaultProps} activeRuns={3} />);
+    expect(screen.getByText('3 active')).toBeInTheDocument();
+  });
+
+  it('does not show active runs badge when activeRuns is 0', () => {
+    render(<ProjectSectionHeader {...defaultProps} activeRuns={0} />);
+    expect(screen.queryByText(/active/)).not.toBeInTheDocument();
+  });
+
+  it('shows completed runs badge when completedRuns > 0', () => {
+    render(<ProjectSectionHeader {...defaultProps} completedRuns={7} />);
+    expect(screen.getByText('7 completed')).toBeInTheDocument();
+  });
+
+  it('does not show completed runs badge when completedRuns is 0', () => {
+    render(<ProjectSectionHeader {...defaultProps} completedRuns={0} />);
+    expect(screen.queryByText(/completed/)).not.toBeInTheDocument();
+  });
+
+  it('shows failed runs badge when failedRuns > 0', () => {
+    render(<ProjectSectionHeader {...defaultProps} failedRuns={3} />);
+    expect(screen.getByText('3 failed')).toBeInTheDocument();
+  });
+
+  it('does not show failed runs badge when failedRuns is 0', () => {
+    render(<ProjectSectionHeader {...defaultProps} failedRuns={0} />);
+    expect(screen.queryByText(/failed/)).not.toBeInTheDocument();
+  });
+
+  it('shows total runs count with plural "runs"', () => {
+    render(<ProjectSectionHeader {...defaultProps} totalRuns={10} />);
+    expect(screen.getByText(/10 runs/)).toBeInTheDocument();
+  });
+
+  it('shows singular "run" for totalRuns === 1', () => {
+    render(<ProjectSectionHeader {...defaultProps} totalRuns={1} />);
+    expect(screen.getByText(/1 run(?!s)/)).toBeInTheDocument();
+  });
+
+  it('renders without latestUpdate', () => {
+    render(<ProjectSectionHeader {...defaultProps} />);
+    // Should render without errors; the total runs text should be there
+    expect(screen.getByText(/8 runs/)).toBeInTheDocument();
+  });
+
+  it('displays relative time when latestUpdate is provided', () => {
+    // Use a recent timestamp
+    const recent = new Date(Date.now() - 30000).toISOString(); // 30 seconds ago
+    render(<ProjectSectionHeader {...defaultProps} latestUpdate={recent} />);
+    // Should show something like "30s ago"
+    expect(screen.getByText(/ago/)).toBeInTheDocument();
+  });
+
+  it('shows "just now" for future timestamps', () => {
+    const future = new Date(Date.now() + 60000).toISOString();
+    render(<ProjectSectionHeader {...defaultProps} latestUpdate={future} />);
+    expect(screen.getByText(/just now/)).toBeInTheDocument();
+  });
+
+  it('hides all badges when counts are 0', () => {
+    render(
+      <ProjectSectionHeader
+        {...defaultProps}
+        activeRuns={0}
+        completedRuns={0}
+        failedRuns={0}
+      />
+    );
+    expect(screen.queryByText(/active/)).not.toBeInTheDocument();
+    expect(screen.queryByText(/completed/)).not.toBeInTheDocument();
+    expect(screen.queryByText(/failed/)).not.toBeInTheDocument();
+  });
+});

package/src/components/dashboard/__tests__/project-section.test.tsx

@@ -0,0 +1,151 @@
+import { render, screen } from '@/test/test-utils';
+import { vi } from 'vitest';
+import { ProjectSection } from '../project-section';
+import { createMockRun, resetIdCounter } from '@/test/fixtures';
+import type { Run } from '@/types';
+
+// Mock useProjectRuns hook
+const mockUseProjectRuns = vi.fn();
+vi.mock('@/hooks/use-project-runs', () => ({
+  useProjectRuns: (...args: any[]) => mockUseProjectRuns(...args),
+}));
+
+// 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>
+  ),
+}));
+
+beforeEach(() => {
+  resetIdCounter();
+  vi.clearAllMocks();
+});
+
+function setupMockHook(runs: Run[], totalCount: number, loading = false) {
+  mockUseProjectRuns.mockReturnValue({
+    runs,
+    totalCount,
+    loading,
+    error: null,
+    refresh: vi.fn(),
+  });
+}
+
+describe('ProjectSection', () => {
+  it('renders RunCards for fetched runs', () => {
+    const runs = [
+      createMockRun({ runId: 'run-1', processId: 'alpha-process' }),
+      createMockRun({ runId: 'run-2', processId: 'beta-process' }),
+    ];
+    setupMockHook(runs, 2);
+
+    render(<ProjectSection projectName="test-project" runs={[]} />);
+    expect(screen.getByText('Alpha Process')).toBeInTheDocument();
+    expect(screen.getByText('Beta Process')).toBeInTheDocument();
+  });
+
+  it('shows loading spinner when loading with no runs', () => {
+    setupMockHook([], 0, true);
+
+    const { container } = render(
+      <ProjectSection projectName="test-project" runs={[]} />
+    );
+    // The loading spinner uses animate-spin class
+    const spinner = container.querySelector('.animate-spin');
+    expect(spinner).toBeInTheDocument();
+  });
+
+  it('shows "No runs found" when not loading and no runs', () => {
+    setupMockHook([], 0, false);
+
+    render(<ProjectSection projectName="test-project" runs={[]} />);
+    expect(screen.getByText('No runs found')).toBeInTheDocument();
+  });
+
+  it('renders the search input', () => {
+    setupMockHook([], 0, false);
+
+    render(<ProjectSection projectName="test-project" runs={[]} />);
+    expect(
+      screen.getByPlaceholderText('Search by run ID, process, task, or error...')
+    ).toBeInTheDocument();
+  });
+
+  it('renders pagination controls when there are items', () => {
+    const runs = [createMockRun({ runId: 'run-1' })];
+    setupMockHook(runs, 15);
+
+    render(<ProjectSection projectName="test-project" runs={[]} />);
+    // PaginationControls renders range text
+    expect(screen.getByText(/of 15/)).toBeInTheDocument();
+  });
+
+  it('passes enabled=true by default to useProjectRuns', () => {
+    setupMockHook([], 0, false);
+
+    render(<ProjectSection projectName="test-project" runs={[]} />);
+    expect(mockUseProjectRuns).toHaveBeenCalledWith(
+      'test-project',
+      expect.objectContaining({ enabled: true })
+    );
+  });
+
+  it('passes enabled=false when prop is false', () => {
+    setupMockHook([], 0, false);
+
+    render(
+      <ProjectSection projectName="test-project" runs={[]} enabled={false} />
+    );
+    expect(mockUseProjectRuns).toHaveBeenCalledWith(
+      'test-project',
+      expect.objectContaining({ enabled: false })
+    );
+  });
+
+  it('passes statusFilter to useProjectRuns', () => {
+    setupMockHook([], 0, false);
+
+    render(
+      <ProjectSection
+        projectName="test-project"
+        runs={[]}
+        statusFilter="completed"
+      />
+    );
+    expect(mockUseProjectRuns).toHaveBeenCalledWith(
+      'test-project',
+      expect.objectContaining({ status: 'completed' })
+    );
+  });
+
+  it('does not pass status when statusFilter is "all"', () => {
+    setupMockHook([], 0, false);
+
+    render(
+      <ProjectSection
+        projectName="test-project"
+        runs={[]}
+        statusFilter="all"
+      />
+    );
+    expect(mockUseProjectRuns).toHaveBeenCalledWith(
+      'test-project',
+      expect.objectContaining({ status: undefined })
+    );
+  });
+
+  it('does not render pagination when totalCount is 0', () => {
+    setupMockHook([], 0, false);
+
+    const { container: _container } = render(
+      <ProjectSection projectName="test-project" runs={[]} />
+    );
+    // PaginationControls returns null when totalItems is 0
+    expect(screen.queryByLabelText('Previous page')).not.toBeInTheDocument();
+    expect(screen.queryByLabelText('Next page')).not.toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,164 @@
+import { render, screen } from '@/test/test-utils';
+import { vi } from 'vitest';
+import { RunCard } from '../run-card';
+import {
+  createMockRun,
+  createMockTaskEffect,
+  resetIdCounter,
+} from '@/test/fixtures';
+
+// 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('RunCard', () => {
+  it('renders the friendly process name', () => {
+    const run = createMockRun({ processId: 'data-pipeline/ingest' });
+    render(<RunCard run={run} />);
+    expect(screen.getByText('Data Pipeline Ingest')).toBeInTheDocument();
+  });
+
+  it('renders a status badge for the run status', () => {
+    const run = createMockRun({ status: 'completed' });
+    render(<RunCard run={run} />);
+    expect(screen.getByText('Completed')).toBeInTheDocument();
+  });
+
+  it('renders the task count', () => {
+    const run = createMockRun({ completedTasks: 2, totalTasks: 5 });
+    render(<RunCard run={run} />);
+    expect(screen.getByText('2/5 tasks')).toBeInTheDocument();
+  });
+
+  it('renders formatted duration', () => {
+    const run = createMockRun({ duration: 59000 });
+    render(<RunCard run={run} />);
+    expect(screen.getByText('59s')).toBeInTheDocument();
+  });
+
+  it('links to the run detail page', () => {
+    const run = createMockRun({ runId: 'run-abc-123' });
+    render(<RunCard run={run} />);
+    const link = screen.getByTestId('next-link');
+    expect(link).toHaveAttribute('href', '/runs/run-abc-123');
+  });
+
+  it('shows the project name tag when present', () => {
+    const run = createMockRun({ projectName: 'my-project' });
+    render(<RunCard run={run} />);
+    expect(screen.getByText('my-project')).toBeInTheDocument();
+  });
+
+  it('does not show source label', () => {
+    const run = createMockRun({ projectName: 'my-project', sourceLabel: 'cli' });
+    render(<RunCard run={run} />);
+    expect(screen.queryByText('cli')).not.toBeInTheDocument();
+  });
+
+  it('shows a progress bar when there are tasks', () => {
+    const run = createMockRun({ totalTasks: 5, completedTasks: 3 });
+    render(<RunCard run={run} />);
+    // The progress bar renders a div with style width
+    const progressBar = document.querySelector('[style*="width"]');
+    expect(progressBar).toBeInTheDocument();
+  });
+
+  it('does not show a progress bar when totalTasks is 0', () => {
+    const run = createMockRun({ totalTasks: 0, tasks: [] });
+    render(<RunCard run={run} />);
+    const progressBar = document.querySelector('[style*="width"]');
+    expect(progressBar).toBeNull();
+  });
+
+  it('shows 100% progress for completed runs', () => {
+    const run = createMockRun({ status: 'completed', totalTasks: 5, completedTasks: 3 });
+    render(<RunCard run={run} />);
+    const progressBar = document.querySelector('[style*="width"]') as HTMLElement;
+    expect(progressBar?.style.width).toBe('100%');
+  });
+
+  it('displays the failed step text for failed runs', () => {
+    const run = createMockRun({
+      status: 'failed',
+      failedStep: 'process-data step',
+    });
+    render(<RunCard run={run} />);
+    expect(screen.getByText(/Failed at: process-data step/)).toBeInTheDocument();
+  });
+
+  it('truncates long failed step text to 80 chars', () => {
+    const longStep = 'a'.repeat(100);
+    const run = createMockRun({
+      status: 'failed',
+      failedStep: longStep,
+    });
+    render(<RunCard run={run} />);
+    expect(screen.getByText(/Failed at:/)).toHaveTextContent(
+      `Failed at: ${'a'.repeat(80)}...`
+    );
+  });
+
+  it('shows breakpoint question when a pending breakpoint exists', () => {
+    const breakpointTask = createMockTaskEffect({
+      kind: 'breakpoint',
+      status: 'requested',
+      breakpointQuestion: 'Approve deployment?',
+    });
+    const run = createMockRun({
+      status: 'waiting',
+      tasks: [breakpointTask],
+    });
+    render(<RunCard run={run} />);
+    expect(screen.getByText('Approve deployment?')).toBeInTheDocument();
+  });
+
+  it('prefers run-level breakpointQuestion over task-level', () => {
+    const breakpointTask = createMockTaskEffect({
+      kind: 'breakpoint',
+      status: 'requested',
+      breakpointQuestion: 'Task-level question?',
+    });
+    const run = createMockRun({
+      status: 'waiting',
+      tasks: [breakpointTask],
+      breakpointQuestion: 'Run-level question?',
+    });
+    render(<RunCard run={run} />);
+    expect(screen.getByText('Run-level question?')).toBeInTheDocument();
+  });
+
+  it('applies selected styling when selected prop is true', () => {
+    const run = createMockRun();
+    const { container } = render(<RunCard run={run} selected />);
+    const card = container.querySelector('.ring-1');
+    expect(card).toBeInTheDocument();
+  });
+
+  it('renders with waiting status indicator', () => {
+    const run = createMockRun({ status: 'waiting' });
+    render(<RunCard run={run} />);
+    expect(screen.getByText('Waiting')).toBeInTheDocument();
+  });
+
+  it('renders with failed status indicator', () => {
+    const run = createMockRun({ status: 'failed' });
+    render(<RunCard run={run} />);
+    expect(screen.getByText('Failed')).toBeInTheDocument();
+  });
+
+  it('renders with pending status indicator', () => {
+    const run = createMockRun({ status: 'pending' });
+    render(<RunCard run={run} />);
+    expect(screen.getByText('Pending')).toBeInTheDocument();
+  });
+});