Dashboard
Visual interface for exploring agent sessions, events, and explanations.
Overview
The AgentLens dashboard is a lightweight single-page application served directly by the backend. No build step, no framework dependencies — just HTML, CSS, and vanilla JavaScript.
Access it at http://localhost:3000 (or wherever your backend is running).
Features
Session Browser
List all sessions with status indicators (active, completed, error), agent names, and token counts. Filter by status.
Event Timeline
Interactive timeline showing every event in a session with timing, event types, and tool calls.
Token Charts
Canvas-based charts showing per-event and cumulative token usage across the session.
Explain View
Human-readable summaries generated by the backend's explain endpoint. See what happened and why.
Dashboard Files
| File | Purpose |
|---|---|
dashboard/index.html | Main HTML structure and layout |
dashboard/styles.css | Dark theme styling, responsive layout |
dashboard/app.js | Application logic — API calls, rendering, chart drawing |
Customization
The dashboard is plain HTML/CSS/JS — customize it by editing the files directly.
Change the theme
Edit CSS variables in dashboard/styles.css to change colors, fonts, and spacing.
Add new views
The dashboard fetches data from the REST API. Add new API calls in app.js and create corresponding UI components.
Embed in your app
Since the dashboard is just static files, you can serve them from any web server or embed them in your own application.
The backend serves the dashboard from the dashboard/ directory using Express static file serving. Changes to HTML/CSS/JS take effect immediately on page refresh — no rebuild needed.