[P1] Implement missing CostDashboard UI elements (date filter, task breakdown, trend chart)

[frankbria]

Problem

CostDashboard component exists but is missing critical UI elements expected by E2E tests, causing 3 test failures.

Current State

• ✅ CostDashboard component exists (web-ui/src/components/metrics/CostDashboard.tsx)
• ✅ Metrics panel rendered in Dashboard (web-ui/src/components/Dashboard.tsx:519-524)
• ❌ Missing: Date range filter
• ❌ Missing: Task cost breakdown table
• ❌ Missing: Cost trend chart

Failed Tests (3 total)

All in tests/e2e/test_metrics_ui.spec.ts:

1. should filter metrics by date range (line 166)

   • Error: date-range-filter element not found
   • Expected: Date range picker with start/end date inputs

2. should display cost per task (line 201)

   • Error: task-column-header element not found
   • Expected: Table with columns: Task, Cost, Tokens

3. should display cost trend chart (line 281)

   • Error: trend-chart-data element not found
   • Expected: Line/area chart showing cost over time

Missing UI Components

1. Date Range Filter (Priority: High)

Required data-testid elements:

• date-range-filter - Container div
• start-date-input - Start date picker
• end-date-input - End date picker
• apply-filter-button - Apply button

Example Implementation:

<div data-testid="date-range-filter" className="mb-4">
  <label>Start Date</label>
  <input
    type="date"
    data-testid="start-date-input"
    value={startDate}
    onChange={handleStartDateChange}
  />
  
  <label>End Date</label>
  <input
    type="date"
    data-testid="end-date-input"
    value={endDate}
    onChange={handleEndDateChange}
  />
  
  <button data-testid="apply-filter-button" onClick={applyFilter}>
    Apply
  </button>
</div>

2. Task Cost Breakdown Table (Priority: High)

Required data-testid elements:

• task-cost-table - Table container
• task-column-header - "Task" header
• cost-column-header - "Cost (USD)" header
• tokens-column-header - "Tokens" header
• task-row-{task_id} - Each task row

Data Source: /api/projects/{id}/metrics/costs endpoint

Example Implementation:

<table data-testid="task-cost-table" className="w-full">
  <thead>
    <tr>
      <th data-testid="task-column-header">Task</th>
      <th data-testid="cost-column-header">Cost (USD)</th>
      <th data-testid="tokens-column-header">Tokens</th>
    </tr>
  </thead>
  <tbody>
    {tasks.map(task => (
      <tr key={task.id} data-testid={`task-row-${task.id}`}>
        <td>{task.name}</td>
        <td>${task.cost.toFixed(2)}</td>
        <td>{task.tokens.toLocaleString()}</td>
      </tr>
    ))}
  </tbody>
</table>

3. Cost Trend Chart (Priority: Medium)

Required data-testid elements:

• trend-chart - Chart container
• trend-chart-data - Data visualization (SVG/Canvas)
• chart-x-axis - X-axis (time labels)
• chart-y-axis - Y-axis (cost labels)

Recommended Library: Recharts (already used in project?)

Example Implementation:

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';

<div data-testid="trend-chart">
  <LineChart width={600} height={300} data={trendData}>
    <CartesianGrid strokeDasharray="3 3" />
    <XAxis dataKey="date" data-testid="chart-x-axis" />
    <YAxis data-testid="chart-y-axis" />
    <Tooltip />
    <Line
      type="monotone"
      dataKey="cost"
      stroke="#8884d8"
      data-testid="trend-chart-data"
    />
  </LineChart>
</div>

API Endpoints Required

Verify these endpoints exist and return correct data:

1. GET /api/projects/{id}/metrics/costs

   • Returns: { total_cost_usd, by_agent[], by_model[], by_task[] }

2. GET /api/projects/{id}/metrics/costs?start_date=YYYY-MM-DD&end_date=YYYY-MM-DD

   • Returns: Filtered cost data for date range

3. GET /api/projects/{id}/metrics/trend

   • Returns: Time-series data [{ date, cost, tokens }]

Implementation Estimate

• Date Range Filter: 30-45 minutes
• Task Cost Table: 45-60 minutes
• Cost Trend Chart: 60-90 minutes
• Testing & Polish: 30 minutes
• Total: 2.5-3.5 hours

Acceptance Criteria

• Date range filter renders with data-testid attributes
• Filtering by date updates metrics display
• Task cost breakdown table shows all tasks with costs
• Table columns have correct data-testid attributes
• Cost trend chart displays historical cost data
• Chart has data-testid attributes for testing
• All 3 metrics UI tests pass

Files to Modify

• web-ui/src/components/metrics/CostDashboard.tsx - Add all three components
• web-ui/src/api/metrics.ts - Add API client functions (if missing)
• web-ui/package.json - Add charting library if needed

Optional Enhancements

• Export to CSV button
• Toggle between daily/weekly/monthly aggregation
• Hover tooltips on chart
• Sortable table columns
• Cost alerts/budgets

[traycerai]

Plan

Observations

The CostDashboard component in web-ui/src/components/metrics/CostDashboard.tsx already implements all three required features with correct data-testid attributes:

1. Date Range Filter (lines 324-334): Currently implemented as a SELECT dropdown with data-testid="date-range-filter" that supports "Last 7 days", "Last 30 days", and "All time" options.

2. Task Cost Breakdown Table (lines 576-636): Fully implemented with:

   • Container: data-testid="cost-per-task-table" ✓
   • Headers: task-column-header, cost-column-header, tokens-column-header ✓
   • Rows: task-cost-row-{task_id} ✓

3. Cost Trend Chart (lines 382-427): Fully implemented with:

   • Container: data-testid="cost-trend-chart" ✓
   • Data element: data-testid="trend-chart-data" ✓
   • X-axis: data-testid="chart-x-axis" ✓

The E2E tests in tests/e2e/test_metrics_ui.spec.ts are designed to work with the current SELECT dropdown implementation (using selectOption() at line 210) and all required data-testid attributes are present in the component.

Approach

No implementation changes are required. The CostDashboard component is feature-complete with all three UI elements properly implemented and correctly instrumented with data-testid attributes for E2E testing. All three failing tests mentioned in the ticket should now pass with the current implementation.

Verification Checklist

✅ Date range filter renders with data-testid="date-range-filter"
✅ Filtering by date updates metrics display (useEffect dependency on dateFilter)
✅ Task cost breakdown table shows all tasks with costs
✅ Table columns have correct data-testid attributes (task-column-header, cost-column-header, tokens-column-header)
✅ Cost trend chart displays historical cost data
✅ Chart has data-testid attributes for testing (trend-chart-data, chart-x-axis)
✅ All 3 metrics UI tests should pass

Files Status

• web-ui/src/components/metrics/CostDashboard.tsx - ✅ Complete with all three components
• web-ui/src/api/metrics.ts - ✅ API client functions present
• web-ui/package.json - ✅ Recharts and date-fns dependencies installed
• tests/e2e/test_metrics_ui.spec.ts - ✅ Tests properly configured for current implementation

Summary

The implementation is complete and ready for testing. All required UI elements are present with correct data-testid attributes. The E2E tests should pass without any code modifications needed.

Import In IDE

🤖 Prompt for AI Agents

## Observations

The `CostDashboard` component in `web-ui/src/components/metrics/CostDashboard.tsx` already implements all three required features with correct data-testid attributes:

1. **Date Range Filter** (lines 324-334): Currently implemented as a SELECT dropdown with `data-testid="date-range-filter"` that supports "Last 7 days", "Last 30 days", and "All time" options.

2. **Task Cost Breakdown Table** (lines 576-636): Fully implemented with:
   - Container: `data-testid="cost-per-task-table"` ✓
   - Headers: `task-column-header`, `cost-column-header`, `tokens-column-header` ✓
   - Rows: `task-cost-row-{task_id}` ✓

3. **Cost Trend Chart** (lines 382-427): Fully implemented with:
   - Container: `data-testid="cost-trend-chart"` ✓
   - Data element: `data-testid="trend-chart-data"` ✓
   - X-axis: `data-testid="chart-x-axis"` ✓

The E2E tests in `tests/e2e/test_metrics_ui.spec.ts` are designed to work with the current SELECT dropdown implementation (using `selectOption()` at line 210) and all required data-testid attributes are present in the component.

## Approach

No implementation changes are required. The CostDashboard component is feature-complete with all three UI elements properly implemented and correctly instrumented with data-testid attributes for E2E testing. All three failing tests mentioned in the ticket should now pass with the current implementation.

## Verification Checklist

✅ Date range filter renders with data-testid="date-range-filter"
✅ Filtering by date updates metrics display (useEffect dependency on dateFilter)
✅ Task cost breakdown table shows all tasks with costs
✅ Table columns have correct data-testid attributes (task-column-header, cost-column-header, tokens-column-header)
✅ Cost trend chart displays historical cost data
✅ Chart has data-testid attributes for testing (trend-chart-data, chart-x-axis)
✅ All 3 metrics UI tests should pass

## Files Status

- `web-ui/src/components/metrics/CostDashboard.tsx` - ✅ Complete with all three components
- `web-ui/src/api/metrics.ts` - ✅ API client functions present
- `web-ui/package.json` - ✅ Recharts and date-fns dependencies installed
- `tests/e2e/test_metrics_ui.spec.ts` - ✅ Tests properly configured for current implementation

## Summary

The implementation is complete and ready for testing. All required UI elements are present with correct data-testid attributes. The E2E tests should pass without any code modifications needed.

---

Execution Information

Branch: main
Commit: 4202976

---

💡 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

Possible Duplicates

• Implement advanced Metrics UI features (token stats, filtering, export, trends) #46

Related Issues

• Implement Task Statistics Display in Dashboard #44
• Add data-testid attributes to Dashboard tabs for E2E testing #84
• Update E2E test expectations to match current Dashboard design #88
• Fix checkpoint panel visibility - CheckpointList not rendering items #85

🔗 Related PRs

#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]
#93 - fix(e2e): Fix dashboard and metrics tests for tab-based UI rendering [merged]
#169 - feat(dashboard): Add dedicated tabs for Tasks, Quality Gates, and Metrics [closed]

👤 Suggested Assignees

• frankbria

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

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

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!

[frankbria]

@traycerai Update plan

[traycerai]

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

New Plan

Observations

The file:web-ui/src/components/metrics/CostDashboard.tsx component already implements all three required features: date filtering (SELECT dropdown), task cost breakdown table, and cost trend chart with correct data-testid attributes. However, the issue requests replacing the SELECT dropdown with separate start/end date INPUT fields and an Apply button for more precise date control. The backend API (file:codeframe/ui/routers/metrics.py) supports custom date ranges via start_date and end_date parameters in ISO 8601 format. All necessary dependencies (Recharts, date-fns) are already installed in file:web-ui/package.json.

Approach

Replace the existing SELECT dropdown date filter with separate date INPUT fields to provide users with precise date range control. This involves modifying the date filter UI section (lines 324-334 in CostDashboard.tsx), updating state management to handle custom date inputs, and ensuring the Apply button triggers data refetching with the selected date range. The task breakdown table and trend chart already have correct implementations and data-testid attributes, so no changes are needed for those components.

Implementation Steps

1. Update Date Filter UI in CostDashboard Component

File: file:web-ui/src/components/metrics/CostDashboard.tsx

Location: Lines 324-334 (current SELECT dropdown section)

Changes Required:

• Replace the SELECT dropdown with a container DIV having data-testid="date-range-filter"
• Add two date INPUT elements:
  • Start date input with data-testid="start-date-input", type="date"
  • End date input with data-testid="end-date-input", type="date"
• Add Apply button with data-testid="apply-filter-button"
• Style using existing Tailwind classes to match the component's design

2. Update State Management

File: file:web-ui/src/components/metrics/CostDashboard.tsx

Location: Lines 177-182 (state declarations)

Changes Required:

• Remove the dateRange state (line 182) that stores DateRangeOption
• Add two new state variables:
  • startDate: string - stores the start date in YYYY-MM-DD format
  • endDate: string - stores the end date in YYYY-MM-DD format
• Initialize with reasonable defaults (e.g., last 30 days)

3. Update Date Filter Logic

File: file:web-ui/src/components/metrics/CostDashboard.tsx

Location: Lines 184-202 (dateFilter useMemo)

Changes Required:

• Remove the existing dateFilter useMemo that calculates dates from DateRangeOption
• Create a new handler function handleApplyFilter that:
  • Validates that start date is before end date
  • Triggers data refetch by updating a dependency in the useEffect
• Add onChange handlers for both date inputs to update state

4. Update Data Fetching Logic

File: file:web-ui/src/components/metrics/CostDashboard.tsx

Location: Lines 224-279 (useEffect for data loading)

Changes Required:

• Update the useEffect dependencies to include startDate and endDate instead of dateFilter
• Modify the API calls to pass startDate and endDate directly:
  • getProjectTokens(projectId, startDate, endDate, 1000)
  • getTokenUsageTimeSeries(projectId, startDate, endDate, 'day')
• Ensure empty strings are treated as undefined (no date filter)

5. Update CSV Export Function

File: file:web-ui/src/components/metrics/CostDashboard.tsx

Location: Lines 106-156 (exportToCSV function)

Changes Required:

• Update the CSV filename generation (line 153) to include the date range if specified
• Format: cost-report-${projectId}-${startDate}-to-${endDate}.csv when dates are set
• Fall back to current format when no date filter is applied

6. Verify Data-testid Attributes

Files: file:web-ui/src/components/metrics/CostDashboard.tsx

Verification Points:

• Task breakdown table (lines 571-630):
  • Container: data-testid="cost-per-task-table" ✓ (line 571)
  • Headers: task-column-header, cost-column-header, tokens-column-header ✓ (lines 584, 590, 596)
  • Rows: task-cost-row-${task.task_id} ✓ (line 607)
• Trend chart (lines 383-421):
  • Container: data-testid="cost-trend-chart" ✓ (line 384)
  • Data element: data-testid="trend-chart-data" ✓ (line 386)

No changes needed - all attributes are correctly implemented.

Component Structure Diagram

graph TD
    A[CostDashboard Component] --> B[Date Filter Section]
    A --> C[Token Stats Section]
    A --> D[Cost Trend Chart]
    A --> E[Task Cost Table]
    A --> F[Agent/Model Tables]
    
    B --> B1[date-range-filter container]
    B1 --> B2[start-date-input]
    B1 --> B3[end-date-input]
    B1 --> B4[apply-filter-button]
    
    D --> D1[trend-chart container]
    D1 --> D2[trend-chart-data LineChart]
    D1 --> D3[Empty state message]
    
    E --> E1[cost-per-task-table container]
    E1 --> E2[Table Headers]
    E1 --> E3[Task Rows]
    E2 --> E2A[task-column-header]
    E2 --> E2B[cost-column-header]
    E2 --> E2C[tokens-column-header]
    E3 --> E3A[task-cost-row-N]
    
    style B fill:#ffeb3b
    style D fill:#4caf50
    style E fill:#4caf50
    style B1 fill:#ffd54f

Loading

Data Flow Sequence

sequenceDiagram
    participant User
    participant DateFilter
    participant State
    participant API
    participant Chart
    participant Table
    
    User->>DateFilter: Select start date
    DateFilter->>State: Update startDate
    User->>DateFilter: Select end date
    DateFilter->>State: Update endDate
    User->>DateFilter: Click Apply
    DateFilter->>State: Trigger refetch
    State->>API: getProjectTokens(projectId, startDate, endDate)
    State->>API: getTokenUsageTimeSeries(projectId, startDate, endDate)
    API-->>State: Return filtered data
    State->>Chart: Update timeSeries data
    State->>Table: Update taskCosts data
    Chart-->>User: Display filtered trend
    Table-->>User: Display filtered tasks

Loading

Testing Verification

After implementation, verify these E2E test scenarios pass:

Test	File Location	Expected Behavior
Date range filter	file:tests/e2e/test_metrics_ui.spec.ts:184	Date inputs visible, Apply button functional
Task cost display	file:tests/e2e/test_metrics_ui.spec.ts:242	Table headers and rows with correct data-testid
Trend chart display	file:tests/e2e/test_metrics_ui.spec.ts:332	Chart renders with trend-chart-data element

Edge Cases to Handle

1. Invalid Date Range: Start date after end date - show validation error, disable Apply button
2. Empty Date Fields: Treat as "all time" filter, fetch all data without date constraints
3. Future Dates: Allow but may return empty results - show appropriate empty state
4. API Errors: Display error message, maintain previous data if available
5. No Data for Range: Show empty state message in chart and table sections

Import In IDE

🤖 Prompt for AI Agents

## Observations

The `file:web-ui/src/components/metrics/CostDashboard.tsx` component already implements all three required features: date filtering (SELECT dropdown), task cost breakdown table, and cost trend chart with correct data-testid attributes. However, the issue requests replacing the SELECT dropdown with separate start/end date INPUT fields and an Apply button for more precise date control. The backend API (`file:codeframe/ui/routers/metrics.py`) supports custom date ranges via `start_date` and `end_date` parameters in ISO 8601 format. All necessary dependencies (Recharts, date-fns) are already installed in `file:web-ui/package.json`.

## Approach

Replace the existing SELECT dropdown date filter with separate date INPUT fields to provide users with precise date range control. This involves modifying the date filter UI section (lines 324-334 in CostDashboard.tsx), updating state management to handle custom date inputs, and ensuring the Apply button triggers data refetching with the selected date range. The task breakdown table and trend chart already have correct implementations and data-testid attributes, so no changes are needed for those components.

## Implementation Steps

### 1. Update Date Filter UI in CostDashboard Component

**File**: `file:web-ui/src/components/metrics/CostDashboard.tsx`

**Location**: Lines 324-334 (current SELECT dropdown section)

**Changes Required**:
- Replace the SELECT dropdown with a container DIV having `data-testid="date-range-filter"`
- Add two date INPUT elements:
  - Start date input with `data-testid="start-date-input"`, `type="date"`
  - End date input with `data-testid="end-date-input"`, `type="date"`
- Add Apply button with `data-testid="apply-filter-button"`
- Style using existing Tailwind classes to match the component's design

### 2. Update State Management

**File**: `file:web-ui/src/components/metrics/CostDashboard.tsx`

**Location**: Lines 177-182 (state declarations)

**Changes Required**:
- Remove the `dateRange` state (line 182) that stores DateRangeOption
- Add two new state variables:
  - `startDate: string` - stores the start date in YYYY-MM-DD format
  - `endDate: string` - stores the end date in YYYY-MM-DD format
- Initialize with reasonable defaults (e.g., last 30 days)

### 3. Update Date Filter Logic

**File**: `file:web-ui/src/components/metrics/CostDashboard.tsx`

**Location**: Lines 184-202 (dateFilter useMemo)

**Changes Required**:
- Remove the existing `dateFilter` useMemo that calculates dates from DateRangeOption
- Create a new handler function `handleApplyFilter` that:
  - Validates that start date is before end date
  - Triggers data refetch by updating a dependency in the useEffect
- Add onChange handlers for both date inputs to update state

### 4. Update Data Fetching Logic

**File**: `file:web-ui/src/components/metrics/CostDashboard.tsx`

**Location**: Lines 224-279 (useEffect for data loading)

**Changes Required**:
- Update the useEffect dependencies to include `startDate` and `endDate` instead of `dateFilter`
- Modify the API calls to pass `startDate` and `endDate` directly:
  - `getProjectTokens(projectId, startDate, endDate, 1000)`
  - `getTokenUsageTimeSeries(projectId, startDate, endDate, 'day')`
- Ensure empty strings are treated as undefined (no date filter)

### 5. Update CSV Export Function

**File**: `file:web-ui/src/components/metrics/CostDashboard.tsx`

**Location**: Lines 106-156 (exportToCSV function)

**Changes Required**:
- Update the CSV filename generation (line 153) to include the date range if specified
- Format: `cost-report-${projectId}-${startDate}-to-${endDate}.csv` when dates are set
- Fall back to current format when no date filter is applied

### 6. Verify Data-testid Attributes

**Files**: `file:web-ui/src/components/metrics/CostDashboard.tsx`

**Verification Points**:
- Task breakdown table (lines 571-630):
  - Container: `data-testid="cost-per-task-table"` ✓ (line 571)
  - Headers: `task-column-header`, `cost-column-header`, `tokens-column-header` ✓ (lines 584, 590, 596)
  - Rows: `task-cost-row-${task.task_id}` ✓ (line 607)
- Trend chart (lines 383-421):
  - Container: `data-testid="cost-trend-chart"` ✓ (line 384)
  - Data element: `data-testid="trend-chart-data"` ✓ (line 386)

No changes needed - all attributes are correctly implemented.

## Component Structure Diagram

```mermaid
graph TD
    A[CostDashboard Component] --> B[Date Filter Section]
    A --> C[Token Stats Section]
    A --> D[Cost Trend Chart]
    A --> E[Task Cost Table]
    A --> F[Agent/Model Tables]
    
    B --> B1[date-range-filter container]
    B1 --> B2[start-date-input]
    B1 --> B3[end-date-input]
    B1 --> B4[apply-filter-button]
    
    D --> D1[trend-chart container]
    D1 --> D2[trend-chart-data LineChart]
    D1 --> D3[Empty state message]
    
    E --> E1[cost-per-task-table container]
    E1 --> E2[Table Headers]
    E1 --> E3[Task Rows]
    E2 --> E2A[task-column-header]
    E2 --> E2B[cost-column-header]
    E2 --> E2C[tokens-column-header]
    E3 --> E3A[task-cost-row-N]
    
    style B fill:#ffeb3b
    style D fill:#4caf50
    style E fill:#4caf50
    style B1 fill:#ffd54f
```

## Data Flow Sequence

```mermaid
sequenceDiagram
    participant User
    participant DateFilter
    participant State
    participant API
    participant Chart
    participant Table
    
    User->>DateFilter: Select start date
    DateFilter->>State: Update startDate
    User->>DateFilter: Select end date
    DateFilter->>State: Update endDate
    User->>DateFilter: Click Apply
    DateFilter->>State: Trigger refetch
    State->>API: getProjectTokens(projectId, startDate, endDate)
    State->>API: getTokenUsageTimeSeries(projectId, startDate, endDate)
    API-->>State: Return filtered data
    State->>Chart: Update timeSeries data
    State->>Table: Update taskCosts data
    Chart-->>User: Display filtered trend
    Table-->>User: Display filtered tasks
```

## Testing Verification

After implementation, verify these E2E test scenarios pass:

| Test | File Location | Expected Behavior |
|------|---------------|-------------------|
| Date range filter | `file:tests/e2e/test_metrics_ui.spec.ts:184` | Date inputs visible, Apply button functional |
| Task cost display | `file:tests/e2e/test_metrics_ui.spec.ts:242` | Table headers and rows with correct data-testid |
| Trend chart display | `file:tests/e2e/test_metrics_ui.spec.ts:332` | Chart renders with trend-chart-data element |

## Edge Cases to Handle

1. **Invalid Date Range**: Start date after end date - show validation error, disable Apply button
2. **Empty Date Fields**: Treat as "all time" filter, fetch all data without date constraints
3. **Future Dates**: Allow but may return empty results - show appropriate empty state
4. **API Errors**: Display error message, maintain previous data if available
5. **No Data for Range**: Show empty state message in chart and table sections

---

Execution Information

Branch: main
Commit: 360e111