Update E2E test expectations to match current Dashboard design

[frankbria]

Problem

E2E tests expect a multi-tab Dashboard design with separate tabs for each feature section (Checkpoints, Metrics, Quality Gates), but the current Dashboard has only 2 tabs (Overview, Context) with all feature panels stacked on the Overview tab.

Current Design

Dashboard tabs (web-ui/src/components/Dashboard.tsx:295-320):

1. Overview - Contains all feature panels stacked vertically:
   • Discovery Progress
   • Session Status
   • Chat Interface
   • PRD Modal
   • Task Tree View
   • Agent Status
   • Blockers Panel
   • Review Results
   • Lint Trends
   • Quality Gates Panel
   • Checkpoint Panel
   • Metrics Panel
   • Recent Activity
2. Context - Contains Context Panel for multi-agent context management

Test Expectations

Tests expect separate tabs for each Sprint 10 feature:

• checkpoint-tab - Navigate to checkpoint section
• metrics-tab - Navigate to metrics section
• Possibly quality-gates-tab (if added)

Options

Option A: Update Tests to Match Current Design (Quick - 30 minutes)

Modify tests to:

1. Remove tab navigation (checkpoint-tab, metrics-tab)
2. Directly scroll to panels (they're on Overview by default)
3. Update assertions for stacked layout

Pros:

• Quick fix
• No UI changes needed
• Tests match current implementation

Cons:

• Loses separation of concerns in tests
• All panels must load on Overview (slower initial render)

Example Test Change:

// BEFORE
test.beforeEach(async ({ page }) => {
  await page.goto(`${FRONTEND_URL}/projects/${PROJECT_ID}`);
  
  const checkpointTab = page.locator('[data-testid="checkpoint-tab"]');
  await checkpointTab.click();
});

// AFTER
test.beforeEach(async ({ page }) => {
  await page.goto(`${FRONTEND_URL}/projects/${PROJECT_ID}`);
  
  // Checkpoint panel is on Overview tab by default
  const checkpointPanel = page.locator('[data-testid="checkpoint-panel"]');
  await checkpointPanel.scrollIntoViewIfNeeded();
});

Option B: Refactor Dashboard to Match Test Expectations (Recommended - 1-2 hours)

Create dedicated tabs for Sprint 10 features:

1. Overview - High-level status, discovery, chat, agents
2. Tasks - Task tree, blockers, review results
3. Quality Gates - Quality gate checks
4. Checkpoints - Checkpoint list and management
5. Metrics - Cost dashboard and token usage
6. Context - Context panel (existing)

Pros:

• Better UX - focused views
• Faster tab switching (lazy load panels)
• Matches test expectations without test changes
• Cleaner navigation
• Easier to find specific features

Cons:

• More UI work (1-2 hours)
• Need to update DashboardTab type
• Need to reorganize panel rendering

Implementation:

// web-ui/src/types/dashboard.ts
export type DashboardTab = 
  | 'overview' 
  | 'tasks'
  | 'quality-gates'
  | 'checkpoints'
  | 'metrics'
  | 'context';

// web-ui/src/components/Dashboard.tsx
{activeTab === 'checkpoints' && (
  <div role="tabpanel" id="checkpoints-panel">
    <CheckpointList projectId={projectId} refreshInterval={30000} />
  </div>
)}

{activeTab === 'metrics' && (
  <div role="tabpanel" id="metrics-panel">
    <CostDashboard projectId={projectId} />
  </div>
)}

Recommendation

Option B - Refactor Dashboard to match test expectations

Rationale:

1. Tests were written with good UX in mind (focused views)
2. Current Overview tab is too cluttered (13 different panels)
3. Dedicated tabs improve navigation and performance
4. No test changes needed - tests are already correct
5. Sets better foundation for future feature additions

Decision Criteria

• If time-constrained: Option A (modify tests)
• If building for production: Option B (refactor Dashboard)
• If tests need to pass ASAP: Option A
• If UX matters: Option B

Impact

Affects all 12 failed E2E tests:

• 8 checkpoint tests would benefit from dedicated tab
• 3 metrics tests would benefit from dedicated tab
• 1 WebSocket test unaffected

Acceptance Criteria

If Option A (Update Tests):

• Remove tab navigation from checkpoint tests
• Remove tab navigation from metrics tests
• Update tests to scroll to panels
• All E2E tests pass with updated expectations

If Option B (Refactor Dashboard):

• Add 4 new tabs: Tasks, Quality Gates, Checkpoints, Metrics
• Move relevant panels to each tab
• Add data-testid to all tab buttons
• Implement lazy loading for tab content (optional)
• All E2E tests pass without changes

Files to Modify

Option A (Tests):

• tests/e2e/test_checkpoint_ui.spec.ts - Remove tab navigation
• tests/e2e/test_metrics_ui.spec.ts - Remove tab navigation

Option B (Dashboard):

• web-ui/src/types/dashboard.ts - Update DashboardTab type
• web-ui/src/components/Dashboard.tsx - Add tabs and reorganize panels
• Tests: No changes needed

Related Issues

• Add data-testid attributes to Dashboard tabs for E2E testing #84 - Add data-testid to Dashboard tabs (prerequisite)

[traycerai]

Plan

Observations

The current Dashboard has 3 tabs (Overview, Context, Checkpoints), but the Overview tab is cluttered with 15 different panels stacked vertically. The Checkpoints tab already exists with proper data-testid="checkpoint-tab", and E2E tests for checkpoints should work. However, the Metrics panel (CostDashboard) and Quality Gates panel are embedded in the Overview tab, making navigation difficult. The issue recommends creating dedicated tabs for better UX and focused views.

Approach

Following Option B from the issue, we'll refactor the Dashboard to add dedicated tabs for Sprint 10 features: Quality Gates and Metrics. The Checkpoints tab already exists. We'll also optionally add a Tasks tab to group task-related panels. This approach improves UX with focused views, enables lazy loading for better performance, and matches test expectations without requiring test changes. The implementation involves updating the DashboardTab type and reorganizing panel rendering in Dashboard.tsx.

Implementation Steps

1. Update Dashboard Type Definitions

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

Update the DashboardTab type to include new tabs:

• Change from: 'overview' | 'context' | 'checkpoints'
• Change to: 'overview' | 'tasks' | 'quality-gates' | 'checkpoints' | 'metrics' | 'context'

This adds three new tab options: tasks, quality-gates, and metrics.

2. Add New Tab Buttons to Dashboard Navigation

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

Add four new tab buttons after the existing tabs in the navigation section:

Tasks Tab Button (after Overview tab):

• Add button with role="tab", aria-selected, and aria-controls="tasks-panel"
• Set data-testid="tasks-tab" for E2E testing
• Use same styling pattern as existing tabs
• Label: "Tasks"

Quality Gates Tab Button (after Tasks tab):

• Add button with role="tab", aria-selected, and aria-controls="quality-gates-panel"
• Set data-testid="quality-gates-tab" for E2E testing
• Use same styling pattern as existing tabs
• Label: "Quality Gates"

Metrics Tab Button (after Checkpoints tab):

• Add button with role="tab", aria-selected, and aria-controls="metrics-panel"
• Set data-testid="metrics-tab" for E2E testing
• Use same styling pattern as existing tabs
• Label: "Metrics"

Keep the existing Context tab at the end for consistency.

3. Reorganize Overview Tab Content

File: file:web-ui/src/components/Dashboard.tsx (lines 342-564)

Simplify the Overview tab to show only high-level status panels:

Keep on Overview:

• Discovery Progress (line 345)
• Session Status (lines 347-350)
• Chat Interface (lines 352-360)
• Progress Section (lines 362-411)
• Multi-Agent Team (lines 432-441)
• Agent State (lines 443-470)
• Recent Activity (lines 534-563)

Remove from Overview (move to dedicated tabs):

• Task Statistics → Move to Tasks tab
• Issues & Tasks (TaskTreeView) → Move to Tasks tab
• Blockers Panel → Move to Tasks tab
• Review Results Panel → Move to Tasks tab
• Lint Quality Trend → Move to Tasks tab
• Review Findings Panel → Move to Tasks tab
• Quality Gates Panel → Move to Quality Gates tab
• Metrics Panel → Move to Metrics tab

4. Create Tasks Tab Panel

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

Add new tab panel with activeTab === 'tasks' condition:

Structure:

{activeTab === 'tasks' && (
  <div role="tabpanel" id="tasks-panel" aria-labelledby="tasks-tab">
    <!-- Task Statistics Section -->
    <!-- Issues & Tasks Section (TaskTreeView) -->
    <!-- Blockers Panel -->
    <!-- Review Results Panel (conditional) -->
    <!-- Lint Quality Trend -->
    <!-- Review Findings Panel -->
  </div>
)}

Components to include:

• Task Statistics (from line 413-417)
• Issues & Tasks with TaskTreeView (from lines 419-430)
• Blockers Panel (from lines 472-478)
• Review Results Panel if selectedTaskForReview is set (from lines 480-488)
• Lint Quality Trend (from lines 490-497)
• Review Findings Panel (from lines 501-507)

All panels should maintain their existing data-testid attributes and styling.

5. Create Quality Gates Tab Panel

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

Add new tab panel with activeTab === 'quality-gates' condition:

Structure:

{activeTab === 'quality-gates' && (
  <div role="tabpanel" id="quality-gates-panel" aria-labelledby="quality-gates-tab">
    <!-- Quality Gates Panel with Error Boundary -->
  </div>
)}

Components to include:

• Move the entire Quality Gates Panel section (lines 509-523) including:
  • ErrorBoundary wrapper with qualityGatesPanelKey
  • QualityGatesPanel component with projectId and tasks props
  • Fallback component (qualityGatesFallback)
  • Error handler (handleQualityGatesError)

Keep the data-testid="quality-gates-panel" on the outer div.

6. Create Metrics Tab Panel

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

Add new tab panel with activeTab === 'metrics' condition:

Structure:

{activeTab === 'metrics' && (
  <div role="tabpanel" id="metrics-panel" aria-labelledby="metrics-tab">
    <div className="bg-white rounded-lg shadow p-6" data-testid="metrics-panel">
      <h2 className="text-lg font-semibold mb-4">📊 Cost & Token Metrics</h2>
      <CostDashboard projectId={projectId} />
    </div>
  </div>
)}

Components to include:

• Move the Metrics Panel section (lines 526-532)
• CostDashboard component with projectId prop
• Keep the data-testid="metrics-panel" attribute

The CostDashboard component already has comprehensive internal structure with token stats, cost breakdowns, and charts.

7. Verify Existing Checkpoints and Context Tabs

Files: file:web-ui/src/components/Dashboard.tsx (lines 614-622, 567-612)

No changes needed - these tabs already exist and are properly implemented:

Checkpoints Tab (lines 614-622):

• Has correct data-testid="checkpoint-tab" on button (line 326)
• Has correct data-testid="checkpoint-panel" on panel (line 617)
• Renders CheckpointList component with proper props

Context Tab (lines 567-612):

• Has proper tab button and panel structure
• Includes agent selector and ContextPanel component
• No changes required

8. Update Tab Order and Navigation Flow

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

Ensure tab order is logical:

1. Overview - High-level project status
2. Tasks - Task management and reviews
3. Quality Gates - Quality checks
4. Checkpoints - Checkpoint management (existing)
5. Metrics - Cost and token tracking
6. Context - Agent context management (existing)

This order groups related functionality and follows a natural workflow progression.

9. Testing Considerations

No test file changes required - the E2E tests already expect these tabs:

Checkpoint Tests (file:tests/e2e/test_checkpoint_ui.spec.ts):

• Already look for [data-testid="checkpoint-tab"] (line 29)
• Should work without changes

Metrics Tests (file:tests/e2e/test_metrics_ui.spec.ts):

• Currently scroll to metrics panel on Overview (lines 33-35)
• Will continue to work as data-testid="metrics-panel" is preserved
• Could be updated later to navigate to Metrics tab for better test isolation

Quality Gates Tests (if they exist):

• Will work with new data-testid="quality-gates-tab" and data-testid="quality-gates-panel"

Architecture Diagram

graph TD
    A[Dashboard Component] --> B[Tab Navigation]
    B --> C[Overview Tab]
    B --> D[Tasks Tab]
    B --> E[Quality Gates Tab]
    B --> F[Checkpoints Tab]
    B --> G[Metrics Tab]
    B --> H[Context Tab]
    
    C --> C1[Discovery Progress]
    C --> C2[Session Status]
    C --> C3[Chat Interface]
    C --> C4[Progress Section]
    C --> C5[Agent Status]
    C --> C6[Recent Activity]
    
    D --> D1[Task Statistics]
    D --> D2[TaskTreeView]
    D --> D3[Blockers Panel]
    D --> D4[Review Results]
    D --> D5[Lint Trends]
    
    E --> E1[QualityGatesPanel]
    E --> E2[ErrorBoundary]
    
    F --> F1[CheckpointList]
    
    G --> G1[CostDashboard]
    G1 --> G2[Token Stats]
    G1 --> G3[Cost Breakdown]
    G1 --> G4[Trend Charts]
    
    H --> H1[Agent Selector]
    H --> H2[ContextPanel]
    
    style A fill:#e1f5ff
    style B fill:#fff4e1
    style C fill:#e8f5e9
    style D fill:#e8f5e9
    style E fill:#e8f5e9
    style F fill:#e8f5e9
    style G fill:#e8f5e9
    style H fill:#e8f5e9

Loading

Tab Content Summary

Tab	Panels	Purpose	Data-TestID
Overview	Discovery, Session, Chat, Progress, Agents, Activity	High-level project status	overview-panel
Tasks	Statistics, Tree, Blockers, Reviews, Lint	Task management & quality	tasks-panel
Quality Gates	Quality checks panel	Quality gate validation	quality-gates-panel
Checkpoints	Checkpoint list	State management	checkpoint-panel
Metrics	Cost dashboard	Cost & token tracking	metrics-panel
Context	Agent context viewer	Multi-agent memory	context-panel

Benefits

• Better UX: Focused views reduce cognitive load
• Faster Performance: Lazy loading - only active tab renders
• Easier Navigation: Clear separation of concerns
• Test Compatibility: No test changes needed
• Scalability: Easy to add more features to appropriate tabs
• Reduced Clutter: Overview tab goes from 15 panels to 7 panels

Import In IDE

🤖 Prompt for AI Agents

## Observations

The current Dashboard has **3 tabs** (Overview, Context, Checkpoints), but the Overview tab is cluttered with **15 different panels** stacked vertically. The Checkpoints tab already exists with proper `data-testid="checkpoint-tab"`, and E2E tests for checkpoints should work. However, the Metrics panel (`CostDashboard`) and Quality Gates panel are embedded in the Overview tab, making navigation difficult. The issue recommends creating dedicated tabs for better UX and focused views.

## Approach

Following **Option B** from the issue, we'll refactor the Dashboard to add dedicated tabs for Sprint 10 features: **Quality Gates** and **Metrics**. The Checkpoints tab already exists. We'll also optionally add a **Tasks** tab to group task-related panels. This approach improves UX with focused views, enables lazy loading for better performance, and matches test expectations without requiring test changes. The implementation involves updating the `DashboardTab` type and reorganizing panel rendering in `Dashboard.tsx`.

## Implementation Steps

### 1. Update Dashboard Type Definitions

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

Update the `DashboardTab` type to include new tabs:
- Change from: `'overview' | 'context' | 'checkpoints'`
- Change to: `'overview' | 'tasks' | 'quality-gates' | 'checkpoints' | 'metrics' | 'context'`

This adds three new tab options: `tasks`, `quality-gates`, and `metrics`.

### 2. Add New Tab Buttons to Dashboard Navigation

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

Add four new tab buttons after the existing tabs in the navigation section:

**Tasks Tab Button** (after Overview tab):
- Add button with `role="tab"`, `aria-selected`, and `aria-controls="tasks-panel"`
- Set `data-testid="tasks-tab"` for E2E testing
- Use same styling pattern as existing tabs
- Label: "Tasks"

**Quality Gates Tab Button** (after Tasks tab):
- Add button with `role="tab"`, `aria-selected`, and `aria-controls="quality-gates-panel"`
- Set `data-testid="quality-gates-tab"` for E2E testing
- Use same styling pattern as existing tabs
- Label: "Quality Gates"

**Metrics Tab Button** (after Checkpoints tab):
- Add button with `role="tab"`, `aria-selected`, and `aria-controls="metrics-panel"`
- Set `data-testid="metrics-tab"` for E2E testing
- Use same styling pattern as existing tabs
- Label: "Metrics"

Keep the existing Context tab at the end for consistency.

### 3. Reorganize Overview Tab Content

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

Simplify the Overview tab to show only high-level status panels:

**Keep on Overview:**
- Discovery Progress (line 345)
- Session Status (lines 347-350)
- Chat Interface (lines 352-360)
- Progress Section (lines 362-411)
- Multi-Agent Team (lines 432-441)
- Agent State (lines 443-470)
- Recent Activity (lines 534-563)

**Remove from Overview** (move to dedicated tabs):
- Task Statistics → Move to Tasks tab
- Issues & Tasks (TaskTreeView) → Move to Tasks tab
- Blockers Panel → Move to Tasks tab
- Review Results Panel → Move to Tasks tab
- Lint Quality Trend → Move to Tasks tab
- Review Findings Panel → Move to Tasks tab
- Quality Gates Panel → Move to Quality Gates tab
- Metrics Panel → Move to Metrics tab

### 4. Create Tasks Tab Panel

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

Add new tab panel with `activeTab === 'tasks'` condition:

**Structure:**
```
{activeTab === 'tasks' && (
  <div role="tabpanel" id="tasks-panel" aria-labelledby="tasks-tab">
    <!-- Task Statistics Section -->
    <!-- Issues & Tasks Section (TaskTreeView) -->
    <!-- Blockers Panel -->
    <!-- Review Results Panel (conditional) -->
    <!-- Lint Quality Trend -->
    <!-- Review Findings Panel -->
  </div>
)}
```

**Components to include:**
- Task Statistics (from line 413-417)
- Issues & Tasks with TaskTreeView (from lines 419-430)
- Blockers Panel (from lines 472-478)
- Review Results Panel if `selectedTaskForReview` is set (from lines 480-488)
- Lint Quality Trend (from lines 490-497)
- Review Findings Panel (from lines 501-507)

All panels should maintain their existing `data-testid` attributes and styling.

### 5. Create Quality Gates Tab Panel

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

Add new tab panel with `activeTab === 'quality-gates'` condition:

**Structure:**
```
{activeTab === 'quality-gates' && (
  <div role="tabpanel" id="quality-gates-panel" aria-labelledby="quality-gates-tab">
    <!-- Quality Gates Panel with Error Boundary -->
  </div>
)}
```

**Components to include:**
- Move the entire Quality Gates Panel section (lines 509-523) including:
  - ErrorBoundary wrapper with `qualityGatesPanelKey`
  - QualityGatesPanel component with `projectId` and `tasks` props
  - Fallback component (`qualityGatesFallback`)
  - Error handler (`handleQualityGatesError`)

Keep the `data-testid="quality-gates-panel"` on the outer div.

### 6. Create Metrics Tab Panel

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

Add new tab panel with `activeTab === 'metrics'` condition:

**Structure:**
```
{activeTab === 'metrics' && (
  <div role="tabpanel" id="metrics-panel" aria-labelledby="metrics-tab">
    <div className="bg-white rounded-lg shadow p-6" data-testid="metrics-panel">
      <h2 className="text-lg font-semibold mb-4">📊 Cost & Token Metrics</h2>
      <CostDashboard projectId={projectId} />
    </div>
  </div>
)}
```

**Components to include:**
- Move the Metrics Panel section (lines 526-532)
- CostDashboard component with `projectId` prop
- Keep the `data-testid="metrics-panel"` attribute

The CostDashboard component already has comprehensive internal structure with token stats, cost breakdowns, and charts.

### 7. Verify Existing Checkpoints and Context Tabs

**Files:** `file:web-ui/src/components/Dashboard.tsx` (lines 614-622, 567-612)

**No changes needed** - these tabs already exist and are properly implemented:

**Checkpoints Tab** (lines 614-622):
- Has correct `data-testid="checkpoint-tab"` on button (line 326)
- Has correct `data-testid="checkpoint-panel"` on panel (line 617)
- Renders CheckpointList component with proper props

**Context Tab** (lines 567-612):
- Has proper tab button and panel structure
- Includes agent selector and ContextPanel component
- No changes required

### 8. Update Tab Order and Navigation Flow

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

Ensure tab order is logical:
1. **Overview** - High-level project status
2. **Tasks** - Task management and reviews
3. **Quality Gates** - Quality checks
4. **Checkpoints** - Checkpoint management (existing)
5. **Metrics** - Cost and token tracking
6. **Context** - Agent context management (existing)

This order groups related functionality and follows a natural workflow progression.

### 9. Testing Considerations

**No test file changes required** - the E2E tests already expect these tabs:

**Checkpoint Tests** (`file:tests/e2e/test_checkpoint_ui.spec.ts`):
- Already look for `[data-testid="checkpoint-tab"]` (line 29)
- Should work without changes

**Metrics Tests** (`file:tests/e2e/test_metrics_ui.spec.ts`):
- Currently scroll to metrics panel on Overview (lines 33-35)
- Will continue to work as `data-testid="metrics-panel"` is preserved
- Could be updated later to navigate to Metrics tab for better test isolation

**Quality Gates Tests** (if they exist):
- Will work with new `data-testid="quality-gates-tab"` and `data-testid="quality-gates-panel"`

## Architecture Diagram

```mermaid
graph TD
    A[Dashboard Component] --> B[Tab Navigation]
    B --> C[Overview Tab]
    B --> D[Tasks Tab]
    B --> E[Quality Gates Tab]
    B --> F[Checkpoints Tab]
    B --> G[Metrics Tab]
    B --> H[Context Tab]
    
    C --> C1[Discovery Progress]
    C --> C2[Session Status]
    C --> C3[Chat Interface]
    C --> C4[Progress Section]
    C --> C5[Agent Status]
    C --> C6[Recent Activity]
    
    D --> D1[Task Statistics]
    D --> D2[TaskTreeView]
    D --> D3[Blockers Panel]
    D --> D4[Review Results]
    D --> D5[Lint Trends]
    
    E --> E1[QualityGatesPanel]
    E --> E2[ErrorBoundary]
    
    F --> F1[CheckpointList]
    
    G --> G1[CostDashboard]
    G1 --> G2[Token Stats]
    G1 --> G3[Cost Breakdown]
    G1 --> G4[Trend Charts]
    
    H --> H1[Agent Selector]
    H --> H2[ContextPanel]
    
    style A fill:#e1f5ff
    style B fill:#fff4e1
    style C fill:#e8f5e9
    style D fill:#e8f5e9
    style E fill:#e8f5e9
    style F fill:#e8f5e9
    style G fill:#e8f5e9
    style H fill:#e8f5e9
```

## Tab Content Summary

| Tab | Panels | Purpose | Data-TestID |
|-----|--------|---------|-------------|
| **Overview** | Discovery, Session, Chat, Progress, Agents, Activity | High-level project status | `overview-panel` |
| **Tasks** | Statistics, Tree, Blockers, Reviews, Lint | Task management & quality | `tasks-panel` |
| **Quality Gates** | Quality checks panel | Quality gate validation | `quality-gates-panel` |
| **Checkpoints** | Checkpoint list | State management | `checkpoint-panel` |
| **Metrics** | Cost dashboard | Cost & token tracking | `metrics-panel` |
| **Context** | Agent context viewer | Multi-agent memory | `context-panel` |

## Benefits

- **Better UX**: Focused views reduce cognitive load
- **Faster Performance**: Lazy loading - only active tab renders
- **Easier Navigation**: Clear separation of concerns
- **Test Compatibility**: No test changes needed
- **Scalability**: Easy to add more features to appropriate tabs
- **Reduced Clutter**: Overview tab goes from 15 panels to 7 panels

---

Execution Information

Branch: main
Commit: 360e111

---

💡 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.

✅ Successfully generated implementation plan.

💡 Use @coderabbitai <feedback> to replan

Examples

• Example 1
• Example 2

🔗 Similar Issues

Possible Duplicates

• Add data-testid attributes to Dashboard tabs for E2E testing #84

Related Issues

• Implement Quality Gates Panel in Dashboard #43
• Implement Task Statistics Display in Dashboard #44
• [P1] Implement missing CostDashboard UI elements (date filter, task breakdown, trend chart) #86
• Fix checkpoint panel visibility - CheckpointList not rendering items #85
• Add unit tests for Quality Gates Panel components #56
• Implement advanced Metrics UI features (token stats, filtering, export, trends) #46

🔗 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

[coderabbitai]

Implementation Plan

Approach

Refactor the Dashboard component to add dedicated Metrics and Quality Gates tabs, matching E2E test expectations and improving UX by reducing the cluttered Overview tab.

Observations

The Dashboard is a 639-line React component (web-ui/src/components/Dashboard.tsx) that currently implements 3 tabs (Overview, Context, Checkpoints) using semantic HTML buttons with role="tab" and conditional rendering. The DashboardTab type (web-ui/src/types/dashboard.ts) defines valid tab values as a simple union type. E2E tests expect tab navigation using data-testid selectors like [data-testid="metrics-tab"] and [data-testid="checkpoint-tab"]. All feature panels (CheckpointList, CostDashboard, QualityGatesPanel) are already implemented with proper data-testid attributes on their panels, but CostDashboard and QualityGatesPanel are currently rendered on the Overview tab, which contains 13+ different panels.

Assumptions

Assumption 1: Tab Organization Strategy

Options Considered:

• Minimal approach: Only add Metrics tab (required by tests), keep Quality Gates on Overview
• Balanced approach: Add both Metrics and Quality Gates tabs to reduce Overview clutter
• Comprehensive approach: Add Metrics, Quality Gates, and Tasks tabs for maximum separation

Chosen Option: Balanced approach: Add both Metrics and Quality Gates tabs to reduce Overview clutter

Rationale: This balances test requirements with improved UX. The Checkpoints tab already exists, so we only need to add two new tabs. This reduces the Overview tab from 13 panels to approximately 8-9 panels while giving each Sprint 10 feature (Checkpoints, Metrics, Quality Gates) its own dedicated space. This approach matches the ticket's recommendation without over-engineering.

Assumption 2: Tab Button data-testid Pattern

Options Considered:

• Use generic pattern: tab-<name> (e.g., tab-metrics)
• Use feature-specific pattern: <feature>-tab (e.g., metrics-tab)
• Use panel-aligned pattern matching panel test IDs

Chosen Option: Use feature-specific pattern: <feature>-tab (e.g., metrics-tab)

Rationale: This aligns with the E2E test expectations already written in test_metrics_ui.spec.ts and test_checkpoint_ui.spec.ts, requires zero test changes, and maintains consistency with the existing panel naming pattern (<feature>-panel).

💡 User Tips

Regenerate the plan with different choices with @coderabbitai <feedback>.

Plan

Phase 1: Extend Type System for New Tabs

Update the Dashboard type definitions to support the new Metrics and Quality Gates tabs, ensuring type safety throughout the component.

Update DashboardTab Type

Extend the union type to include the new tab values while maintaining backward compatibility.

• Modify web-ui/src/types/dashboard.ts to add 'metrics' and 'quality-gates' to the DashboardTab union type
• The type should become: type DashboardTab = 'overview' | 'context' | 'checkpoints' | 'metrics' | 'quality-gates'
• Ensure the DashboardState interface remains unchanged (still uses activeTab: DashboardTab)

🤖 Prompt for AI agents

Update Dashboard type definitions to support new Metrics and Quality Gates tabs.

In `web-ui/src/types/dashboard.ts`:
- Extend DashboardTab union type to include 'metrics' and 'quality-gates'
- Type becomes: `type DashboardTab = 'overview' | 'context' | 'checkpoints' |
'metrics' | 'quality-gates'`
- Keep DashboardState interface unchanged

Phase 2: Add Tab Buttons and Update Test IDs

Create the new tab buttons in the Dashboard UI and ensure all existing tabs have proper data-testid attributes for E2E test compatibility.

Task 1: Add Metrics Tab Button

Add the Metrics tab button to the tab navigation bar, following the existing tab button pattern.

• In web-ui/src/components/Dashboard.tsx, locate the tab button section (around lines 294-328)
• Add a new button element for the Metrics tab after the Checkpoints tab button
• Include data-testid="metrics-tab" attribute for E2E test compatibility
• Apply the same semantic HTML attributes as existing tabs: role="tab", aria-selected based on activeTab state, aria-controls="metrics-panel"
• Use consistent styling: apply border-blue-600 text-blue-600 when active, border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 when inactive
• Set click handler to setActiveTab('metrics')
• Use an appropriate label like "📊 Metrics" to match the existing emoji pattern

Task 2: Add Quality Gates Tab Button

Add the Quality Gates tab button following the same pattern as the Metrics tab.

• In web-ui/src/components/Dashboard.tsx, add the Quality Gates tab button after the Metrics tab button
• Include data-testid="quality-gates-tab" attribute
• Apply identical semantic HTML attributes and styling patterns as Task 2.1
• Set click handler to setActiveTab('quality-gates')
• Use label "✓ Quality Gates" or similar

Task 3: Verify Existing Tab Data TestIds

Ensure all existing tabs have appropriate data-testid attributes for consistency.

• Verify the Checkpoints tab button has data-testid="checkpoint-tab" (required by E2E tests)
• Optionally add data-testid="overview-tab" and data-testid="context-tab" for consistency
• If any data-testid attributes are missing, add them following the <feature>-tab naming pattern

🤖 Prompt for AI agents

Add new tab buttons to Dashboard navigation and verify test IDs.

In `web-ui/src/components/Dashboard.tsx` tab button section:
- Add Metrics tab button after Checkpoints tab with `data-testid="metrics-tab"`
- Include semantic HTML: `role="tab"`, `aria-selected` based on activeTab,
`aria-controls="metrics-panel"`
- Apply conditional styling: `border-blue-600 text-blue-600` when active,
`border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300`
when inactive
- Set click handler to `setActiveTab('metrics')`
- Use label "📊 Metrics"

- Add Quality Gates tab button after Metrics tab with
`data-testid="quality-gates-tab"`
- Apply same semantic HTML and styling patterns
- Set click handler to `setActiveTab('quality-gates')`
- Use label "✓ Quality Gates"

- Verify Checkpoints tab has `data-testid="checkpoint-tab"`
- Add data-testid to Overview and Context tabs if missing

Phase 3: Reorganize Panel Rendering

Move the CostDashboard and QualityGatesPanel components from the Overview tab to their dedicated tabs, maintaining existing panel structures and data-testid attributes.

Task 1: Create Metrics Tab Panel

Extract the CostDashboard from the Overview tab and create a dedicated Metrics tab panel section.

• In web-ui/src/components/Dashboard.tsx, locate the CostDashboard rendering (around lines 526-531)
• Remove the CostDashboard section from the Overview tab conditional block
• Create a new conditional rendering block: {activeTab === 'metrics' && (...)}
• Inside this block, add a container div with role="tabpanel", id="metrics-panel", and aria-labelledby="metrics-tab"
• Preserve the existing wrapper div with data-testid="metrics-panel" and its styling (bg-white rounded-lg shadow p-6)
• Keep the h2 header with emoji and the CostDashboard component with its projectId prop
• Maintain any existing state dependencies or refresh logic

Task 2: Create Quality Gates Tab Panel

Extract the QualityGatesPanel from the Overview tab and create a dedicated Quality Gates tab panel section.

• In web-ui/src/components/Dashboard.tsx, locate the QualityGatesPanel rendering (around lines 509-522)
• Remove the QualityGatesPanel section from the Overview tab conditional block
• Create a new conditional rendering block: {activeTab === 'quality-gates' && (...)}
• Inside this block, add a container div with role="tabpanel", id="quality-gates-panel", and aria-labelledby="quality-gates-tab"
• Preserve the ErrorBoundary wrapper with its key={qualityGatesPanelKey} and retry handler
• Keep the inner div with data-testid="quality-gates-panel" and its styling
• Maintain the QualityGatesPanel component with its projectId and tasks props

Task 3: Verify Checkpoints Tab Panel

Confirm the Checkpoints tab panel already has the correct structure and data-testid attribute.

• Verify the CheckpointList is rendered within {activeTab === 'checkpoints' && (...)} block (around lines 614-621)
• Ensure the wrapper has data-testid="checkpoint-panel" (required by E2E tests)
• Verify the panel has proper semantic HTML: role="tabpanel", id="checkpoints-panel", aria-labelledby="checkpoint-tab"
• If any attributes are missing, add them to match the pattern established in Tasks 3.1 and 3.2
• Ensure the CheckpointList component receives projectId and refreshInterval={30000} props

Task 4: Clean Up Overview Tab

Remove any references to moved panels from the Overview tab rendering logic.

• In the Overview tab conditional block, verify that CostDashboard and QualityGatesPanel are no longer rendered
• Ensure remaining Overview panels (Discovery Progress, Session Status, Chat Interface, TaskTreeView, Agent Status, Review Results) are properly organized
• Maintain the existing conditional rendering structure for the Overview tab content
• Verify no broken references or duplicate renderings exist

🤖 Prompt for AI agents

Reorganize panels to move CostDashboard and QualityGatesPanel from Overview to
dedicated tabs.

In `web-ui/src/components/Dashboard.tsx`:

**Create Metrics Tab Panel:**
- Remove CostDashboard from Overview tab conditional block
- Add new conditional: `{activeTab === 'metrics' && (...)}`
- Inside, add container div with `role="tabpanel"`, `id="metrics-panel"`,
`aria-labelledby="metrics-tab"`
- Preserve existing wrapper with `data-testid="metrics-panel"` and styling
`bg-white rounded-lg shadow p-6`
- Keep h2 header and CostDashboard component with `projectId` prop

**Create Quality Gates Tab Panel:**
- Remove QualityGatesPanel from Overview tab conditional block
- Add new conditional: `{activeTab === 'quality-gates' && (...)}`
- Inside, add container div with `role="tabpanel"`, `id="quality-gates-panel"`,
`aria-labelledby="quality-gates-tab"`
- Preserve ErrorBoundary wrapper with `key={qualityGatesPanelKey}` and retry
handler
- Keep inner div with `data-testid="quality-gates-panel"` and styling
- Maintain QualityGatesPanel with `projectId` and `tasks` props

**Verify Checkpoints Tab:**
- Confirm CheckpointList is in `{activeTab === 'checkpoints' && (...)}` block
- Ensure `data-testid="checkpoint-panel"` exists
- Verify semantic HTML: `role="tabpanel"`, `id="checkpoints-panel"`,
`aria-labelledby="checkpoint-tab"`
- Confirm CheckpointList has `projectId` and `refreshInterval={30000}` props

**Clean Up Overview Tab:**
- Remove CostDashboard and QualityGatesPanel from Overview tab
- Verify remaining panels are intact
- Check for no duplicate renderings

---

🚀 Next Steps

🤖 All AI agent prompts combined

Task: 1

Update Dashboard type definitions to support new Metrics and Quality Gates tabs.

In `web-ui/src/types/dashboard.ts`:
- Extend DashboardTab union type to include 'metrics' and 'quality-gates'
- Type becomes: `type DashboardTab = 'overview' | 'context' | 'checkpoints' |
'metrics' | 'quality-gates'`
- Keep DashboardState interface unchanged
===============================================================================

Task: 2

Add new tab buttons to Dashboard navigation and verify test IDs.

In `web-ui/src/components/Dashboard.tsx` tab button section:
- Add Metrics tab button after Checkpoints tab with `data-testid="metrics-tab"`
- Include semantic HTML: `role="tab"`, `aria-selected` based on activeTab,
`aria-controls="metrics-panel"`
- Apply conditional styling: `border-blue-600 text-blue-600` when active,
`border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300`
when inactive
- Set click handler to `setActiveTab('metrics')`
- Use label "📊 Metrics"

- Add Quality Gates tab button after Metrics tab with
`data-testid="quality-gates-tab"`
- Apply same semantic HTML and styling patterns
- Set click handler to `setActiveTab('quality-gates')`
- Use label "✓ Quality Gates"

- Verify Checkpoints tab has `data-testid="checkpoint-tab"`
- Add data-testid to Overview and Context tabs if missing
===============================================================================

Task: 3

Reorganize panels to move CostDashboard and QualityGatesPanel from Overview to
dedicated tabs.

In `web-ui/src/components/Dashboard.tsx`:

**Create Metrics Tab Panel:**
- Remove CostDashboard from Overview tab conditional block
- Add new conditional: `{activeTab === 'metrics' && (...)}`
- Inside, add container div with `role="tabpanel"`, `id="metrics-panel"`,
`aria-labelledby="metrics-tab"`
- Preserve existing wrapper with `data-testid="metrics-panel"` and styling
`bg-white rounded-lg shadow p-6`
- Keep h2 header and CostDashboard component with `projectId` prop

**Create Quality Gates Tab Panel:**
- Remove QualityGatesPanel from Overview tab conditional block
- Add new conditional: `{activeTab === 'quality-gates' && (...)}`
- Inside, add container div with `role="tabpanel"`, `id="quality-gates-panel"`,
`aria-labelledby="quality-gates-tab"`
- Preserve ErrorBoundary wrapper with `key={qualityGatesPanelKey}` and retry
handler
- Keep inner div with `data-testid="quality-gates-panel"` and styling
- Maintain QualityGatesPanel with `projectId` and `tasks` props

**Verify Checkpoints Tab:**
- Confirm CheckpointList is in `{activeTab === 'checkpoints' && (...)}` block
- Ensure `data-testid="checkpoint-panel"` exists
- Verify semantic HTML: `role="tabpanel"`, `id="checkpoints-panel"`,
`aria-labelledby="checkpoint-tab"`
- Confirm CheckpointList has `projectId` and `refreshInterval={30000}` props

**Clean Up Overview Tab:**
- Remove CostDashboard and QualityGatesPanel from Overview tab
- Verify remaining panels are intact
- Check for no duplicate renderings

💡 Iterate on the plan with: @coderabbitai <feedback>

Example Feedback
- @coderabbitai You can skip phase 3. Add a simple unit test case for phase 2.
- @coderabbitai For assumption 1 go ahead with option 3 and replan.

[traycerai]

I have updated the Implementation Plan to reflect the recent changes in the ticket.

New Plan

Observations

The current Dashboard has 3 tabs (Overview, Context, Checkpoints), but the Overview tab is cluttered with 15 different panels stacked vertically. The Checkpoints tab already exists with proper data-testid="checkpoint-tab", and E2E tests for checkpoints should work. However, the Metrics panel (CostDashboard) and Quality Gates panel are embedded in the Overview tab, making navigation difficult. The issue recommends creating dedicated tabs for better UX and focused views.

Approach

Following Option B from the issue, we'll refactor the Dashboard to add dedicated tabs for Sprint 10 features: Quality Gates and Metrics. The Checkpoints tab already exists. We'll also optionally add a Tasks tab to group task-related panels. This approach improves UX with focused views, enables lazy loading for better performance, and matches test expectations without requiring test changes. The implementation involves updating the DashboardTab type and reorganizing panel rendering in Dashboard.tsx.

Implementation Steps

1. Update Dashboard Type Definitions

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

Update the DashboardTab type to include new tabs:

• Change from: 'overview' | 'context' | 'checkpoints'
• Change to: 'overview' | 'tasks' | 'quality-gates' | 'checkpoints' | 'metrics' | 'context'

This adds three new tab options: tasks, quality-gates, and metrics.

2. Add New Tab Buttons to Dashboard Navigation

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

Add four new tab buttons after the existing tabs in the navigation section:

Tasks Tab Button (after Overview tab):

• Add button with role="tab", aria-selected, and aria-controls="tasks-panel"
• Set data-testid="tasks-tab" for E2E testing
• Use same styling pattern as existing tabs
• Label: "Tasks"

Quality Gates Tab Button (after Tasks tab):

• Add button with role="tab", aria-selected, and aria-controls="quality-gates-panel"
• Set data-testid="quality-gates-tab" for E2E testing
• Use same styling pattern as existing tabs
• Label: "Quality Gates"

Metrics Tab Button (after Checkpoints tab):

• Add button with role="tab", aria-selected, and aria-controls="metrics-panel"
• Set data-testid="metrics-tab" for E2E testing
• Use same styling pattern as existing tabs
• Label: "Metrics"

Keep the existing Context tab at the end for consistency.

3. Reorganize Overview Tab Content

File: file:web-ui/src/components/Dashboard.tsx (lines 342-564)

Simplify the Overview tab to show only high-level status panels:

Keep on Overview:

• Discovery Progress (line 345)
• Session Status (lines 347-350)
• Chat Interface (lines 352-360)
• Progress Section (lines 362-411)
• Multi-Agent Team (lines 432-441)
• Agent State (lines 443-470)
• Recent Activity (lines 534-563)

Remove from Overview (move to dedicated tabs):

• Task Statistics → Move to Tasks tab
• Issues & Tasks (TaskTreeView) → Move to Tasks tab
• Blockers Panel → Move to Tasks tab
• Review Results Panel → Move to Tasks tab
• Lint Quality Trend → Move to Tasks tab
• Review Findings Panel → Move to Tasks tab
• Quality Gates Panel → Move to Quality Gates tab
• Metrics Panel → Move to Metrics tab

4. Create Tasks Tab Panel

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

Add new tab panel with activeTab === 'tasks' condition:

Structure:

{activeTab === 'tasks' && (
  <div role="tabpanel" id="tasks-panel" aria-labelledby="tasks-tab">
    <!-- Task Statistics Section -->
    <!-- Issues & Tasks Section (TaskTreeView) -->
    <!-- Blockers Panel -->
    <!-- Review Results Panel (conditional) -->
    <!-- Lint Quality Trend -->
    <!-- Review Findings Panel -->
  </div>
)}

Components to include:

• Task Statistics (from line 413-417)
• Issues & Tasks with TaskTreeView (from lines 419-430)
• Blockers Panel (from lines 472-478)
• Review Results Panel if selectedTaskForReview is set (from lines 480-488)
• Lint Quality Trend (from lines 490-497)
• Review Findings Panel (from lines 501-507)

All panels should maintain their existing data-testid attributes and styling.

5. Create Quality Gates Tab Panel

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

Add new tab panel with activeTab === 'quality-gates' condition:

Structure:

{activeTab === 'quality-gates' && (
  <div role="tabpanel" id="quality-gates-panel" aria-labelledby="quality-gates-tab">
    <!-- Quality Gates Panel with Error Boundary -->
  </div>
)}

Components to include:

• Move the entire Quality Gates Panel section (lines 509-523) including:
  • ErrorBoundary wrapper with qualityGatesPanelKey
  • QualityGatesPanel component with projectId and tasks props
  • Fallback component (qualityGatesFallback)
  • Error handler (handleQualityGatesError)

Keep the data-testid="quality-gates-panel" on the outer div.

6. Create Metrics Tab Panel

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

Add new tab panel with activeTab === 'metrics' condition:

Structure:

{activeTab === 'metrics' && (
  <div role="tabpanel" id="metrics-panel" aria-labelledby="metrics-tab">
    <div className="bg-white rounded-lg shadow p-6" data-testid="metrics-panel">
      <h2 className="text-lg font-semibold mb-4">📊 Cost & Token Metrics</h2>
      <CostDashboard projectId={projectId} />
    </div>
  </div>
)}

Components to include:

• Move the Metrics Panel section (lines 526-532)
• CostDashboard component with projectId prop
• Keep the data-testid="metrics-panel" attribute

The CostDashboard component already has comprehensive internal structure with token stats, cost breakdowns, and charts.

7. Verify Existing Checkpoints and Context Tabs

Files: file:web-ui/src/components/Dashboard.tsx (lines 614-622, 567-612)

No changes needed - these tabs already exist and are properly implemented:

Checkpoints Tab (lines 614-622):

• Has correct data-testid="checkpoint-tab" on button (line 326)
• Has correct data-testid="checkpoint-panel" on panel (line 617)
• Renders CheckpointList component with proper props

Context Tab (lines 567-612):

• Has proper tab button and panel structure
• Includes agent selector and ContextPanel component
• No changes required

8. Update Tab Order and Navigation Flow

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

Ensure tab order is logical:

1. Overview - High-level project status
2. Tasks - Task management and reviews
3. Quality Gates - Quality checks
4. Checkpoints - Checkpoint management (existing)
5. Metrics - Cost and token tracking
6. Context - Agent context management (existing)

This order groups related functionality and follows a natural workflow progression.

9. Testing Considerations

No test file changes required - the E2E tests already expect these tabs:

Checkpoint Tests (file:tests/e2e/test_checkpoint_ui.spec.ts):

• Already look for [data-testid="checkpoint-tab"] (line 29)
• Should work without changes

Metrics Tests (file:tests/e2e/test_metrics_ui.spec.ts):

• Currently scroll to metrics panel on Overview (lines 33-35)
• Will continue to work as data-testid="metrics-panel" is preserved
• Could be updated later to navigate to Metrics tab for better test isolation

Quality Gates Tests (if they exist):

• Will work with new data-testid="quality-gates-tab" and data-testid="quality-gates-panel"

Architecture Diagram

graph TD
    A[Dashboard Component] --> B[Tab Navigation]
    B --> C[Overview Tab]
    B --> D[Tasks Tab]
    B --> E[Quality Gates Tab]
    B --> F[Checkpoints Tab]
    B --> G[Metrics Tab]
    B --> H[Context Tab]
    
    C --> C1[Discovery Progress]
    C --> C2[Session Status]
    C --> C3[Chat Interface]
    C --> C4[Progress Section]
    C --> C5[Agent Status]
    C --> C6[Recent Activity]
    
    D --> D1[Task Statistics]
    D --> D2[TaskTreeView]
    D --> D3[Blockers Panel]
    D --> D4[Review Results]
    D --> D5[Lint Trends]
    
    E --> E1[QualityGatesPanel]
    E --> E2[ErrorBoundary]
    
    F --> F1[CheckpointList]
    
    G --> G1[CostDashboard]
    G1 --> G2[Token Stats]
    G1 --> G3[Cost Breakdown]
    G1 --> G4[Trend Charts]
    
    H --> H1[Agent Selector]
    H --> H2[ContextPanel]
    
    style A fill:#e1f5ff
    style B fill:#fff4e1
    style C fill:#e8f5e9
    style D fill:#e8f5e9
    style E fill:#e8f5e9
    style F fill:#e8f5e9
    style G fill:#e8f5e9
    style H fill:#e8f5e9

Loading

Tab Content Summary

Tab	Panels	Purpose	Data-TestID
Overview	Discovery, Session, Chat, Progress, Agents, Activity	High-level project status	overview-panel
Tasks	Statistics, Tree, Blockers, Reviews, Lint	Task management & quality	tasks-panel
Quality Gates	Quality checks panel	Quality gate validation	quality-gates-panel
Checkpoints	Checkpoint list	State management	checkpoint-panel
Metrics	Cost dashboard	Cost & token tracking	metrics-panel
Context	Agent context viewer	Multi-agent memory	context-panel

Benefits

• Better UX: Focused views reduce cognitive load
• Faster Performance: Lazy loading - only active tab renders
• Easier Navigation: Clear separation of concerns
• Test Compatibility: No test changes needed
• Scalability: Easy to add more features to appropriate tabs
• Reduced Clutter: Overview tab goes from 15 panels to 7 panels

Import In IDE

🤖 Prompt for AI Agents

## Observations

The current Dashboard has **3 tabs** (Overview, Context, Checkpoints), but the Overview tab is cluttered with **15 different panels** stacked vertically. The Checkpoints tab already exists with proper `data-testid="checkpoint-tab"`, and E2E tests for checkpoints should work. However, the Metrics panel (`CostDashboard`) and Quality Gates panel are embedded in the Overview tab, making navigation difficult. The issue recommends creating dedicated tabs for better UX and focused views.

## Approach

Following **Option B** from the issue, we'll refactor the Dashboard to add dedicated tabs for Sprint 10 features: **Quality Gates** and **Metrics**. The Checkpoints tab already exists. We'll also optionally add a **Tasks** tab to group task-related panels. This approach improves UX with focused views, enables lazy loading for better performance, and matches test expectations without requiring test changes. The implementation involves updating the `DashboardTab` type and reorganizing panel rendering in `Dashboard.tsx`.

## Implementation Steps

### 1. Update Dashboard Type Definitions

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

Update the `DashboardTab` type to include new tabs:
- Change from: `'overview' | 'context' | 'checkpoints'`
- Change to: `'overview' | 'tasks' | 'quality-gates' | 'checkpoints' | 'metrics' | 'context'`

This adds three new tab options: `tasks`, `quality-gates`, and `metrics`.

### 2. Add New Tab Buttons to Dashboard Navigation

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

Add four new tab buttons after the existing tabs in the navigation section:

**Tasks Tab Button** (after Overview tab):
- Add button with `role="tab"`, `aria-selected`, and `aria-controls="tasks-panel"`
- Set `data-testid="tasks-tab"` for E2E testing
- Use same styling pattern as existing tabs
- Label: "Tasks"

**Quality Gates Tab Button** (after Tasks tab):
- Add button with `role="tab"`, `aria-selected`, and `aria-controls="quality-gates-panel"`
- Set `data-testid="quality-gates-tab"` for E2E testing
- Use same styling pattern as existing tabs
- Label: "Quality Gates"

**Metrics Tab Button** (after Checkpoints tab):
- Add button with `role="tab"`, `aria-selected`, and `aria-controls="metrics-panel"`
- Set `data-testid="metrics-tab"` for E2E testing
- Use same styling pattern as existing tabs
- Label: "Metrics"

Keep the existing Context tab at the end for consistency.

### 3. Reorganize Overview Tab Content

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

Simplify the Overview tab to show only high-level status panels:

**Keep on Overview:**
- Discovery Progress (line 345)
- Session Status (lines 347-350)
- Chat Interface (lines 352-360)
- Progress Section (lines 362-411)
- Multi-Agent Team (lines 432-441)
- Agent State (lines 443-470)
- Recent Activity (lines 534-563)

**Remove from Overview** (move to dedicated tabs):
- Task Statistics → Move to Tasks tab
- Issues & Tasks (TaskTreeView) → Move to Tasks tab
- Blockers Panel → Move to Tasks tab
- Review Results Panel → Move to Tasks tab
- Lint Quality Trend → Move to Tasks tab
- Review Findings Panel → Move to Tasks tab
- Quality Gates Panel → Move to Quality Gates tab
- Metrics Panel → Move to Metrics tab

### 4. Create Tasks Tab Panel

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

Add new tab panel with `activeTab === 'tasks'` condition:

**Structure:**
```
{activeTab === 'tasks' && (
  <div role="tabpanel" id="tasks-panel" aria-labelledby="tasks-tab">
    <!-- Task Statistics Section -->
    <!-- Issues & Tasks Section (TaskTreeView) -->
    <!-- Blockers Panel -->
    <!-- Review Results Panel (conditional) -->
    <!-- Lint Quality Trend -->
    <!-- Review Findings Panel -->
  </div>
)}
```

**Components to include:**
- Task Statistics (from line 413-417)
- Issues & Tasks with TaskTreeView (from lines 419-430)
- Blockers Panel (from lines 472-478)
- Review Results Panel if `selectedTaskForReview` is set (from lines 480-488)
- Lint Quality Trend (from lines 490-497)
- Review Findings Panel (from lines 501-507)

All panels should maintain their existing `data-testid` attributes and styling.

### 5. Create Quality Gates Tab Panel

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

Add new tab panel with `activeTab === 'quality-gates'` condition:

**Structure:**
```
{activeTab === 'quality-gates' && (
  <div role="tabpanel" id="quality-gates-panel" aria-labelledby="quality-gates-tab">
    <!-- Quality Gates Panel with Error Boundary -->
  </div>
)}
```

**Components to include:**
- Move the entire Quality Gates Panel section (lines 509-523) including:
  - ErrorBoundary wrapper with `qualityGatesPanelKey`
  - QualityGatesPanel component with `projectId` and `tasks` props
  - Fallback component (`qualityGatesFallback`)
  - Error handler (`handleQualityGatesError`)

Keep the `data-testid="quality-gates-panel"` on the outer div.

### 6. Create Metrics Tab Panel

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

Add new tab panel with `activeTab === 'metrics'` condition:

**Structure:**
```
{activeTab === 'metrics' && (
  <div role="tabpanel" id="metrics-panel" aria-labelledby="metrics-tab">
    <div className="bg-white rounded-lg shadow p-6" data-testid="metrics-panel">
      <h2 className="text-lg font-semibold mb-4">📊 Cost & Token Metrics</h2>
      <CostDashboard projectId={projectId} />
    </div>
  </div>
)}
```

**Components to include:**
- Move the Metrics Panel section (lines 526-532)
- CostDashboard component with `projectId` prop
- Keep the `data-testid="metrics-panel"` attribute

The CostDashboard component already has comprehensive internal structure with token stats, cost breakdowns, and charts.

### 7. Verify Existing Checkpoints and Context Tabs

**Files:** `file:web-ui/src/components/Dashboard.tsx` (lines 614-622, 567-612)

**No changes needed** - these tabs already exist and are properly implemented:

**Checkpoints Tab** (lines 614-622):
- Has correct `data-testid="checkpoint-tab"` on button (line 326)
- Has correct `data-testid="checkpoint-panel"` on panel (line 617)
- Renders CheckpointList component with proper props

**Context Tab** (lines 567-612):
- Has proper tab button and panel structure
- Includes agent selector and ContextPanel component
- No changes required

### 8. Update Tab Order and Navigation Flow

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

Ensure tab order is logical:
1. **Overview** - High-level project status
2. **Tasks** - Task management and reviews
3. **Quality Gates** - Quality checks
4. **Checkpoints** - Checkpoint management (existing)
5. **Metrics** - Cost and token tracking
6. **Context** - Agent context management (existing)

This order groups related functionality and follows a natural workflow progression.

### 9. Testing Considerations

**No test file changes required** - the E2E tests already expect these tabs:

**Checkpoint Tests** (`file:tests/e2e/test_checkpoint_ui.spec.ts`):
- Already look for `[data-testid="checkpoint-tab"]` (line 29)
- Should work without changes

**Metrics Tests** (`file:tests/e2e/test_metrics_ui.spec.ts`):
- Currently scroll to metrics panel on Overview (lines 33-35)
- Will continue to work as `data-testid="metrics-panel"` is preserved
- Could be updated later to navigate to Metrics tab for better test isolation

**Quality Gates Tests** (if they exist):
- Will work with new `data-testid="quality-gates-tab"` and `data-testid="quality-gates-panel"`

## Architecture Diagram

```mermaid
graph TD
    A[Dashboard Component] --> B[Tab Navigation]
    B --> C[Overview Tab]
    B --> D[Tasks Tab]
    B --> E[Quality Gates Tab]
    B --> F[Checkpoints Tab]
    B --> G[Metrics Tab]
    B --> H[Context Tab]
    
    C --> C1[Discovery Progress]
    C --> C2[Session Status]
    C --> C3[Chat Interface]
    C --> C4[Progress Section]
    C --> C5[Agent Status]
    C --> C6[Recent Activity]
    
    D --> D1[Task Statistics]
    D --> D2[TaskTreeView]
    D --> D3[Blockers Panel]
    D --> D4[Review Results]
    D --> D5[Lint Trends]
    
    E --> E1[QualityGatesPanel]
    E --> E2[ErrorBoundary]
    
    F --> F1[CheckpointList]
    
    G --> G1[CostDashboard]
    G1 --> G2[Token Stats]
    G1 --> G3[Cost Breakdown]
    G1 --> G4[Trend Charts]
    
    H --> H1[Agent Selector]
    H --> H2[ContextPanel]
    
    style A fill:#e1f5ff
    style B fill:#fff4e1
    style C fill:#e8f5e9
    style D fill:#e8f5e9
    style E fill:#e8f5e9
    style F fill:#e8f5e9
    style G fill:#e8f5e9
    style H fill:#e8f5e9
```

## Tab Content Summary

| Tab | Panels | Purpose | Data-TestID |
|-----|--------|---------|-------------|
| **Overview** | Discovery, Session, Chat, Progress, Agents, Activity | High-level project status | `overview-panel` |
| **Tasks** | Statistics, Tree, Blockers, Reviews, Lint | Task management & quality | `tasks-panel` |
| **Quality Gates** | Quality checks panel | Quality gate validation | `quality-gates-panel` |
| **Checkpoints** | Checkpoint list | State management | `checkpoint-panel` |
| **Metrics** | Cost dashboard | Cost & token tracking | `metrics-panel` |
| **Context** | Agent context viewer | Multi-agent memory | `context-panel` |

## Benefits

- **Better UX**: Focused views reduce cognitive load
- **Faster Performance**: Lazy loading - only active tab renders
- **Easier Navigation**: Clear separation of concerns
- **Test Compatibility**: No test changes needed
- **Scalability**: Easy to add more features to appropriate tabs
- **Reduced Clutter**: Overview tab goes from 15 panels to 7 panels

---

Execution Information

Branch: main
Commit: 360e111