Rulecatch

Dashboard Overview

Audience: Customer — this page documents the dashboard home page and overview cards.

The main dashboard page (/dashboard) provides a high-level summary of AI development activity, rule violations, and costs.

URL

/dashboard

Access

Available to all plans (Starter, Pro, Enterprise). No feature gate.

Data Source

GET /api/v1/dashboard/overview?period={period}

Accepts period values: 24h, 7d, 30d (default).

Empty State

When no data exists (no API key set and no sessions or violations), the page displays a setup wizard with three steps:

  1. Choose your data region — Links to /dashboard/settings
  2. Install the CLI — Shows npx @rulecatch/ai-pooler init
  3. Start coding — Explains that data appears automatically

Primary Stats (Top Row)

Four summary cards displayed in a grid:

Card Metric Icon Color
AI Sessions summary.totalSessions Brain Purple
Rule Violations violations.totalViolations AlertTriangle Red
AI Cost / True Cost summary.totalCost DollarSign Yellow
Tokens Used summary.totalTokens Zap Blue

True Cost

If the user has set a developer hourly rate (via Team page), the cost card shows True Cost instead of AI Cost:

True Cost = AI Cost + (Active Time in hours × Hourly Rate)

The card displays both components: $X.XX AI + $X.XX dev.

Secondary Stats (Middle Row)

Three metrics in a secondary row:

Card Metric Description
Correction Rate violations.correctionRate Percentage of violations that were subsequently fixed
Lines/Hour summary.linesPerHour Productivity rate (net lines added per active hour)
Cost/Line summary.costPerLine Cost efficiency (AI cost per line of code)

If an hourly rate is set, Cost/Line becomes True Cost/Line:

True Cost/Line = AI Cost/Line + (Hourly Rate / Lines per Hour)

Top Rule Violations

A clickable list showing the most frequently violated rules:

Column Description
Severity icon Color-coded: red (error), yellow (warning), blue (info)
Rule name The violated rule's display name
Count Number of violations (e.g., 12×)

Each row is clickable and navigates to /dashboard/violations?rule={ruleName}.

A "View all" link navigates to /dashboard/violations.

Quick Links

Two cards at the bottom providing navigation:

Link Destination Description
View Rule Violations /dashboard/violations See all violations by category, severity, and file
View AI Sessions /dashboard/ai Detailed token usage, costs, and productivity metrics

Date Range Selector

A DateRangeSelector component in the header allows switching between time periods. The selected period is shared across all dashboard pages via DateRangeContext.

See Also

Violations →