Dashboard Overview Page

The Overview page is the default landing page when you open the dashboard at /dashboard. It gives you an at-a-glance picture of your entire CodeSpar deployment — how many agents are running, what they're doing, and what needs your attention.

Header Bar

The top of the page displays a summary row with three counters and a system health indicator:

The system indicator turns amber if any agent is in an error state, and red if the backend API is unreachable.

Stat Cards

Below the header, four stat cards provide key metrics at a glance:

Agents Card

• Primary value: Total agent count (e.g., "6")
• Breakdown: Active and error counts shown as secondary text (e.g., "4 active, 1 error")
• Visual: Miniature status breakdown with colored segments

Tasks Today Card

• Primary value: Number of tasks executed today (e.g., "23")
• Delta indicator: Comparison to the previous day, shown as a positive or negative change (e.g., "+5 from yesterday")
• Visual: Small trend arrow (up = green, down = neutral gray)

Approvals Card

• Primary value: Number of pending approvals (e.g., "3")
• Urgency: If approvals are pending, the card border highlights in amber
• Action: Clicking navigates to the audit trail filtered to pending approvals

Build Success Card

• Primary value: Build success rate over the last 24 hours (e.g., "94%")
• Visual: Percentage shown prominently with a subtle progress ring
• Color: Green above 90%, amber between 70-90%, red below 70%

Agent Cards

The main section of the Overview page displays a grid of agent cards — one for each agent in the selected project. These cards are the primary way to monitor agent activity.

Card Layout

Each agent card contains:

┌────────────────────────────────────────────┐
│ Project Agent                ACTIVE  slack  │
│ codespar/codespar                          │
│                                            │
│ Tasks: 12 (+3)              ████▃▃▂▁      │
│                                            │
│ Autonomy: ●●●○○○  L3                      │
│ Last active: 2 minutes ago                 │
└────────────────────────────────────────────┘

Card Elements

Status Badges

Channel Badges

Autonomy Dots

The autonomy level is displayed as six dots, where filled dots represent the current level:

• ●○○○○○ — L0 (Passive)
• ●●○○○○ — L1 (Notify)
• ●●●○○○ — L2 (Suggest)
• ●●●●○○ — L3 (Auto-Low)
• ●●●●●○ — L4 (Auto-Med)
• ●●●●●● — L5 (Full Auto)

Interaction

Clicking an agent card navigates to the Agent Detail page for that agent, where you can view detailed stats, activity history, configuration, and perform actions like suspend or restart.

Live Feed

Below the agent cards, the Live Feed section shows recent audit trail entries in real time. This is a condensed view of the full Audit Trail.

Feed Entry Format

Each entry in the live feed shows:

● 2m ago  task-agent-01  task.complete  "Added health check endpoint"  LOW  SUCCESS

Pending Approvals

When an entry has a PENDING result (e.g., a deploy awaiting approval), an Approve button appears next to it. Clicking the button opens a confirmation dialog where you can approve the action directly from the dashboard.

Actor Name Resolution

The formatActor function handles different actor formats:

function formatActor(actor: string): string {
  // Slack UID: resolve to display name
  if (actor.startsWith("U") && actor.length === 11) {
    return slackUserMap.get(actor) ?? actor;
  }
 
  // Agent ID: show friendly name
  if (actor.startsWith("agent-")) {
    return agentNameMap.get(actor) ?? actor;
  }
 
  // System actor
  if (actor === "system") {
    return "System";
  }
 
  return actor;
}

Actor names are color-coded in the feed:

• Blue — agent actors
• White — human user actors
• Gray — system actors

Setup Banner

If no project has been linked yet, the Overview page displays a Setup Banner at the top of the page instead of the agent cards and stats:

┌──────────────────────────────────────────────────────┐
│                                                       │
│   Welcome to CodeSpar Dashboard                      │
│                                                       │
│   No project is linked yet. Connect a repository     │
│   and configure your channels to get started.         │
│                                                       │
│   [Go to Setup →]                                    │
│                                                       │
└──────────────────────────────────────────────────────┘

Clicking "Go to Setup" navigates to /dashboard/setup where you can configure channels and link a repository. See the Setup page documentation for details.

Data Flow

The Overview page fetches data from three API endpoints, all polled via the usePolling hook:

All requests include the x-org-id header for multi-tenant isolation.

Next Steps

• Agent Detail — click an agent card to see detailed stats and configuration
• Audit Trail — view the full searchable event log
• Setup — configure channels and link a project