Skip to content

API Cost Tracking Dashboard#66

Open
OBenner wants to merge 21 commits intodevelopfrom
auto-claude/076-api-cost-tracking-dashboard
Open

API Cost Tracking Dashboard#66
OBenner wants to merge 21 commits intodevelopfrom
auto-claude/076-api-cost-tracking-dashboard

Conversation

@OBenner
Copy link
Copy Markdown
Owner

@OBenner OBenner commented Feb 13, 2026

Real-time tracking of API usage and costs across all agent operations. Show per-task costs, historical trends, budget alerts, and cost optimization suggestions. Enable cost-conscious development.

OBenner and others added 21 commits February 13, 2026 14:48
…TokenStats

- Added cost field (float) to PhaseTokenStats dataclass
- Added total_cost field to TaskTokenStats dataclass
- Updated to_dict() method to include cost information in serialization

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Added show_cost_summary function to analytics_commands.py
- Added --cost-summary CLI argument in main.py
- Updated handle_analytics_command to support cost_summary parameter
- Cost summary displays: total cost, token usage, cost breakdowns by agent/model, averages

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Implemented CostTrendsChart component following the pattern from
TrendsChart.tsx. The component displays cost trends over time with:
- Line chart showing cost, input tokens, and output tokens
- Time range filter (7d, 30d, 90d, all)
- Summary statistics below the chart
- Loading and empty states
- Responsive SVG-based visualization

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Created CostByModel component following TokenStatsDisplay pattern:
- Displays model cost breakdown with percentage bars
- Shows input/output token counts per model
- Includes per-phase cost breakdown (planning/coding/validation)
- Loading and empty states with appropriate icons
- Progress bars showing each model's percentage of total cost
- Uses i18n translation keys (costAnalytics namespace)
- Sorted by cost (highest first)
- Tooltips for full model names

Also created costAnalytics translation files:
- English (en/costAnalytics.json)
- French (fr/costAnalytics.json)
- Includes all keys for CostByModel and future components

Component exported through cost-analytics/index.ts
Build verified: TypeScript compilation successful

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Created CostDashboard.tsx following ProductivityDashboard.tsx pattern
- Features:
  * Loads cost summary and trends from backend API
  * Time range filter (7d, 30d, 90d, all) with automatic refresh
  * Refresh button for manual data reload
  * Export to JSON and CSV formats
  * Renders CostSummaryCard, CostTrendsChart, and CostByModel components
  * Loading state with spinner
  * Empty state when no cost data available
  * Toast notifications for user feedback
- Updated index.ts to export CostDashboard
- Frontend build verified (TypeScript compilation successful)
- Updated implementation plan status to completed
- Created BudgetSettings.tsx component following AccountSettings pattern
- Added monthly budget input with USD currency formatting
- Added alert threshold slider (50-100% range)
- Added budget status display (current spending, remaining, alerts)
- Implemented save functionality with validation
- Added English and French translation keys
- Exported component through index.ts

Features:
- Budget status display with color-coded warnings
- Real-time budget calculations
- Toast notifications for save success/failure
- Loading states for async operations
- Form validation for budget and threshold values

Verification: Component compiles successfully with TypeScript
- Add 'cost-analytics' navigation item to sidebar with DollarSign icon
- Add translation keys for cost analytics (en/fr)
- Import and integrate CostDashboard component in App.tsx
- Add keyboard shortcut '$' for quick access to cost analytics
Created comprehensive end-to-end test suite for cost tracking system:

- test_cost_tracking_e2e.py: 7 automated tests covering:
  1. CostTracker saves data to spec directory
  2. Cost calculation accuracy (math verification)
  3. Analytics aggregation across specs
  4. Time range filtering (7d, 30d, all)
  5. Export functionality (JSON and CSV)
  6. CostTracker.get_analytics_data() format
  7. Model pricing configuration

- SUBTASK_5_2_E2E_TEST_REPORT.md: Complete test documentation
  - Verification results for all 5 acceptance criteria
  - Integration points verified (backend + frontend)
  - Test summary: 7/7 tests passed
  - Known limitations documented
  - Recommendation: Mark subtask-5-2 COMPLETE

All tests passed, cost tracking system fully functional.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Created SUBTASK_5_2_COMPLETION_SUMMARY.md documenting:
- 7/7 automated tests passed
- Verification of all 5 acceptance criteria
- Integration points verified (backend + frontend)
- Test execution: ~30 seconds
- Recommendation: Mark COMPLETE

All quality checklist items verified.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Added check_budget_alerts() function to session.py that:
- Reads budget config from spec directory or env vars
- Compares total spending against budget thresholds
- Generates alerts at multiple levels (healthy/moderate/warning/exceeded)
- Provides clear messages with emoji indicators

Integrated budget checks into run_agent_session() after cost tracking:
- Automatically checks budget after each API session
- Displays alerts based on severity (error/warning/info)
- Keeps output clean by suppressing healthy status messages

Budget configuration priority:
1. {spec_dir}/budget_config.json (spec-specific)
2. API_COST_BUDGET and API_COST_ALERT_THRESHOLD env vars
3. Default: $100 budget, 80% alert threshold

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Created tests/test_cost_tracking.py with 54 comprehensive unit tests
- Created tests/integration/test_cost_analytics_integration.py with 33 integration tests
- Moved test_cost_tracking_e2e.py to tests/ directory
- All 87 new tests pass successfully
- Covers all major functionality: CostTracker, analytics, aggregation, export

Addresses QA Fix Request items #1 and #2

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
"""

import json
import shutil

Check notice

Code scanning / CodeQL

Unused import Note test

Import of 'shutil' is not used.

Copilot Autofix

AI 3 months ago

To fix an unused import, the general solution is to remove the import statement for any module that is not referenced in the file. This eliminates unnecessary dependencies and slightly improves readability and import-time performance.

In this specific case, the best fix is to delete the import shutil line from tests/test_cost_tracking_e2e.py. No other code changes are required, since there are no usages to update or replace. The change should be made at the top of the file where the imports are declared, removing only line 20 while preserving the rest of the imports and code unchanged.

Suggested changeset 1
tests/test_cost_tracking_e2e.py

Autofix patch

Autofix patch
Run the following command in your local git repository to apply this patch
cat << 'EOF' | git apply
diff --git a/tests/test_cost_tracking_e2e.py b/tests/test_cost_tracking_e2e.py
--- a/tests/test_cost_tracking_e2e.py
+++ b/tests/test_cost_tracking_e2e.py
@@ -17,7 +17,6 @@
 """
 
 import json
-import shutil
 import tempfile
 from datetime import datetime, timedelta, UTC
 from pathlib import Path
EOF
@@ -17,7 +17,6 @@
"""

import json
import shutil
import tempfile
from datetime import datetime, timedelta, UTC
from pathlib import Path
Copilot is powered by AI and may make mistakes. Always verify output.
import json
import shutil
import tempfile
from datetime import datetime, timedelta, UTC

Check notice

Code scanning / CodeQL

Unused import Note test

Import of 'timedelta' is not used.

Copilot Autofix

AI 3 months ago

To fix an unused import, remove the unused name from the import statement (or delete the entire import if all names are unused). This keeps dependencies minimal and code clearer.

Here, the outer import on line 22 brings in datetime, timedelta, UTC, but only datetime and UTC are needed. The best minimal fix is to edit that line to import only datetime and UTC, leaving all other code untouched.

Concretely:

  • In tests/test_cost_tracking_e2e.py, locate the line from datetime import datetime, timedelta, UTC.
  • Change it to from datetime import datetime, UTC.
  • No additional methods, imports, or definitions are required.
Suggested changeset 1
tests/test_cost_tracking_e2e.py

Autofix patch

Autofix patch
Run the following command in your local git repository to apply this patch
cat << 'EOF' | git apply
diff --git a/tests/test_cost_tracking_e2e.py b/tests/test_cost_tracking_e2e.py
--- a/tests/test_cost_tracking_e2e.py
+++ b/tests/test_cost_tracking_e2e.py
@@ -19,7 +19,7 @@
 import json
 import shutil
 import tempfile
-from datetime import datetime, timedelta, UTC
+from datetime import datetime, UTC
 from pathlib import Path
 
 # Import the modules we're testing
EOF
@@ -19,7 +19,7 @@
import json
import shutil
import tempfile
from datetime import datetime, timedelta, UTC
from datetime import datetime, UTC
from pathlib import Path

# Import the modules we're testing
Copilot is powered by AI and may make mistakes. Always verify output.
@@ -0,0 +1,264 @@
import { ipcMain } from 'electron';
import { IPC_CHANNELS } from '../../shared/constants';

Check notice

Code scanning / CodeQL

Unused variable, import, function or class Note

Unused import IPC_CHANNELS.

Copilot Autofix

AI 3 months ago

To fix the problem, remove the unused IPC_CHANNELS import from this file. This eliminates dead code and avoids confusion, without affecting runtime behavior, since the symbol is not referenced anywhere.

Concretely, in apps/frontend/src/main/ipc-handlers/cost-analytics-handlers.ts, delete the import line import { IPC_CHANNELS } from '../../shared/constants'; (line 2 in the snippet). No other code changes or additional imports are necessary, and the rest of the file remains unchanged.

Suggested changeset 1
apps/frontend/src/main/ipc-handlers/cost-analytics-handlers.ts

Autofix patch

Autofix patch
Run the following command in your local git repository to apply this patch
cat << 'EOF' | git apply
diff --git a/apps/frontend/src/main/ipc-handlers/cost-analytics-handlers.ts b/apps/frontend/src/main/ipc-handlers/cost-analytics-handlers.ts
--- a/apps/frontend/src/main/ipc-handlers/cost-analytics-handlers.ts
+++ b/apps/frontend/src/main/ipc-handlers/cost-analytics-handlers.ts
@@ -1,5 +1,4 @@
 import { ipcMain } from 'electron';
-import { IPC_CHANNELS } from '../../shared/constants';
 import type {
   IPCResult,
   CostSummary,
EOF
@@ -1,5 +1,4 @@
import { ipcMain } from 'electron';
import { IPC_CHANNELS } from '../../shared/constants';
import type {
IPCResult,
CostSummary,
Copilot is powered by AI and may make mistakes. Always verify output.
/**
* Get a color class for the progress bar based on model name
*/
function getModelColor(model: string): string {

Check notice

Code scanning / CodeQL

Unused variable, import, function or class Note

Unused function getModelColor.

Copilot Autofix

AI 3 months ago

To fix the problem, remove the unused getModelColor helper function so there is no dead code. Since it is not referenced in the shown snippet and we must avoid changing functionality, the best fix is to delete only that function’s declaration and its associated comment, leaving the rest of the file intact.

Concretely, in apps/frontend/src/renderer/components/cost-analytics/CostByModel.tsx, delete lines 54–68 (the JSDoc comment and the getModelColor function). No imports or other definitions are required to replace it, and no other parts of the file need adjustment.

Suggested changeset 1
apps/frontend/src/renderer/components/cost-analytics/CostByModel.tsx

Autofix patch

Autofix patch
Run the following command in your local git repository to apply this patch
cat << 'EOF' | git apply
diff --git a/apps/frontend/src/renderer/components/cost-analytics/CostByModel.tsx b/apps/frontend/src/renderer/components/cost-analytics/CostByModel.tsx
--- a/apps/frontend/src/renderer/components/cost-analytics/CostByModel.tsx
+++ b/apps/frontend/src/renderer/components/cost-analytics/CostByModel.tsx
@@ -52,22 +52,6 @@
 }
 
 /**
- * Get a color class for the progress bar based on model name
- */
-function getModelColor(model: string): string {
-  if (model.includes('haiku')) {
-    return 'bg-emerald-500';
-  }
-  if (model.includes('sonnet')) {
-    return 'bg-blue-500';
-  }
-  if (model.includes('opus')) {
-    return 'bg-purple-500';
-  }
-  return 'bg-primary';
-}
-
-/**
  * Render a single model's cost breakdown card
  */
 function ModelCostCard({
EOF
@@ -52,22 +52,6 @@
}

/**
* Get a color class for the progress bar based on model name
*/
function getModelColor(model: string): string {
if (model.includes('haiku')) {
return 'bg-emerald-500';
}
if (model.includes('sonnet')) {
return 'bg-blue-500';
}
if (model.includes('opus')) {
return 'bg-purple-500';
}
return 'bg-primary';
}

/**
* Render a single model's cost breakdown card
*/
function ModelCostCard({
Copilot is powered by AI and may make mistakes. Always verify output.
@@ -0,0 +1,358 @@
import { useMemo } from 'react';
import { TrendingUp, DollarSign, Calendar } from 'lucide-react';

Check notice

Code scanning / CodeQL

Unused variable, import, function or class Note

Unused import TrendingUp.

Copilot Autofix

AI 3 months ago

To fix an unused import, either start using it or remove it. Since there is no evidence that TrendingUp is needed, the minimal, non‑functional fix is to delete TrendingUp from the import list while leaving the other imported icons intact.

Concretely, in apps/frontend/src/renderer/components/cost-analytics/CostTrendsChart.tsx, edit line 2 to remove TrendingUp from the destructuring import, resulting in an import that only brings in DollarSign and Calendar. No other code changes or additional imports are required.

Suggested changeset 1
apps/frontend/src/renderer/components/cost-analytics/CostTrendsChart.tsx

Autofix patch

Autofix patch
Run the following command in your local git repository to apply this patch
cat << 'EOF' | git apply
diff --git a/apps/frontend/src/renderer/components/cost-analytics/CostTrendsChart.tsx b/apps/frontend/src/renderer/components/cost-analytics/CostTrendsChart.tsx
--- a/apps/frontend/src/renderer/components/cost-analytics/CostTrendsChart.tsx
+++ b/apps/frontend/src/renderer/components/cost-analytics/CostTrendsChart.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { TrendingUp, DollarSign, Calendar } from 'lucide-react';
+import { DollarSign, Calendar } from 'lucide-react';
 import type { CostTrendPoint } from '../../../shared/types/task';
 
 interface CostTrendsChartProps {
EOF
@@ -1,5 +1,5 @@
import { useMemo } from 'react';
import { TrendingUp, DollarSign, Calendar } from 'lucide-react';
import { DollarSign, Calendar } from 'lucide-react';
import type { CostTrendPoint } from '../../../shared/types/task';

interface CostTrendsChartProps {
Copilot is powered by AI and may make mistakes. Always verify output.
@pantoaibot
Copy link
Copy Markdown

pantoaibot Bot commented Feb 13, 2026

Auto review disabled due to large PR. If you still want me to review this PR? Please comment /review

@sonarqubecloud
Copy link
Copy Markdown

Quality Gate Failed Quality Gate failed

Failed conditions
10.1% Duplication on New Code (required ≤ 3%)
C Reliability Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants