Add data-testid attributes to Dashboard tabs for E2E testing

[frankbria]

Problem

E2E Playwright tests are failing because Dashboard tab buttons lack data-testid attributes. Tests expect to click tabs to navigate to different sections, but cannot locate them.

Current State

Dashboard has 2 tabs (Overview, Context) at web-ui/src/components/Dashboard.tsx:295-320:

• Overview tab (line 295): No data-testid
• Context tab (line 308): No data-testid

Expected Behavior

Tests expect the following data-testid values:

• checkpoint-tab - To navigate to checkpoint section
• metrics-tab - To navigate to metrics section

Issue

Current design has only 2 tabs (Overview/Context), but tests expect separate tabs for each feature section (Checkpoints, Metrics). All feature panels (Checkpoints, Metrics, Quality Gates) are currently stacked on the Overview tab.

Impact

Blocks 11/12 failed E2E tests:

• 8 checkpoint UI tests (test_checkpoint_ui.spec.ts)
• 3 metrics UI tests (test_metrics_ui.spec.ts)

Solution Options

Option A: Add data-testid to existing tabs (Quick - 5 minutes)

// Line 295
<button
  data-testid="overview-tab"
  role="tab"
  ...
>
  Overview
</button>

// Line 308
<button
  data-testid="context-tab"
  role="tab"
  ...
>
  Context
</button>

Then update tests to use overview-tab instead of checkpoint-tab and metrics-tab.

Option B: Add separate tabs for features (Recommended - 1-2 hours)

Create dedicated tabs:

• Overview (existing)
• Checkpoints (new - contains CheckpointList)
• Metrics (new - contains CostDashboard)
• Quality Gates (new - contains QualityGatesPanel)
• Context (existing)

Each tab shows only its relevant content.

Recommendation

Option B - Better UX, cleaner navigation, matches test expectations without modifying tests.

Files to Modify

• web-ui/src/components/Dashboard.tsx:295-320 - Add new tabs
• web-ui/src/types/dashboard.ts - Update DashboardTab type
• Tests: No changes needed if Option B

Acceptance Criteria

• Dashboard tabs have data-testid attributes
• Tests can locate and click tabs
• Checkpoint panel visible after clicking checkpoint tab
• Metrics panel visible after clicking metrics tab
• All 11 blocked E2E tests pass

Related Files

• web-ui/src/components/Dashboard.tsx:53 - activeTab state
• web-ui/src/components/Dashboard.tsx:295-320 - Tab buttons
• web-ui/src/components/Dashboard.tsx:327-559 - Tab panels
• tests/e2e/test_checkpoint_ui.spec.ts:29 - Expects checkpoint-tab
• tests/e2e/test_metrics_ui.spec.ts:32 - Expects metrics-tab

[traycerai]

Plan

Observations

The Dashboard currently has only 2 tabs (Overview and Context) at lines 295-320 in file:web-ui/src/components/Dashboard.tsx. All feature panels (Checkpoints, Metrics, Quality Gates) are stacked vertically on the Overview tab (lines 494-524). The E2E tests expect separate checkpoint-tab and metrics-tab buttons to navigate to dedicated sections. The DashboardTab type in file:web-ui/src/types/dashboard.ts only defines 'overview' | 'context'. The feature components (CheckpointList, CostDashboard, QualityGatesPanel) are already self-contained and ready to be separated into individual tabs.

Approach

Implement Option B from the issue - create dedicated tabs for each feature section. This provides better UX by organizing content into logical sections and matches test expectations without requiring test modifications. The plan involves: (1) updating the DashboardTab type to include new tab values, (2) adding new tab buttons with appropriate data-testid attributes, (3) creating separate tab panels for each feature, and (4) moving existing feature components into their respective panels. This approach maintains backward compatibility while improving navigation and testability.

Implementation Steps

1. Update Type Definitions

File: file:web-ui/src/types/dashboard.ts

Expand the DashboardTab type to include all five tabs:

export type DashboardTab = 'overview' | 'checkpoints' | 'metrics' | 'quality-gates' | 'context';

Update the DashboardState interface if needed to reflect the new tab options.

---

2. Add Tab Navigation Buttons

File: file:web-ui/src/components/Dashboard.tsx (lines 291-323)

In the tab navigation section, add three new tab buttons between the Overview and Context tabs:

Checkpoints Tab Button:

• Add after the Overview tab button (after line 307)
• Set data-testid="checkpoint-tab" (required by tests)
• Set aria-controls="checkpoints-panel"
• Use same styling pattern as existing tabs
• Show active state when activeTab === 'checkpoints'

Metrics Tab Button:

• Add after the Checkpoints tab button
• Set data-testid="metrics-tab" (required by tests)
• Set aria-controls="metrics-panel"
• Use same styling pattern as existing tabs
• Show active state when activeTab === 'metrics'

Quality Gates Tab Button:

• Add after the Metrics tab button
• Set data-testid="quality-gates-tab"
• Set aria-controls="quality-gates-panel"
• Use same styling pattern as existing tabs
• Show active state when activeTab === 'quality-gates'

Maintain the existing tab order: Overview → Checkpoints → Metrics → Quality Gates → Context

---

3. Create Checkpoints Tab Panel

File: file:web-ui/src/components/Dashboard.tsx (after line 557)

Add a new conditional render block for the Checkpoints tab:

• Wrap in conditional: {activeTab === 'checkpoints' && ...}
• Use <div role="tabpanel" id="checkpoints-panel" aria-labelledby="checkpoint-tab">
• Set data-testid="checkpoint-panel" on the panel container
• Move the CheckpointList component from the Overview tab (currently at lines 510-516)
• Remove the outer wrapper div and heading since CheckpointList has its own
• Keep the projectId and refreshInterval={30000} props

---

4. Create Metrics Tab Panel

File: file:web-ui/src/components/Dashboard.tsx (after Checkpoints panel)

Add a new conditional render block for the Metrics tab:

• Wrap in conditional: {activeTab === 'metrics' && ...}
• Use <div role="tabpanel" id="metrics-panel" aria-labelledby="metrics-tab">
• Set data-testid="metrics-panel" on the panel container
• Move the CostDashboard component from the Overview tab (currently at lines 518-524)
• Remove the outer wrapper div and heading since CostDashboard has its own
• Keep the projectId prop

---

5. Create Quality Gates Tab Panel

File: file:web-ui/src/components/Dashboard.tsx (after Metrics panel)

Add a new conditional render block for the Quality Gates tab:

• Wrap in conditional: {activeTab === 'quality-gates' && ...}
• Use <div role="tabpanel" id="quality-gates-panel" aria-labelledby="quality-gates-tab">
• Set data-testid="quality-gates-panel" on the panel container
• Move the QualityGatesPanel with its ErrorBoundary wrapper from the Overview tab (currently at lines 494-508)
• Keep the entire ErrorBoundary structure including:
  • key={qualityGatesPanelKey}
  • fallback={qualityGatesFallback}
  • onError={handleQualityGatesError}
• Keep the conditional {showQualityGatesPanel && ...} wrapper
• Maintain the projectId and tasks props

---

6. Clean Up Overview Tab

File: file:web-ui/src/components/Dashboard.tsx (lines 494-524)

Remove the three feature panel sections that were moved to dedicated tabs:

• Remove Quality Gates Panel section (lines 494-508)
• Remove Checkpoint Panel section (lines 510-516)
• Remove Metrics Panel section (lines 518-524)

Keep all other Overview tab content:

• Discovery Progress
• Session Status
• Chat Interface
• Progress Section
• Task Statistics
• Issues & Tasks
• Agents Section
• Blockers Section
• Review Results
• Lint Quality Trend
• Review Findings Panel
• Recent Activity

---

7. Update Tab Order and Styling

File: file:web-ui/src/components/Dashboard.tsx (line 294)

Ensure the tab navigation uses proper spacing for 5 tabs instead of 2. The existing space-x-8 class should work, but verify the layout doesn't overflow on smaller screens. Consider adding responsive classes if needed (e.g., space-x-4 md:space-x-8).

---

Visual Structure

graph TD
    A[Dashboard Header] --> B[Tab Navigation]
    B --> C[Overview Tab]
    B --> D[Checkpoints Tab]
    B --> E[Metrics Tab]
    B --> F[Quality Gates Tab]
    B --> G[Context Tab]
    
    C --> C1[Discovery Progress]
    C --> C2[Session Status]
    C --> C3[Progress Section]
    C --> C4[Task Statistics]
    C --> C5[Issues & Tasks]
    C --> C6[Agents Section]
    C --> C7[Blockers]
    C --> C8[Review Results]
    C --> C9[Recent Activity]
    
    D --> D1[CheckpointList Component]
    D1 --> D2[Create Checkpoint]
    D1 --> D3[Checkpoint Items]
    D1 --> D4[Restore/Delete Actions]
    
    E --> E1[CostDashboard Component]
    E1 --> E2[Token Statistics]
    E1 --> E3[Cost Breakdown by Agent]
    E1 --> E4[Cost Breakdown by Model]
    E1 --> E5[Cost Trend Chart]
    
    F --> F1[QualityGatesPanel Component]
    F1 --> F2[Task Selector]
    F1 --> F3[Gate Status Indicators]
    F1 --> F4[Detailed Status View]
    
    G --> G1[Agent Selector]
    G --> G2[ContextPanel Component]

Loading

---

Tab Navigation Flow

Tab	data-testid	Content	Test Coverage
Overview	overview-tab	Progress, Tasks, Agents, Activity	General dashboard tests
Checkpoints	checkpoint-tab	CheckpointList component	test_checkpoint_ui.spec.ts (8 tests)
Metrics	metrics-tab	CostDashboard component	test_metrics_ui.spec.ts (3 tests)
Quality Gates	quality-gates-tab	QualityGatesPanel component	Future E2E tests
Context	context-tab	Agent context viewer	Context panel tests

---

Acceptance Criteria Verification

After implementation, verify:

• All 5 tab buttons are visible in the navigation bar
• Each tab button has the correct data-testid attribute
• Clicking each tab shows only its corresponding panel
• checkpoint-tab button is clickable and shows CheckpointList
• metrics-tab button is clickable and shows CostDashboard
• All 8 checkpoint UI tests in test_checkpoint_ui.spec.ts can locate and click the checkpoint tab
• All 3 metrics UI tests in test_metrics_ui.spec.ts can locate and click the metrics tab
• Tab panels have proper ARIA attributes (role="tabpanel", aria-labelledby)
• Active tab styling is applied correctly
• Components maintain their existing functionality (auto-refresh, data fetching, interactions)
• ErrorBoundary protection for QualityGatesPanel still works in its new location

Import In IDE

🤖 Prompt for AI Agents

## Observations

The Dashboard currently has only 2 tabs (Overview and Context) at lines 295-320 in `file:web-ui/src/components/Dashboard.tsx`. All feature panels (Checkpoints, Metrics, Quality Gates) are stacked vertically on the Overview tab (lines 494-524). The E2E tests expect separate `checkpoint-tab` and `metrics-tab` buttons to navigate to dedicated sections. The `DashboardTab` type in `file:web-ui/src/types/dashboard.ts` only defines `'overview' | 'context'`. The feature components (CheckpointList, CostDashboard, QualityGatesPanel) are already self-contained and ready to be separated into individual tabs.

## Approach

Implement **Option B** from the issue - create dedicated tabs for each feature section. This provides better UX by organizing content into logical sections and matches test expectations without requiring test modifications. The plan involves: (1) updating the `DashboardTab` type to include new tab values, (2) adding new tab buttons with appropriate `data-testid` attributes, (3) creating separate tab panels for each feature, and (4) moving existing feature components into their respective panels. This approach maintains backward compatibility while improving navigation and testability.

## Implementation Steps

### 1. Update Type Definitions

**File:** `file:web-ui/src/types/dashboard.ts`

Expand the `DashboardTab` type to include all five tabs:

```typescript
export type DashboardTab = 'overview' | 'checkpoints' | 'metrics' | 'quality-gates' | 'context';
```

Update the `DashboardState` interface if needed to reflect the new tab options.

---

### 2. Add Tab Navigation Buttons

**File:** `file:web-ui/src/components/Dashboard.tsx` (lines 291-323)

In the tab navigation section, add three new tab buttons between the Overview and Context tabs:

**Checkpoints Tab Button:**
- Add after the Overview tab button (after line 307)
- Set `data-testid="checkpoint-tab"` (required by tests)
- Set `aria-controls="checkpoints-panel"`
- Use same styling pattern as existing tabs
- Show active state when `activeTab === 'checkpoints'`

**Metrics Tab Button:**
- Add after the Checkpoints tab button
- Set `data-testid="metrics-tab"` (required by tests)
- Set `aria-controls="metrics-panel"`
- Use same styling pattern as existing tabs
- Show active state when `activeTab === 'metrics'`

**Quality Gates Tab Button:**
- Add after the Metrics tab button
- Set `data-testid="quality-gates-tab"`
- Set `aria-controls="quality-gates-panel"`
- Use same styling pattern as existing tabs
- Show active state when `activeTab === 'quality-gates'`

Maintain the existing tab order: Overview → Checkpoints → Metrics → Quality Gates → Context

---

### 3. Create Checkpoints Tab Panel

**File:** `file:web-ui/src/components/Dashboard.tsx` (after line 557)

Add a new conditional render block for the Checkpoints tab:

- Wrap in conditional: `{activeTab === 'checkpoints' && ...}`
- Use `<div role="tabpanel" id="checkpoints-panel" aria-labelledby="checkpoint-tab">`
- Set `data-testid="checkpoint-panel"` on the panel container
- Move the CheckpointList component from the Overview tab (currently at lines 510-516)
- Remove the outer wrapper div and heading since CheckpointList has its own
- Keep the `projectId` and `refreshInterval={30000}` props

---

### 4. Create Metrics Tab Panel

**File:** `file:web-ui/src/components/Dashboard.tsx` (after Checkpoints panel)

Add a new conditional render block for the Metrics tab:

- Wrap in conditional: `{activeTab === 'metrics' && ...}`
- Use `<div role="tabpanel" id="metrics-panel" aria-labelledby="metrics-tab">`
- Set `data-testid="metrics-panel"` on the panel container
- Move the CostDashboard component from the Overview tab (currently at lines 518-524)
- Remove the outer wrapper div and heading since CostDashboard has its own
- Keep the `projectId` prop

---

### 5. Create Quality Gates Tab Panel

**File:** `file:web-ui/src/components/Dashboard.tsx` (after Metrics panel)

Add a new conditional render block for the Quality Gates tab:

- Wrap in conditional: `{activeTab === 'quality-gates' && ...}`
- Use `<div role="tabpanel" id="quality-gates-panel" aria-labelledby="quality-gates-tab">`
- Set `data-testid="quality-gates-panel"` on the panel container
- Move the QualityGatesPanel with its ErrorBoundary wrapper from the Overview tab (currently at lines 494-508)
- Keep the entire ErrorBoundary structure including:
  - `key={qualityGatesPanelKey}`
  - `fallback={qualityGatesFallback}`
  - `onError={handleQualityGatesError}`
- Keep the conditional `{showQualityGatesPanel && ...}` wrapper
- Maintain the `projectId` and `tasks` props

---

### 6. Clean Up Overview Tab

**File:** `file:web-ui/src/components/Dashboard.tsx` (lines 494-524)

Remove the three feature panel sections that were moved to dedicated tabs:

- Remove Quality Gates Panel section (lines 494-508)
- Remove Checkpoint Panel section (lines 510-516)
- Remove Metrics Panel section (lines 518-524)

Keep all other Overview tab content:
- Discovery Progress
- Session Status
- Chat Interface
- Progress Section
- Task Statistics
- Issues & Tasks
- Agents Section
- Blockers Section
- Review Results
- Lint Quality Trend
- Review Findings Panel
- Recent Activity

---

### 7. Update Tab Order and Styling

**File:** `file:web-ui/src/components/Dashboard.tsx` (line 294)

Ensure the tab navigation uses proper spacing for 5 tabs instead of 2. The existing `space-x-8` class should work, but verify the layout doesn't overflow on smaller screens. Consider adding responsive classes if needed (e.g., `space-x-4 md:space-x-8`).

---

## Visual Structure

```mermaid
graph TD
    A[Dashboard Header] --> B[Tab Navigation]
    B --> C[Overview Tab]
    B --> D[Checkpoints Tab]
    B --> E[Metrics Tab]
    B --> F[Quality Gates Tab]
    B --> G[Context Tab]
    
    C --> C1[Discovery Progress]
    C --> C2[Session Status]
    C --> C3[Progress Section]
    C --> C4[Task Statistics]
    C --> C5[Issues & Tasks]
    C --> C6[Agents Section]
    C --> C7[Blockers]
    C --> C8[Review Results]
    C --> C9[Recent Activity]
    
    D --> D1[CheckpointList Component]
    D1 --> D2[Create Checkpoint]
    D1 --> D3[Checkpoint Items]
    D1 --> D4[Restore/Delete Actions]
    
    E --> E1[CostDashboard Component]
    E1 --> E2[Token Statistics]
    E1 --> E3[Cost Breakdown by Agent]
    E1 --> E4[Cost Breakdown by Model]
    E1 --> E5[Cost Trend Chart]
    
    F --> F1[QualityGatesPanel Component]
    F1 --> F2[Task Selector]
    F1 --> F3[Gate Status Indicators]
    F1 --> F4[Detailed Status View]
    
    G --> G1[Agent Selector]
    G --> G2[ContextPanel Component]
```

---

## Tab Navigation Flow

| Tab | data-testid | Content | Test Coverage |
|-----|-------------|---------|---------------|
| Overview | `overview-tab` | Progress, Tasks, Agents, Activity | General dashboard tests |
| Checkpoints | `checkpoint-tab` | CheckpointList component | `test_checkpoint_ui.spec.ts` (8 tests) |
| Metrics | `metrics-tab` | CostDashboard component | `test_metrics_ui.spec.ts` (3 tests) |
| Quality Gates | `quality-gates-tab` | QualityGatesPanel component | Future E2E tests |
| Context | `context-tab` | Agent context viewer | Context panel tests |

---

## Acceptance Criteria Verification

After implementation, verify:

- [ ] All 5 tab buttons are visible in the navigation bar
- [ ] Each tab button has the correct `data-testid` attribute
- [ ] Clicking each tab shows only its corresponding panel
- [ ] `checkpoint-tab` button is clickable and shows CheckpointList
- [ ] `metrics-tab` button is clickable and shows CostDashboard
- [ ] All 8 checkpoint UI tests in `test_checkpoint_ui.spec.ts` can locate and click the checkpoint tab
- [ ] All 3 metrics UI tests in `test_metrics_ui.spec.ts` can locate and click the metrics tab
- [ ] Tab panels have proper ARIA attributes (`role="tabpanel"`, `aria-labelledby`)
- [ ] Active tab styling is applied correctly
- [ ] Components maintain their existing functionality (auto-refresh, data fetching, interactions)
- [ ] ErrorBoundary protection for QualityGatesPanel still works in its new location

---

Execution Information

Branch: main
Commit: 2d6aa65

---

💡 Tips

Supported Commands (Inside Comments)

• Use @traycerai generate to iterate on the previous version of the implementation plan.

Supported Commands (Inside Description)

• Add @traycerai ignore anywhere in the ticket description to prevent this ticket from being processed.
• Add @traycerai branch:<branch-name> anywhere in the ticket description to specify the target branch for the implementation plan.

Community

• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

📝 CodeRabbit Plan Mode

Generate an implementation plan and prompts that you can use with your favorite coding agent.

• Create Plan

Examples

• Example 1
• Example 2

🔗 Similar Issues

Related Issues

• Implement Quality Gates Panel in Dashboard #43
• Implement Task Statistics Display in Dashboard #44
• Implement advanced Metrics UI features (token stats, filtering, export, trends) #46
• Add unit tests for Quality Gates Panel components #56
• Implement Checkpoint diff preview and proper delete confirmation dialog #47

🔗 Related PRs

#26 - Feature 013: Context Panel Integration with TypeScript Fixes [merged]
#38 - fix(e2e): Improve Playwright test pass rate from 18% to 57% [merged]
#50 - feat: Implement Quality Gates Panel in Dashboard (#43) [merged]
#51 - feat: Add TaskStats component to Dashboard Overview tab [merged]
#78 - Add error boundary protection for Quality Gates Panel [merged]

👤 Suggested Assignees

• frankbria

---

🧪 Issue enrichment is currently in early access.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

[frankbria]

Addressed with commit