feat(dashboard): Add dedicated tabs for Tasks, Quality Gates, and Metrics

.gitignore

@@ -39,6 +39,7 @@ ENV/
 # Testing
 .pytest_cache/
 .coverage
+coverage.xml
 htmlcov/
 .hypothesis/
 artifacts/

tests/e2e/test_dashboard.spec.ts

@@ -121,17 +121,21 @@ test.describe('Dashboard - Sprint 10 Features', () => {
     await agentPanel.waitFor({ state: 'visible', timeout: 10000 });
     await expect(agentPanel).toBeVisible();
 
-    // Verify Overview tab panels exist (these are in the default 'overview' tab)
-    const overviewPanels = [
-      'review-findings-panel',
-      'metrics-panel'
-    ];
-
-    for (const panelId of overviewPanels) {
-      const panel = page.locator(`[data-testid="${panelId}"]`);
-      await panel.scrollIntoViewIfNeeded().catch(() => {});
-      await expect(panel).toBeAttached();
-    }
+    // Navigate to Tasks tab and verify review-findings-panel (Sprint 10 Refactor)
+    const tasksTab = page.locator('[data-testid="tasks-tab"]');
+    await tasksTab.waitFor({ state: 'visible', timeout: 10000 });
+    await tasksTab.click();
+    const reviewPanel = page.locator('[data-testid="review-findings-panel"]');
+    await reviewPanel.waitFor({ state: 'attached', timeout: 10000 });
+    await expect(reviewPanel).toBeAttached();
+
+    // Navigate to Metrics tab and verify metrics-panel (Sprint 10 Refactor)
+    const metricsTab = page.locator('[data-testid="metrics-tab"]');
+    await metricsTab.waitFor({ state: 'visible', timeout: 10000 });
+    await metricsTab.click();
+    const metricsPanel = page.locator('[data-testid="metrics-panel"]');
+    await metricsPanel.waitFor({ state: 'attached', timeout: 10000 });
+    await expect(metricsPanel).toBeAttached();
 
     // Verify Checkpoints tab panel exists by clicking the tab first
     // (React conditionally renders tab panels, so we must activate the tab)
@@ -145,7 +149,11 @@ test.describe('Dashboard - Sprint 10 Features', () => {
   });
 
   test('should display review findings panel', async () => {
-    // Navigate to or expand review findings section
+    // Navigate to Tasks tab where review findings panel now lives (Sprint 10 Refactor)
+    const tasksTab = page.locator('[data-testid="tasks-tab"]');
+    await tasksTab.waitFor({ state: 'visible', timeout: 10000 });
+    await tasksTab.click();
+
     const reviewPanel = page.locator('[data-testid="review-findings-panel"]');
 
     // Wait for panel to exist in DOM
@@ -154,18 +162,6 @@ test.describe('Dashboard - Sprint 10 Features', () => {
     // Scroll into view
     await reviewPanel.scrollIntoViewIfNeeded().catch(() => {});
 
-    // Make panel visible if it's in a tab or collapsed
-    if (!(await reviewPanel.isVisible())) {
-      // Review panel is in the Overview tab
-      const overviewTab = page.locator('[data-testid="overview-tab"]');
-      await overviewTab.waitFor({ state: 'visible', timeout: 10000 }).catch(() => {});
-      if (await overviewTab.isVisible()) {
-        await overviewTab.click();
-        // Wait for panel to become visible after tab switch
-        await reviewPanel.waitFor({ state: 'visible', timeout: 5000 }).catch(() => {});
-      }
-    }
-
     await reviewPanel.waitFor({ state: 'visible', timeout: 10000 });
     await expect(reviewPanel).toBeVisible();
 
@@ -181,27 +177,16 @@ test.describe('Dashboard - Sprint 10 Features', () => {
   });
 
   test('should display quality gates panel', async () => {
-    // Navigate to quality gates section
+    // Navigate to Quality Gates tab (Sprint 10 Refactor)
+    const qualityGatesTab = page.locator('[data-testid="quality-gates-tab"]');
+    await qualityGatesTab.waitFor({ state: 'visible', timeout: 10000 });
+    await qualityGatesTab.click();
+
     const qualityGatesPanel = page.locator('[data-testid="quality-gates-panel"]');
 
     // Wait for panel to exist
     await qualityGatesPanel.waitFor({ state: 'attached', timeout: 15000 });
 
-    // Scroll into view
-    await qualityGatesPanel.scrollIntoViewIfNeeded().catch(() => {});
-
-    // Make panel visible if needed
-    if (!(await qualityGatesPanel.isVisible())) {
-      // Quality gates panel is in the Overview tab
-      const overviewTab = page.locator('[data-testid="overview-tab"]');
-      await overviewTab.waitFor({ state: 'visible', timeout: 10000 }).catch(() => {});
-      if (await overviewTab.isVisible()) {
-        await overviewTab.click();
-        // Wait for panel to become visible after tab switch
-        await qualityGatesPanel.waitFor({ state: 'visible', timeout: 5000 }).catch(() => {});
-      }
-    }
-
     await qualityGatesPanel.waitFor({ state: 'visible', timeout: 10000 });
     await expect(qualityGatesPanel).toBeVisible();
 
@@ -239,12 +224,12 @@ test.describe('Dashboard - Sprint 10 Features', () => {
   });
 
   test('should display metrics and cost tracking panel', async () => {
-    // Metrics panel is in the Overview tab (which is the default active tab)
-    // No tab navigation needed - just scroll to it
-    const metricsPanel = page.locator('[data-testid="metrics-panel"]');
+    // Navigate to Metrics tab (Sprint 10 Refactor)
+    const metricsTab = page.locator('[data-testid="metrics-tab"]');
+    await metricsTab.waitFor({ state: 'visible', timeout: 10000 });
+    await metricsTab.click();
 
-    // Scroll panel into view
-    await metricsPanel.scrollIntoViewIfNeeded().catch(() => {});
+    const metricsPanel = page.locator('[data-testid="metrics-panel"]');
 
     // Wait for panel to be visible
     await metricsPanel.waitFor({ state: 'visible', timeout: 15000 });
@@ -345,6 +330,11 @@ test.describe('Dashboard - Sprint 10 Features', () => {
   });
 
   test('should display task progress and statistics', async () => {
+    // Navigate to Tasks tab where task statistics now live (Sprint 10 Refactor)
+    const tasksTab = page.locator('[data-testid="tasks-tab"]');
+    await tasksTab.waitFor({ state: 'visible', timeout: 10000 });
+    await tasksTab.click();
+
     // Check for task statistics
     const stats = ['total-tasks', 'completed-tasks', 'blocked-tasks', 'in-progress-tasks'];
 

tests/e2e/test_metrics_ui.spec.ts

@@ -32,10 +32,13 @@ test.describe('Metrics Dashboard UI', () => {
     // Wait for dashboard to render - agent panel is one of the last to render
     await page.locator('[data-testid="agent-status-panel"]').waitFor({ state: 'attached', timeout: 10000 }).catch(() => {});
 
-    // Metrics panel is in the Overview tab (which is active by default)
-    // No tab navigation needed - just scroll to it and wait for it to be visible
+    // Navigate to Metrics tab (Sprint 10 Refactor - metrics now on dedicated tab)
+    const metricsTab = page.locator('[data-testid="metrics-tab"]');
+    await metricsTab.waitFor({ state: 'visible', timeout: 10000 });
+    await metricsTab.click();
+
+    // Wait for metrics panel to be visible
     const metricsPanel = page.locator('[data-testid="metrics-panel"]');
-    await metricsPanel.scrollIntoViewIfNeeded().catch(() => {});
     await metricsPanel.waitFor({ state: 'visible', timeout: 10000 }).catch(() => {});
 
     // Wait for metrics API to load

tests/e2e/test_review_ui.spec.ts

@@ -32,10 +32,17 @@ test.describe('Review Findings UI', () => {
     // Wait for dashboard to render - agent panel is last to render
     await page.locator('[data-testid="agent-status-panel"]').waitFor({ state: 'attached', timeout: 10000 }).catch(() => {});
 
-    // Review panel is visible on Overview tab (no separate review tab exists)
+    // Navigate to Tasks tab where review findings now live (Sprint 10 Refactor)
+    const tasksTab = page.locator('[data-testid="tasks-tab"]');
+    await tasksTab.waitFor({ state: 'visible', timeout: 10000 });
+    await tasksTab.click();
+
+    // Wait for review findings panel to be visible
+    await page.locator('[data-testid="review-findings-panel"]').waitFor({ state: 'attached', timeout: 10000 }).catch(() => {});
   });
 
   test('should display review findings panel', async ({ page }) => {
+    // Already on Tasks tab from beforeEach (Sprint 10 Refactor)
     const reviewPanel = page.locator('[data-testid="review-findings-panel"]');
 
     // Wait for panel to exist and be visible
@@ -44,17 +51,6 @@ test.describe('Review Findings UI', () => {
     // Scroll panel into view
     await reviewPanel.scrollIntoViewIfNeeded().catch(() => {});
 
-    // If not visible, panel might be in a different tab or section
-    if (!(await reviewPanel.isVisible())) {
-      // Try clicking overview tab if it exists
-      const overviewTab = page.getByRole('tab', { name: 'Overview' });
-      if (await overviewTab.isVisible()) {
-        await overviewTab.click();
-        // Wait for review panel to become visible after tab switch
-        await reviewPanel.waitFor({ state: 'visible', timeout: 5000 }).catch(() => {});
-      }
-    }
-
     await reviewPanel.waitFor({ state: 'visible', timeout: 10000 });
     await expect(reviewPanel).toBeVisible();
 

web-ui/__tests__/components/Dashboard.test.tsx

@@ -544,6 +544,10 @@ describe('Dashboard with AgentStateProvider', () => {
         expect(screen.getByText(/Test Project/i)).toBeInTheDocument();
       });
 
+      // Navigate to Tasks tab where BlockerPanel now lives (Sprint 10 Refactor)
+      const tasksTab = screen.getByTestId('tasks-tab');
+      fireEvent.click(tasksTab);
+
       // Then wait for blocker to appear
       await waitFor(
         () => {
@@ -570,6 +574,10 @@ describe('Dashboard with AgentStateProvider', () => {
         expect(screen.getByText(/Test Project/i)).toBeInTheDocument();
       });
 
+      // Navigate to Tasks tab where BlockerPanel now lives (Sprint 10 Refactor)
+      const tasksTab = screen.getByTestId('tasks-tab');
+      fireEvent.click(tasksTab);
+
       // Should show empty state
       await waitFor(() => {
         expect(screen.getByText(/No blockers - agents are running smoothly!/i)).toBeInTheDocument();
@@ -1034,6 +1042,10 @@ describe('Dashboard with AgentStateProvider', () => {
         expect(screen.getByText(/Test Project/i)).toBeInTheDocument();
       });
 
+      // Navigate to Quality Gates tab (Sprint 10 Refactor)
+      const qualityGatesTab = screen.getByTestId('quality-gates-tab');
+      fireEvent.click(qualityGatesTab);
+
       // Verify Quality Gates Panel is wrapped in error boundary
       // The panel should be present in normal operation
       const qualityGatesPanel = screen.getByTestId('quality-gates-panel');
@@ -1083,6 +1095,10 @@ describe('Dashboard with AgentStateProvider', () => {
         expect(screen.getByText(/Test Project/i)).toBeInTheDocument();
       });
 
+      // Navigate to Quality Gates tab (Sprint 10 Refactor)
+      const qualityGatesTab = screen.getByTestId('quality-gates-tab');
+      fireEvent.click(qualityGatesTab);
+
       // Verify Quality Gates Panel is shown by default
       const qualityGatesPanel = screen.getByTestId('quality-gates-panel');
       expect(qualityGatesPanel).toBeInTheDocument();