Implement Task Statistics Display in Dashboard

[frankbria]

Problem

Task statistics testids are not implemented in the current Dashboard.

Affected Tests

• test_dashboard.spec.ts:189 - should display task progress and statistics

Current State

Dashboard lacks dedicated task stats components showing:

• Total tasks
• Completed tasks
• Blocked tasks
• In-progress tasks

Proposed Solution

Add task statistics display to Dashboard:

1. Create dedicated task stats component
2. Display counts for each task status
3. Add proper testids for E2E testing
4. Update in real-time via WebSocket

Acceptance Criteria

• Task stats component created
• All 4 statistics displayed (total, completed, blocked, in-progress)
• Testids added: total-tasks, completed-tasks, blocked-tasks, in-progress-tasks
• E2E test passes
• Skip decorator removed

Files

• tests/e2e/test_dashboard.spec.ts:189 (test)
• Dashboard/TaskStats component (implementation)

[traycerai]

Plan

Observations

The Dashboard component (file:web-ui/src/components/Dashboard.tsx) already has access to real-time task data through the useAgentState() hook, which provides a tasks array updated via WebSocket. Task statuses are defined as 'pending', 'in_progress', 'blocked', and 'completed' in file:web-ui/src/types/agentState.ts. The E2E test at line 189 in file:tests/e2e/test_dashboard.spec.ts expects four testids: total-tasks, completed-tasks, blocked-tasks, and in-progress-tasks. The codebase follows a pattern of organizing feature-specific components in subdirectories (metrics, reviews, checkpoints) with consistent styling using Tailwind CSS and data-testid attributes for E2E testing.

Approach

Create a dedicated TaskStats component in a new tasks subdirectory following the established patterns from CostDashboard and ReviewSummary components. The component will consume task data from the useAgentState() hook, calculate statistics by filtering tasks based on their status, and display them in a grid layout with colored stat cards. Since the task data is already updated in real-time via WebSocket through the AgentStateProvider, no additional WebSocket subscription is needed. The component will be integrated into the Dashboard's Overview tab and the E2E test skip decorator will be removed.

Implementation Steps

1. Create TaskStats Component

Location: file:web-ui/src/components/tasks/TaskStats.tsx

Create a new React component that:

• Accepts no props (uses useAgentState() hook internally)
• Imports useAgentState from @/hooks/useAgentState
• Imports Task type from @/types/agentState
• Uses useMemo to calculate statistics from the tasks array:
  • Total tasks: tasks.length
  • Completed tasks: Filter tasks where status === 'completed'
  • Blocked tasks: Filter tasks where status === 'blocked'
  • In-progress tasks: Filter tasks where status === 'in_progress'
• Renders a grid layout (2x2 on mobile, 4 columns on desktop) with stat cards
• Each stat card includes:
  • A colored background (blue for total, green for completed, red for blocked, yellow for in-progress)
  • A label describing the statistic
  • The count value with appropriate data-testid
  • An emoji icon for visual appeal

Stat Card Specifications:

Total Tasks:
- data-testid="total-tasks"
- Background: bg-blue-50
- Text color: text-blue-600
- Icon: 📋

Completed Tasks:
- data-testid="completed-tasks"
- Background: bg-green-50
- Text color: text-green-600
- Icon: ✅

Blocked Tasks:
- data-testid="blocked-tasks"
- Background: bg-red-50
- Text color: text-red-600
- Icon: 🚫

In-Progress Tasks:
- data-testid="in-progress-tasks"
- Background: bg-yellow-50
- Text color: text-yellow-600
- Icon: ⚙️

Component Structure:

• Wrap the entire component in a div with className "task-stats"
• Use grid layout: grid grid-cols-2 md:grid-cols-4 gap-4
• Each stat card: p-4 rounded-lg with appropriate background color
• Label: text-sm text-gray-600
• Value: text-3xl font-bold with appropriate text color
• Export as default with React.memo() for performance optimization

2. Integrate TaskStats into Dashboard

Location: file:web-ui/src/components/Dashboard.tsx

• Import the TaskStats component: import TaskStats from './tasks/TaskStats'
• Add the TaskStats component in the Overview tab panel (around line 340-350, after the Progress section and before the Issues & Tasks section)
• Wrap it in a white card container matching other sections:

  <div className="bg-white rounded-lg shadow p-6 mb-6">
    <h2 className="text-lg font-semibold mb-4">📊 Task Statistics</h2>
    <TaskStats />
  </div>
  

3. Update E2E Test

Location: file:tests/e2e/test_dashboard.spec.ts

At line 189:

• Remove the test.skip decorator, changing it to test
• Remove the comment on line 190-191 about testids not being implemented
• The test logic (lines 193-203) is already correct and will pass once the component is implemented

4. Verification Steps

After implementation, verify:

• The TaskStats component displays on the Dashboard Overview tab
• All four statistics show correct counts based on task statuses
• Statistics update in real-time when WebSocket messages arrive (task_status_changed, task_assigned, etc.)
• The E2E test passes: npm run test:e2e -- --grep "should display task progress and statistics"
• Component follows accessibility best practices (semantic HTML, proper contrast ratios)
• Component is responsive on mobile and desktop viewports

Component Data Flow

sequenceDiagram
    participant WS as WebSocket
    participant Provider as AgentStateProvider
    participant Reducer as agentReducer
    participant Hook as useAgentState
    participant TaskStats as TaskStats Component
    participant Dashboard as Dashboard

    WS->>Provider: task_status_changed message
    Provider->>Reducer: Dispatch TASK_STATUS_CHANGED
    Reducer->>Reducer: Update tasks array
    Reducer->>Provider: Return new state
    Provider->>Hook: Provide updated state
    Hook->>TaskStats: tasks array updated
    TaskStats->>TaskStats: Recalculate statistics (useMemo)
    TaskStats->>Dashboard: Re-render with new counts

Loading

File Structure

web-ui/src/components/
├── tasks/
│   └── TaskStats.tsx (NEW)
├── Dashboard.tsx (MODIFIED)
└── ...

tests/e2e/
└── test_dashboard.spec.ts (MODIFIED - remove skip)

Testing Considerations

The component will be automatically tested by:

• E2E Test: file:tests/e2e/test_dashboard.spec.ts line 189 verifies all testids are present and contain numeric values
• Real-time Updates: Existing WebSocket integration tests in file:web-ui/tests/integration/blocker-websocket.test.ts demonstrate the pattern for testing real-time updates
• Unit Tests (optional): Create file:web-ui/tests/components/tasks/TaskStats.test.tsx following the pattern from file:web-ui/tests/components/CostDashboard.test.tsx to test:
  • Correct calculation of statistics
  • Rendering with empty tasks array
  • Rendering with various task status combinations

Import In IDE

🤖 Prompt for AI Agents

## Observations

The Dashboard component (file:web-ui/src/components/Dashboard.tsx) already has access to real-time task data through the `useAgentState()` hook, which provides a `tasks` array updated via WebSocket. Task statuses are defined as 'pending', 'in_progress', 'blocked', and 'completed' in file:web-ui/src/types/agentState.ts. The E2E test at line 189 in file:tests/e2e/test_dashboard.spec.ts expects four testids: `total-tasks`, `completed-tasks`, `blocked-tasks`, and `in-progress-tasks`. The codebase follows a pattern of organizing feature-specific components in subdirectories (metrics, reviews, checkpoints) with consistent styling using Tailwind CSS and data-testid attributes for E2E testing.

## Approach

Create a dedicated TaskStats component in a new `tasks` subdirectory following the established patterns from CostDashboard and ReviewSummary components. The component will consume task data from the `useAgentState()` hook, calculate statistics by filtering tasks based on their status, and display them in a grid layout with colored stat cards. Since the task data is already updated in real-time via WebSocket through the AgentStateProvider, no additional WebSocket subscription is needed. The component will be integrated into the Dashboard's Overview tab and the E2E test skip decorator will be removed.

## Implementation Steps

### 1. Create TaskStats Component

**Location**: `file:web-ui/src/components/tasks/TaskStats.tsx`

Create a new React component that:
- Accepts no props (uses `useAgentState()` hook internally)
- Imports `useAgentState` from `@/hooks/useAgentState`
- Imports `Task` type from `@/types/agentState`
- Uses `useMemo` to calculate statistics from the tasks array:
  - **Total tasks**: `tasks.length`
  - **Completed tasks**: Filter tasks where `status === 'completed'`
  - **Blocked tasks**: Filter tasks where `status === 'blocked'`
  - **In-progress tasks**: Filter tasks where `status === 'in_progress'`
- Renders a grid layout (2x2 on mobile, 4 columns on desktop) with stat cards
- Each stat card includes:
  - A colored background (blue for total, green for completed, red for blocked, yellow for in-progress)
  - A label describing the statistic
  - The count value with appropriate data-testid
  - An emoji icon for visual appeal

**Stat Card Specifications**:
```
Total Tasks:
- data-testid="total-tasks"
- Background: bg-blue-50
- Text color: text-blue-600
- Icon: 📋

Completed Tasks:
- data-testid="completed-tasks"
- Background: bg-green-50
- Text color: text-green-600
- Icon: ✅

Blocked Tasks:
- data-testid="blocked-tasks"
- Background: bg-red-50
- Text color: text-red-600
- Icon: 🚫

In-Progress Tasks:
- data-testid="in-progress-tasks"
- Background: bg-yellow-50
- Text color: text-yellow-600
- Icon: ⚙️
```

**Component Structure**:
- Wrap the entire component in a div with className "task-stats"
- Use grid layout: `grid grid-cols-2 md:grid-cols-4 gap-4`
- Each stat card: `p-4 rounded-lg` with appropriate background color
- Label: `text-sm text-gray-600`
- Value: `text-3xl font-bold` with appropriate text color
- Export as default with `React.memo()` for performance optimization

### 2. Integrate TaskStats into Dashboard

**Location**: `file:web-ui/src/components/Dashboard.tsx`

- Import the TaskStats component: `import TaskStats from './tasks/TaskStats'`
- Add the TaskStats component in the Overview tab panel (around line 340-350, after the Progress section and before the Issues & Tasks section)
- Wrap it in a white card container matching other sections:
  ```
  <div className="bg-white rounded-lg shadow p-6 mb-6">
    <h2 className="text-lg font-semibold mb-4">📊 Task Statistics</h2>
    <TaskStats />
  </div>
  ```

### 3. Update E2E Test

**Location**: `file:tests/e2e/test_dashboard.spec.ts`

At line 189:
- Remove the `test.skip` decorator, changing it to `test`
- Remove the comment on line 190-191 about testids not being implemented
- The test logic (lines 193-203) is already correct and will pass once the component is implemented

### 4. Verification Steps

After implementation, verify:
- The TaskStats component displays on the Dashboard Overview tab
- All four statistics show correct counts based on task statuses
- Statistics update in real-time when WebSocket messages arrive (task_status_changed, task_assigned, etc.)
- The E2E test passes: `npm run test:e2e -- --grep "should display task progress and statistics"`
- Component follows accessibility best practices (semantic HTML, proper contrast ratios)
- Component is responsive on mobile and desktop viewports

## Component Data Flow

```mermaid
sequenceDiagram
    participant WS as WebSocket
    participant Provider as AgentStateProvider
    participant Reducer as agentReducer
    participant Hook as useAgentState
    participant TaskStats as TaskStats Component
    participant Dashboard as Dashboard

    WS->>Provider: task_status_changed message
    Provider->>Reducer: Dispatch TASK_STATUS_CHANGED
    Reducer->>Reducer: Update tasks array
    Reducer->>Provider: Return new state
    Provider->>Hook: Provide updated state
    Hook->>TaskStats: tasks array updated
    TaskStats->>TaskStats: Recalculate statistics (useMemo)
    TaskStats->>Dashboard: Re-render with new counts
```

## File Structure

```
web-ui/src/components/
├── tasks/
│   └── TaskStats.tsx (NEW)
├── Dashboard.tsx (MODIFIED)
└── ...

tests/e2e/
└── test_dashboard.spec.ts (MODIFIED - remove skip)
```

## Testing Considerations

The component will be automatically tested by:
- **E2E Test**: file:tests/e2e/test_dashboard.spec.ts line 189 verifies all testids are present and contain numeric values
- **Real-time Updates**: Existing WebSocket integration tests in file:web-ui/__tests__/integration/blocker-websocket.test.ts demonstrate the pattern for testing real-time updates
- **Unit Tests** (optional): Create file:web-ui/__tests__/components/tasks/TaskStats.test.tsx following the pattern from file:web-ui/__tests__/components/CostDashboard.test.tsx to test:
  - Correct calculation of statistics
  - Rendering with empty tasks array
  - Rendering with various task status combinations

---

Execution Information

Branch: main
Commit: dbd2813

---

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

[frankbria]

✅ Implementation Complete

All acceptance criteria have been met:

What Was Implemented

1. TaskStats Component ()

• Location: New component in
• Data Source: Uses useAgentState() hook for real-time task data via WebSocket
• Performance: Optimized with useMemo and React.memo()
• Responsive: Grid layout (2x2 mobile, 4 columns desktop)

2. Statistics Displayed

All 4 task statistics with proper testids:

• 📋 Total Tasks - data-testid="total-tasks" (blue card)
• ✅ Completed - data-testid="completed-tasks" (green card)
• 🚫 Blocked - data-testid="blocked-tasks" (red card)
• ⚙️ In Progress - data-testid="in-progress-tasks" (yellow card)

3. Dashboard Integration

• File: web-ui/src/components/Dashboard.tsx
• Location: Overview tab, between Progress and Issues & Tasks sections
• Styling: White card container matching other dashboard sections

4. E2E Test Updates

• File: tests/e2e/test_dashboard.spec.ts:189
• Changes: Removed test.skip decorator
• Status: ✅ PASSING on all 5 browsers

Test Results

✓ [chromium] - 2.0s
✓ [firefox] - 3.6s  
✓ [webkit] - 2.6s
✓ [Mobile Chrome] - 2.3s
✓ [Mobile Safari] - 2.5s

5 passed (6.8s)

Acceptance Criteria Status

• ✅ Task stats component created
• ✅ All 4 statistics displayed (total, completed, blocked, in-progress)
• ✅ Testids added: total-tasks, completed-tasks, blocked-tasks, in-progress-tasks
• ✅ E2E test passes
• ✅ Skip decorator removed

Files Changed

1. web-ui/src/components/tasks/TaskStats.tsx (NEW)
2. web-ui/src/components/Dashboard.tsx (MODIFIED - added import and integration)
3. tests/e2e/test_dashboard.spec.ts (MODIFIED - removed skip)

The TaskStats component is now live and updates in real-time as task statuses change via WebSocket.

[frankbria]

Closing as all acceptance criteria have been met. TaskStats component is implemented and E2E tests are passing.