# SentryAgent.ai AgentIdP — Web Dashboard

## 1. Overview

The AgentIdP Dashboard is a React 18 single-page application (SPA) that provides a visual
management interface for the AgentIdP API. It allows operators to:

- Browse, search, and filter all registered AI agents
- View agent details and manage lifecycle (suspend / reactivate)
- Generate, rotate, and revoke agent credentials
- Query the audit log with filters for agent, action, outcome, and date range
- Monitor PostgreSQL and Redis connectivity in real time

The dashboard is co-served by the Express API server at `/dashboard/` — no separate hosting
is required.

## 2. Prerequisites

- Node.js 18+
- A running AgentIdP server (local or remote)
- An active agent credential (Client ID + Client Secret) with full scopes

## 3. Development

Install dashboard dependencies:

```bash
cd dashboard
npm install
```

Start the Vite dev server:

```bash
npm run dev
```

The dev server starts at `http://localhost:5173/dashboard/`. API calls are made to
`window.location.origin` (defaulted in the Login form), so either:

- Set the **API Base URL** field to your local server (e.g. `http://localhost:3000`)
- Or configure a Vite proxy in `vite.config.ts` for `/api` and `/health` paths

## 4. Building

Compile TypeScript and bundle with Vite:

```bash
npm run build
```

Output is written to `dashboard/dist/`. The build is an optimised static bundle (HTML, CSS, JS).

To verify the build locally:

```bash
npm run preview
```

## 5. Deployment

The AgentIdP Express server automatically serves the built dashboard:

- Static assets at `/dashboard/` (via `express.static`)
- SPA fallback — all `/dashboard/*` requests not matching a static file return `index.html`

**Steps:**

1. Build the dashboard: `cd dashboard && npm run build`
2. Start (or restart) the AgentIdP server: `npm start`
3. Open `https://your-api-host/dashboard/` in a browser

No additional nginx or CDN configuration is required for basic deployments.

## 6. Login

The login form has three fields:

| Field | Description |
|---|---|
| **API Base URL** | Base URL of the AgentIdP server, e.g. `https://api.example.com`. Defaults to the current page origin, which works when the dashboard is co-served. |
| **Client ID** | The UUID of an agent registered in AgentIdP. This agent must have the scopes `agents:read agents:write tokens:read audit:read`. |
| **Client Secret** | The plain-text client secret for the agent. Validated against the token endpoint on login. |

Credentials are stored in `sessionStorage` only — they are cleared when the browser tab is closed.

## 7. Pages

| Page | Route | Description |
|---|---|---|
| **Agents** | `/dashboard/agents` | Paginated list of all agents. Search by email (debounced), filter by status. Click a row for details. |
| **Agent Detail** | `/dashboard/agents/:agentId` | Full agent metadata. Suspend or reactivate (with confirmation). Link to credentials. |
| **Credentials** | `/dashboard/agents/:agentId/credentials` | List all credentials. Generate, rotate, or revoke. New secrets shown exactly once. |
| **Audit Log** | `/dashboard/audit` | Paginated audit events with filters for agent ID, action, outcome, and date range. |
| **Health** | `/dashboard/health` | PostgreSQL and Redis connectivity cards. Auto-refreshes every 30 seconds. |