7d6e248a14
- dashboard/: Vite 5 + React 18 + TypeScript strict SPA
- Auth: sessionStorage credentials, TokenManager validation, AuthProvider context
- Pages: Login, Agents (search + filter), AgentDetail (suspend/reactivate),
Credentials (generate/rotate/revoke, new secret shown once),
AuditLog (filters + pagination), Health (PG + Redis status, 30s refresh)
- Components: Button, Badge, ConfirmDialog, AppShell, RequireAuth
- All destructive actions gated by ConfirmDialog
- Zero dangerouslySetInnerHTML; sessionStorage only (OWASP compliant)
- src/routes/health.ts: unauthenticated GET /health — PG + Redis connectivity
- src/app.ts: health route + dashboard/dist/ served at /dashboard with SPA fallback
- 6 new health route tests; 308/308 unit tests passing
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
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:
cd dashboard
npm install
Start the Vite dev server:
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.tsfor/apiand/healthpaths
4. Building
Compile TypeScript and bundle with Vite:
npm run build
Output is written to dashboard/dist/. The build is an optimised static bundle (HTML, CSS, JS).
To verify the build locally:
npm run preview
5. Deployment
The AgentIdP Express server automatically serves the built dashboard:
- Static assets at
/dashboard/(viaexpress.static) - SPA fallback — all
/dashboard/*requests not matching a static file returnindex.html
Steps:
- Build the dashboard:
cd dashboard && npm run build - Start (or restart) the AgentIdP server:
npm start - 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. |