feat(web-ui): pipeline progress indicator (Think→Build→Prove→Ship)

web-ui/__mocks__/@hugeicons/react.js

@@ -37,6 +37,8 @@ module.exports = {
   SentIcon: createIconMock('SentIcon'),
   // AppSidebar
   Home01Icon: createIconMock('Home01Icon'),
+  // PipelineProgressBar
+  Tick01Icon: createIconMock('Tick01Icon'),
   // Task Board components
   PlayCircleIcon: createIconMock('PlayCircleIcon'),
   LinkCircleIcon: createIconMock('LinkCircleIcon'),

web-ui/src/__tests__/components/layout/PipelineProgressBar.test.tsx

@@ -0,0 +1,160 @@
+import { render, screen } from '@testing-library/react';
+import { usePathname } from 'next/navigation';
+import { PipelineProgressBar } from '@/components/layout/PipelineProgressBar';
+import { usePipelineStatus } from '@/hooks/usePipelineStatus';
+
+jest.mock('@/hooks/usePipelineStatus');
+jest.mock('next/navigation', () => ({
+  usePathname: jest.fn(),
+  useRouter: jest.fn(() => ({ push: jest.fn() })),
+}));
+
+const mockUsePipelineStatus = usePipelineStatus as jest.MockedFunction<typeof usePipelineStatus>;
+const mockUsePathname = usePathname as jest.MockedFunction<typeof usePathname>;
+
+const allIncomplete = {
+  think: { isComplete: false, isLoading: false, isError: false },
+  build: { isComplete: false, isLoading: false, isError: false },
+  prove: { isComplete: false, isLoading: false, isError: false },
+  ship: { isComplete: false, isLoading: false, isError: false },
+};
+
+const allComplete = {
+  think: { isComplete: true, isLoading: false, isError: false },
+  build: { isComplete: true, isLoading: false, isError: false },
+  prove: { isComplete: true, isLoading: false, isError: false },
+  ship: { isComplete: true, isLoading: false, isError: false },
+};
+
+describe('PipelineProgressBar', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders all four phase labels on desktop', () => {
+    mockUsePathname.mockReturnValue('/prd');
+    mockUsePipelineStatus.mockReturnValue(allIncomplete);
+
+    render(<PipelineProgressBar />);
+
+    expect(screen.getByText('Think')).toBeInTheDocument();
+    expect(screen.getByText('Build')).toBeInTheDocument();
+    expect(screen.getByText('Prove')).toBeInTheDocument();
+    expect(screen.getByText('Ship')).toBeInTheDocument();
+  });
+
+  it('returns null on root path /', () => {
+    mockUsePathname.mockReturnValue('/');
+    mockUsePipelineStatus.mockReturnValue(allIncomplete);
+
+    const { container } = render(<PipelineProgressBar />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('returns null on non-pipeline path (e.g. /settings)', () => {
+    mockUsePathname.mockReturnValue('/settings');
+    mockUsePipelineStatus.mockReturnValue(allIncomplete);
+
+    const { container } = render(<PipelineProgressBar />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('highlights the Think phase when on /prd with aria-current', () => {
+    mockUsePathname.mockReturnValue('/prd');
+    mockUsePipelineStatus.mockReturnValue(allIncomplete);
+
+    render(<PipelineProgressBar />);
+
+    const thinkLink = screen.getByRole('link', { name: /think/i });
+    expect(thinkLink).toHaveAttribute('href', '/prd');
+    expect(thinkLink).toHaveAttribute('aria-current', 'step');
+  });
+
+  it('highlights the Build phase when on /tasks', () => {
+    mockUsePathname.mockReturnValue('/tasks');
+    mockUsePipelineStatus.mockReturnValue(allIncomplete);
+
+    render(<PipelineProgressBar />);
+
+    const buildLink = screen.getByRole('link', { name: /build/i });
+    expect(buildLink).toHaveAttribute('href', '/tasks');
+    expect(buildLink).toHaveAttribute('aria-current', 'step');
+  });
+
+  it('highlights the Build phase when on /execution', () => {
+    mockUsePathname.mockReturnValue('/execution');
+    mockUsePipelineStatus.mockReturnValue(allIncomplete);
+
+    render(<PipelineProgressBar />);
+
+    const buildLink = screen.getByRole('link', { name: /build/i });
+    expect(buildLink).toHaveAttribute('href', '/tasks');
+    expect(buildLink).toHaveAttribute('aria-current', 'step');
+  });
+
+  it('highlights the Build phase when on /blockers', () => {
+    mockUsePathname.mockReturnValue('/blockers');
+    mockUsePipelineStatus.mockReturnValue(allIncomplete);
+
+    render(<PipelineProgressBar />);
+
+    const buildLink = screen.getByRole('link', { name: /build/i });
+    expect(buildLink).toHaveAttribute('href', '/tasks');
+    expect(buildLink).toHaveAttribute('aria-current', 'step');
+  });
+
+  it('highlights the Prove phase when on /proof', () => {
+    mockUsePathname.mockReturnValue('/proof');
+    mockUsePipelineStatus.mockReturnValue(allIncomplete);
+
+    render(<PipelineProgressBar />);
+
+    const proveLink = screen.getByRole('link', { name: /prove/i });
+    expect(proveLink).toHaveAttribute('href', '/proof');
+    expect(proveLink).toHaveAttribute('aria-current', 'step');
+  });
+
+  it('highlights the Ship phase when on /review', () => {
+    mockUsePathname.mockReturnValue('/review');
+    mockUsePipelineStatus.mockReturnValue(allIncomplete);
+
+    render(<PipelineProgressBar />);
+
+    const shipLink = screen.getByRole('link', { name: /ship/i });
+    expect(shipLink).toHaveAttribute('href', '/review');
+    expect(shipLink).toHaveAttribute('aria-current', 'step');
+  });
+
+  it('shows checkmark icon for completed phases', () => {
+    mockUsePathname.mockReturnValue('/tasks');
+    mockUsePipelineStatus.mockReturnValue({
+      ...allIncomplete,
+      think: { isComplete: true, isLoading: false, isError: false },
+    });
+
+    render(<PipelineProgressBar />);
+
+    expect(screen.getByTestId('icon-Tick01Icon')).toBeInTheDocument();
+  });
+
+  it('shows all checkmarks when all phases complete', () => {
+    mockUsePathname.mockReturnValue('/review');
+    mockUsePipelineStatus.mockReturnValue(allComplete);
+
+    render(<PipelineProgressBar />);
+
+    expect(screen.getAllByTestId('icon-Tick01Icon')).toHaveLength(4);
+  });
+
+  it('each phase link navigates to correct route', () => {
+    mockUsePathname.mockReturnValue('/prd');
+    mockUsePipelineStatus.mockReturnValue(allIncomplete);
+
+    render(<PipelineProgressBar />);
+
+    expect(screen.getByRole('link', { name: /think/i })).toHaveAttribute('href', '/prd');
+    expect(screen.getByRole('link', { name: /build/i })).toHaveAttribute('href', '/tasks');
+    expect(screen.getByRole('link', { name: /prove/i })).toHaveAttribute('href', '/proof');
+    expect(screen.getByRole('link', { name: /ship/i })).toHaveAttribute('href', '/review');
+  });
+});