Files

SentryAgent.ai Developer 7d6e248a14 feat(phase-2): workstream 6 — Web Dashboard UI

- 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>

2026-03-28 23:19:18 +00:00

3.2 KiB

Raw Blame History

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.ts for /api and /health paths

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/ (via express.static)
SPA fallback — all /dashboard/* requests not matching a static file return index.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.

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.

3.2 KiB Raw Blame History