Files
SentryAgent.ai Developer 26a56f84e1 feat(phase-4): WS6 — Billing & Usage Metering (Stripe, free tier enforcement)
- DB migration 023: tenant_subscriptions and usage_events tables
- UsageMeteringMiddleware: in-memory counters, 60s flush to DB via UPSERT
- FreeTierEnforcementMiddleware: 10 agents / 1,000 calls/day limits, Redis cache
- UsageService: getDailyUsage and getActiveAgentCount
- BillingService: Stripe checkout sessions, webhook verification, subscription status
- POST /billing/checkout, POST /billing/webhook, GET /billing/usage endpoints
- BILLING_ENABLED=false disables enforcement without breaking metering
- Dashboard: Usage tab with Free Tier/Pro badges and metric cards
- 19 unit tests passing across billing services and middleware

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-02 10:51:36 +00:00
..

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:

  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.