@a5c-ai/babysitter-observer-dashboard 1.0.0

package/src/components/dashboard/__tests__/catch-up-banner.test.tsx

@@ -0,0 +1,141 @@
+import { render, screen } from "@/test/test-utils";
+import { CatchUpBanner } from "../catch-up-banner";
+import type { CatchUpState } from "@/hooks/use-batched-updates";
+
+describe("CatchUpBanner", () => {
+  it("renders nothing when catch-up mode is inactive", () => {
+    const catchUp: CatchUpState = {
+      active: false,
+      bufferedCount: 0,
+      flush: vi.fn(),
+    };
+
+    const { container } = render(<CatchUpBanner catchUp={catchUp} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("renders the banner when catch-up mode is active", () => {
+    const catchUp: CatchUpState = {
+      active: true,
+      bufferedCount: 12,
+      flush: vi.fn(),
+    };
+
+    render(<CatchUpBanner catchUp={catchUp} />);
+
+    expect(screen.getByTestId("catch-up-banner")).toBeInTheDocument();
+    expect(screen.getByText("12")).toBeInTheDocument();
+    expect(screen.getByText(/runs updated while you were away/)).toBeInTheDocument();
+  });
+
+  it("shows the refresh button", () => {
+    const catchUp: CatchUpState = {
+      active: true,
+      bufferedCount: 5,
+      flush: vi.fn(),
+    };
+
+    render(<CatchUpBanner catchUp={catchUp} />);
+
+    expect(screen.getByTestId("catch-up-refresh-btn")).toBeInTheDocument();
+    expect(screen.getByText("Refresh now")).toBeInTheDocument();
+  });
+
+  it("calls flush when refresh button is clicked", async () => {
+    const flush = vi.fn();
+    const catchUp: CatchUpState = {
+      active: true,
+      bufferedCount: 8,
+      flush,
+    };
+
+    render(<CatchUpBanner catchUp={catchUp} />);
+
+    const button = screen.getByTestId("catch-up-refresh-btn");
+    button.click();
+
+    expect(flush).toHaveBeenCalledTimes(1);
+  });
+
+  it("displays the correct buffered count", () => {
+    const catchUp: CatchUpState = {
+      active: true,
+      bufferedCount: 42,
+      flush: vi.fn(),
+    };
+
+    render(<CatchUpBanner catchUp={catchUp} />);
+
+    expect(screen.getByText("42")).toBeInTheDocument();
+  });
+
+  it("shows summary context when summary prop is provided", () => {
+    const catchUp: CatchUpState = {
+      active: true,
+      bufferedCount: 15,
+      flush: vi.fn(),
+    };
+
+    render(
+      <CatchUpBanner
+        catchUp={catchUp}
+        summary={{ failedRuns: 2, completedRuns: 10, pendingBreakpoints: 1 }}
+      />
+    );
+
+    const summaryEl = screen.getByTestId("catch-up-summary");
+    expect(summaryEl).toBeInTheDocument();
+    expect(summaryEl).toHaveTextContent("2 failed");
+    expect(summaryEl).toHaveTextContent("1 awaiting input");
+    expect(summaryEl).toHaveTextContent("10 completed");
+  });
+
+  it("omits summary line when all summary counts are zero", () => {
+    const catchUp: CatchUpState = {
+      active: true,
+      bufferedCount: 5,
+      flush: vi.fn(),
+    };
+
+    render(
+      <CatchUpBanner
+        catchUp={catchUp}
+        summary={{ failedRuns: 0, completedRuns: 0, pendingBreakpoints: 0 }}
+      />
+    );
+
+    expect(screen.queryByTestId("catch-up-summary")).not.toBeInTheDocument();
+  });
+
+  it("omits summary line when summary prop is not provided", () => {
+    const catchUp: CatchUpState = {
+      active: true,
+      bufferedCount: 5,
+      flush: vi.fn(),
+    };
+
+    render(<CatchUpBanner catchUp={catchUp} />);
+
+    expect(screen.queryByTestId("catch-up-summary")).not.toBeInTheDocument();
+  });
+
+  it("shows only failed runs in summary when others are zero", () => {
+    const catchUp: CatchUpState = {
+      active: true,
+      bufferedCount: 3,
+      flush: vi.fn(),
+    };
+
+    render(
+      <CatchUpBanner
+        catchUp={catchUp}
+        summary={{ failedRuns: 4, completedRuns: 0, pendingBreakpoints: 0 }}
+      />
+    );
+
+    const summaryEl = screen.getByTestId("catch-up-summary");
+    expect(summaryEl).toHaveTextContent("4 failed");
+    expect(summaryEl).not.toHaveTextContent("completed");
+    expect(summaryEl).not.toHaveTextContent("awaiting");
+  });
+});

package/src/components/dashboard/__tests__/executive-summary-banner.test.tsx

@@ -0,0 +1,164 @@
+import { render, screen } from '@/test/test-utils';
+import { vi } from 'vitest';
+import userEvent from '@testing-library/user-event';
+import { ExecutiveSummaryBanner, type ExecutiveSummaryMetrics } from '../executive-summary-banner';
+
+function makeMetrics(overrides: Partial<ExecutiveSummaryMetrics> = {}): ExecutiveSummaryMetrics {
+  return {
+    totalProjects: 5,
+    activeRuns: 0,
+    failedRuns: 0,
+    completedRuns: 10,
+    staleRuns: 0,
+    pendingBreakpoints: 0,
+    ...overrides,
+  };
+}
+
+describe('ExecutiveSummaryBanner', () => {
+  it('renders with role="status" for accessibility', () => {
+    render(<ExecutiveSummaryBanner metrics={makeMetrics()} />);
+    expect(screen.getByRole('status')).toBeInTheDocument();
+  });
+
+  it('renders data-testid for querying', () => {
+    render(<ExecutiveSummaryBanner metrics={makeMetrics()} />);
+    expect(screen.getByTestId('executive-summary-banner')).toBeInTheDocument();
+  });
+
+  // --- Healthy state ---
+  it('shows all-healthy message when no issues exist', () => {
+    render(<ExecutiveSummaryBanner metrics={makeMetrics()} />);
+    expect(screen.getByText('All 5 projects healthy')).toBeInTheDocument();
+  });
+
+  it('includes active run count in healthy message when runs are active', () => {
+    render(<ExecutiveSummaryBanner metrics={makeMetrics({ activeRuns: 3 })} />);
+    expect(screen.getByText(/All 5 projects healthy/)).toBeInTheDocument();
+    expect(screen.getByText(/3 runs in progress/)).toBeInTheDocument();
+  });
+
+  it('uses singular "project" for single project', () => {
+    render(<ExecutiveSummaryBanner metrics={makeMetrics({ totalProjects: 1 })} />);
+    expect(screen.getByText('All 1 project healthy')).toBeInTheDocument();
+  });
+
+  it('uses singular "run" for single active run', () => {
+    render(<ExecutiveSummaryBanner metrics={makeMetrics({ activeRuns: 1 })} />);
+    expect(screen.getByText(/1 run in progress/)).toBeInTheDocument();
+  });
+
+  // --- Failure state (red) ---
+  it('shows failure message when runs are failing', () => {
+    render(<ExecutiveSummaryBanner metrics={makeMetrics({ failedRuns: 2 })} />);
+    expect(screen.getByText(/2 runs failing/)).toBeInTheDocument();
+  });
+
+  it('uses singular "run" for single failure', () => {
+    render(<ExecutiveSummaryBanner metrics={makeMetrics({ failedRuns: 1 })} />);
+    expect(screen.getByText(/1 run failing/)).toBeInTheDocument();
+  });
+
+  it('applies error styling for failures', () => {
+    render(<ExecutiveSummaryBanner metrics={makeMetrics({ failedRuns: 1 })} />);
+    const banner = screen.getByTestId('executive-summary-banner');
+    expect(banner.className).toMatch(/border-error/);
+  });
+
+  // --- Amber state (pending approvals) ---
+  it('shows pending approval message', () => {
+    render(<ExecutiveSummaryBanner metrics={makeMetrics({ pendingBreakpoints: 2 })} />);
+    expect(screen.getByText(/2 approvals need your attention/)).toBeInTheDocument();
+  });
+
+  it('uses singular for single approval', () => {
+    render(<ExecutiveSummaryBanner metrics={makeMetrics({ pendingBreakpoints: 1 })} />);
+    expect(screen.getByText(/1 approval needs your attention/)).toBeInTheDocument();
+  });
+
+  it('applies warning styling for pending approvals', () => {
+    render(<ExecutiveSummaryBanner metrics={makeMetrics({ pendingBreakpoints: 1 })} />);
+    const banner = screen.getByTestId('executive-summary-banner');
+    expect(banner.className).toMatch(/border-warning/);
+  });
+
+  // --- Stale state (amber) ---
+  it('shows stale run message', () => {
+    render(<ExecutiveSummaryBanner metrics={makeMetrics({ staleRuns: 3 })} />);
+    expect(screen.getByText(/3 stale runs/)).toBeInTheDocument();
+  });
+
+  // --- Combined states ---
+  it('combines failures and approvals', () => {
+    render(
+      <ExecutiveSummaryBanner
+        metrics={makeMetrics({ failedRuns: 1, pendingBreakpoints: 2 })}
+      />
+    );
+    expect(screen.getByText(/1 run failing/)).toBeInTheDocument();
+    expect(screen.getByText(/2 approvals need your attention/)).toBeInTheDocument();
+  });
+
+  it('applies error styling when both failures and approvals exist', () => {
+    render(
+      <ExecutiveSummaryBanner
+        metrics={makeMetrics({ failedRuns: 1, pendingBreakpoints: 2 })}
+      />
+    );
+    const banner = screen.getByTestId('executive-summary-banner');
+    expect(banner.className).toMatch(/border-error/);
+  });
+
+  it('applies success styling when all healthy', () => {
+    render(<ExecutiveSummaryBanner metrics={makeMetrics()} />);
+    const banner = screen.getByTestId('executive-summary-banner');
+    expect(banner.className).toMatch(/border-success/);
+  });
+
+  // --- Dismissed state ---
+  it('returns null when dismissed is true', () => {
+    const { container } = render(
+      <ExecutiveSummaryBanner metrics={makeMetrics({ failedRuns: 1 })} dismissed={true} />
+    );
+    expect(container.innerHTML).toBe('');
+    expect(screen.queryByTestId('executive-summary-banner')).not.toBeInTheDocument();
+  });
+
+  it('renders normally when dismissed is false', () => {
+    render(
+      <ExecutiveSummaryBanner metrics={makeMetrics({ failedRuns: 1 })} dismissed={false} />
+    );
+    expect(screen.getByTestId('executive-summary-banner')).toBeInTheDocument();
+  });
+
+  // --- onDismiss callback ---
+  it('fires onDismiss callback when X button is clicked', async () => {
+    const user = userEvent.setup();
+    const onDismiss = vi.fn();
+    render(
+      <ExecutiveSummaryBanner
+        metrics={makeMetrics({ failedRuns: 1 })}
+        onDismiss={onDismiss}
+      />
+    );
+
+    const dismissBtn = screen.getByTestId('executive-summary-dismiss');
+    await user.click(dismissBtn);
+
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not show dismiss button when onDismiss is not provided', () => {
+    render(
+      <ExecutiveSummaryBanner metrics={makeMetrics({ failedRuns: 1 })} />
+    );
+    expect(screen.queryByTestId('executive-summary-dismiss')).not.toBeInTheDocument();
+  });
+
+  it('does not show dismiss button in healthy state even if onDismiss is provided', () => {
+    render(
+      <ExecutiveSummaryBanner metrics={makeMetrics()} onDismiss={vi.fn()} />
+    );
+    expect(screen.queryByTestId('executive-summary-dismiss')).not.toBeInTheDocument();
+  });
+});

package/src/components/dashboard/__tests__/kpi-grid.test.tsx

@@ -0,0 +1,101 @@
+import { render, screen } from '@/test/test-utils';
+import { vi } from 'vitest';
+import { KpiGrid } from '../kpi-grid';
+import userEvent from '@testing-library/user-event';
+import type { DashboardMetrics } from '@/hooks/use-run-dashboard';
+
+const baseMetrics: DashboardMetrics = {
+  totalRuns: 20,
+  activeRuns: 5,
+  completedRuns: 12,
+  failedRuns: 3,
+  staleRuns: 0,
+  totalTasks: 100,
+  completedTasks: 80,
+};
+
+describe('KpiGrid', () => {
+  it('renders all four metric tiles without stale', () => {
+    render(
+      <KpiGrid
+        metrics={baseMetrics}
+        statusFilter="all"
+        hasStaleRuns={false}
+        onToggleFilter={vi.fn()}
+      />
+    );
+    expect(screen.getByTestId('metric-tile-total-runs')).toBeInTheDocument();
+    expect(screen.getByTestId('metric-tile-active')).toBeInTheDocument();
+    expect(screen.getByTestId('metric-tile-completed')).toBeInTheDocument();
+    expect(screen.getByTestId('metric-tile-failed')).toBeInTheDocument();
+    expect(screen.queryByTestId('metric-tile-stale')).not.toBeInTheDocument();
+  });
+
+  it('renders stale tile when hasStaleRuns is true', () => {
+    render(
+      <KpiGrid
+        metrics={{ ...baseMetrics, staleRuns: 2 }}
+        statusFilter="all"
+        hasStaleRuns={true}
+        onToggleFilter={vi.fn()}
+      />
+    );
+    expect(screen.getByTestId('metric-tile-stale')).toBeInTheDocument();
+  });
+
+  it('displays correct metric values', () => {
+    render(
+      <KpiGrid
+        metrics={baseMetrics}
+        statusFilter="all"
+        hasStaleRuns={false}
+        onToggleFilter={vi.fn()}
+      />
+    );
+    expect(screen.getByTestId('metric-tile-total-runs')).toHaveTextContent('20');
+    expect(screen.getByTestId('metric-tile-active')).toHaveTextContent('5');
+    expect(screen.getByTestId('metric-tile-completed')).toHaveTextContent('12');
+    expect(screen.getByTestId('metric-tile-failed')).toHaveTextContent('3');
+  });
+
+  it('calls onToggleFilter when a tile is clicked', async () => {
+    const onToggle = vi.fn();
+    const user = userEvent.setup();
+    render(
+      <KpiGrid
+        metrics={baseMetrics}
+        statusFilter="all"
+        hasStaleRuns={false}
+        onToggleFilter={onToggle}
+      />
+    );
+
+    await user.click(screen.getByTestId('metric-tile-failed'));
+    expect(onToggle).toHaveBeenCalledWith('failed');
+  });
+
+  it('marks active tile with aria-pressed true', () => {
+    render(
+      <KpiGrid
+        metrics={baseMetrics}
+        statusFilter="waiting"
+        hasStaleRuns={false}
+        onToggleFilter={vi.fn()}
+      />
+    );
+    expect(screen.getByTestId('metric-tile-active')).toHaveAttribute('aria-pressed', 'true');
+    expect(screen.getByTestId('metric-tile-total-runs')).toHaveAttribute('aria-pressed', 'false');
+  });
+
+  it('renders the kpi-grid container with aria-label', () => {
+    render(
+      <KpiGrid
+        metrics={baseMetrics}
+        statusFilter="all"
+        hasStaleRuns={false}
+        onToggleFilter={vi.fn()}
+      />
+    );
+    expect(screen.getByTestId('kpi-grid')).toHaveAttribute('aria-label', 'Key metrics');
+  });
+});

package/src/components/dashboard/__tests__/pagination-controls.test.tsx

@@ -0,0 +1,125 @@
+import { render, screen } from '@/test/test-utils';
+import { vi } from 'vitest';
+import { PaginationControls } from '../pagination-controls';
+import userEvent from '@testing-library/user-event';
+
+describe('PaginationControls', () => {
+  const defaultProps = {
+    currentPage: 0,
+    totalItems: 25,
+    itemsPerPage: 10,
+    onPageChange: vi.fn(),
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders nothing when totalItems is 0', () => {
+    const { container } = render(
+      <PaginationControls {...defaultProps} totalItems={0} />
+    );
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('displays the item range text', () => {
+    render(<PaginationControls {...defaultProps} currentPage={0} />);
+    // Rendered as "1-10 of 25" (with en-dash or hyphen)
+    // The range text span contains startItem, endItem, and totalItems
+    const rangeText = screen.getByText(/of 25/);
+    expect(rangeText).toBeInTheDocument();
+    expect(rangeText).toHaveTextContent('1');
+    expect(rangeText).toHaveTextContent('10');
+  });
+
+  it('displays correct range on second page', () => {
+    render(<PaginationControls {...defaultProps} currentPage={1} />);
+    expect(screen.getByText(/11/)).toBeInTheDocument();
+  });
+
+  it('caps the end item at totalItems on the last page', () => {
+    render(
+      <PaginationControls {...defaultProps} currentPage={2} totalItems={25} itemsPerPage={10} />
+    );
+    // Page 3 (index 2): items 21-25
+    expect(screen.getByText(/25/)).toBeInTheDocument();
+  });
+
+  it('displays the current page number (1-indexed)', () => {
+    render(<PaginationControls {...defaultProps} currentPage={1} />);
+    // Should show "2" as the current page indicator
+    expect(screen.getByText('2')).toBeInTheDocument();
+  });
+
+  it('disables the previous button on the first page', () => {
+    render(<PaginationControls {...defaultProps} currentPage={0} />);
+    const prevBtn = screen.getByLabelText('Previous page');
+    expect(prevBtn).toBeDisabled();
+  });
+
+  it('enables the previous button when not on the first page', () => {
+    render(<PaginationControls {...defaultProps} currentPage={1} />);
+    const prevBtn = screen.getByLabelText('Previous page');
+    expect(prevBtn).not.toBeDisabled();
+  });
+
+  it('disables the next button on the last page', () => {
+    // totalItems=25, itemsPerPage=10 => 3 pages (0,1,2), last page is index 2
+    render(<PaginationControls {...defaultProps} currentPage={2} />);
+    const nextBtn = screen.getByLabelText('Next page');
+    expect(nextBtn).toBeDisabled();
+  });
+
+  it('enables the next button when not on the last page', () => {
+    render(<PaginationControls {...defaultProps} currentPage={0} />);
+    const nextBtn = screen.getByLabelText('Next page');
+    expect(nextBtn).not.toBeDisabled();
+  });
+
+  it('calls onPageChange with previous page when clicking prev', async () => {
+    const onPageChange = vi.fn();
+    const user = userEvent.setup();
+    render(
+      <PaginationControls {...defaultProps} currentPage={1} onPageChange={onPageChange} />
+    );
+
+    await user.click(screen.getByLabelText('Previous page'));
+    expect(onPageChange).toHaveBeenCalledWith(0);
+  });
+
+  it('calls onPageChange with next page when clicking next', async () => {
+    const onPageChange = vi.fn();
+    const user = userEvent.setup();
+    render(
+      <PaginationControls {...defaultProps} currentPage={0} onPageChange={onPageChange} />
+    );
+
+    await user.click(screen.getByLabelText('Next page'));
+    expect(onPageChange).toHaveBeenCalledWith(1);
+  });
+
+  it('handles single page of items (both buttons disabled)', () => {
+    render(
+      <PaginationControls
+        {...defaultProps}
+        currentPage={0}
+        totalItems={5}
+        itemsPerPage={10}
+      />
+    );
+    expect(screen.getByLabelText('Previous page')).toBeDisabled();
+    expect(screen.getByLabelText('Next page')).toBeDisabled();
+  });
+
+  it('shows page 1 for a single page', () => {
+    render(
+      <PaginationControls
+        {...defaultProps}
+        currentPage={0}
+        totalItems={5}
+        itemsPerPage={10}
+      />
+    );
+    expect(screen.getByText('1')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,97 @@
+import { render, screen } from '@/test/test-utils';
+import { vi } from 'vitest';
+import { ProjectAccordion } from '../project-accordion';
+import { createMockProjectSummary, resetIdCounter } from '@/test/fixtures';
+import userEvent from '@testing-library/user-event';
+
+// Mock ProjectSection to avoid hook side effects (useProjectRuns calls useSmartPolling)
+vi.mock('../project-section', () => ({
+  ProjectSection: ({ projectName, enabled }: { projectName: string; enabled?: boolean }) => (
+    <div data-testid={`project-section-${projectName}`} data-enabled={String(enabled ?? true)}>
+      Section: {projectName}
+    </div>
+  ),
+}));
+
+// Mock ProjectSectionHeader to simplify testing
+vi.mock('../project-section-header', () => ({
+  ProjectSectionHeader: ({
+    projectName,
+    activeRuns,
+    totalRuns,
+  }: {
+    projectName: string;
+    activeRuns: number;
+    totalRuns: number;
+  }) => (
+    <div data-testid={`header-${projectName}`}>
+      {projectName} ({activeRuns} active, {totalRuns} total)
+    </div>
+  ),
+}));
+
+beforeEach(() => {
+  resetIdCounter();
+});
+
+describe('ProjectAccordion', () => {
+  it('renders "No projects found" when projects list is empty', () => {
+    render(<ProjectAccordion projects={[]} />);
+    expect(screen.getByText('No projects found')).toBeInTheDocument();
+  });
+
+  it('renders project section headers for each project', () => {
+    const projects = [
+      createMockProjectSummary({ projectName: 'project-a', activeRuns: 1 }),
+      createMockProjectSummary({ projectName: 'project-b', activeRuns: 0 }),
+    ];
+    render(<ProjectAccordion projects={projects} />);
+    expect(screen.getByTestId('header-project-a')).toBeInTheDocument();
+    expect(screen.getByTestId('header-project-b')).toBeInTheDocument();
+  });
+
+  it('renders header text with active runs and total runs', () => {
+    const projects = [
+      createMockProjectSummary({ projectName: 'alpha', activeRuns: 3, totalRuns: 10 }),
+    ];
+    render(<ProjectAccordion projects={projects} />);
+    expect(screen.getByText('alpha (3 active, 10 total)')).toBeInTheDocument();
+  });
+
+  it('auto-expands projects with active runs by default', () => {
+    const projects = [
+      createMockProjectSummary({ projectName: 'active-project', activeRuns: 2 }),
+      createMockProjectSummary({ projectName: 'idle-project', activeRuns: 0 }),
+    ];
+    render(<ProjectAccordion projects={projects} />);
+    // The active project section should be visible since it's expanded
+    expect(screen.getByTestId('project-section-active-project')).toBeInTheDocument();
+  });
+
+  it('can expand a collapsed project by clicking its trigger', async () => {
+    const user = userEvent.setup();
+    const projects = [
+      createMockProjectSummary({ projectName: 'idle-project', activeRuns: 0 }),
+    ];
+    render(<ProjectAccordion projects={projects} />);
+
+    // Click the trigger to expand
+    const trigger = screen.getByTestId('header-idle-project');
+    await user.click(trigger);
+
+    // Now the section should become visible
+    expect(screen.getByTestId('project-section-idle-project')).toBeInTheDocument();
+  });
+
+  it('renders multiple projects', () => {
+    const projects = [
+      createMockProjectSummary({ projectName: 'project-1' }),
+      createMockProjectSummary({ projectName: 'project-2' }),
+      createMockProjectSummary({ projectName: 'project-3' }),
+    ];
+    render(<ProjectAccordion projects={projects} />);
+    expect(screen.getByTestId('header-project-1')).toBeInTheDocument();
+    expect(screen.getByTestId('header-project-2')).toBeInTheDocument();
+    expect(screen.getByTestId('header-project-3')).toBeInTheDocument();
+  });
+});